Accessibility Checklist: Making Your Website Usable for Everyone
A developer
David K.
Senior Frontend Engineer
Web accessibility (a11y) is not an afterthought; it is a fundamental requirement of modern web development. An inaccessible site excludes millions of users and exposes businesses to legal liabilities. This developer's checklist outlines the steps to meet Web Content Accessibility Guidelines (WCAG) compliance, covering screen readers, keyboard navigation, and contrast levels.
Semantic HTML: The Foundation of Screen Reader Support
Screen readers read web content aloud for users with visual impairments. These tools rely on semantic HTML structure to understand document hierarchies. If you construct your entire page using generic tags like <div> and <span>, the screen reader cannot distinguish headings from body text or buttons from navigation links.
Always use native semantic elements. Use <h1> through <h6> tags for headings, <button> for triggers, <a> for page links, and landmarks (like <nav>, <main>, <header>, and <footer>) to structure page regions. If you must build custom UI components, apply appropriate WAI-ARIA roles and states to describe their behavior, ensuring screen readers parse them accurately.
Keyboard Navigation and Focus Indicators
Many users with motor impairments or visual disabilities navigate websites using only a keyboard. A basic accessibility requirement is that all interactive elements must be keyboard-focusable and reachable using standard navigation inputs.
Test your site by pressing the Tab key. Can you navigate to all buttons, links, and forms in logical order? Ensure you never hide the browser's default outline indicator without replacing it with custom focus styles. Focus rings are essential visual cues for keyboard users, showing them which element is currently active. Additionally, manage focus dynamically when opening modals or dropdown menus, keeping user focus trapped within the active view until closed.
Color Contrast, Typography, and Visual Legibility
Legibility is a key aspect of visual accessibility. The WCAG AA standard requires a minimum contrast ratio of 4.5:1 for standard body text and 3:1 for large text (over 18pt or bold 14pt). This ensures that users with low vision or color blindness can read your content comfortably.
Use online contrast tools to verify your text color selections against their background colors. In addition, avoid using color alone to convey meaning (such as showing form validation errors solely in red without error messages). Keep typography responsive, using relative units (like rem or em) to ensure text scales cleanly when users increase browser zoom levels without breaking your layout structure.
Accessibility Audit Methods: Automated vs. Manual Testing
The table below compares automated accessibility scanners and manual testing methods, detailing detection rates, toolsets, and validation scopes.
| Audit Method | Automated Checkers (e.g., Axe, Lighthouse) | Manual Keyboard & Screen Reader Testing |
|---|---|---|
| Issue Detection Rate | ~30% - 40% (Finds programmatic errors only) | ~90% - 100% (Evaluates actual user experience) |
| Primary Toolset | DevTools extensions, automated scripts, CLI run pipelines | Keyboard tab actions, screen readers (NVDA, VoiceOver) |
| Core Validation Focus | Missing alt text, incorrect contrast calculations, invalid ARIA roles | Logical tab sequences, focus entrapment traps, readable speech paths |
| Legal Standard Target | Basic programmatic baseline compliance | Full UX accessibility compliance (WCAG AA) |
"Web accessibility is not an extra feature. It is a baseline standard. By coding with semantic HTML and verifying layout contrast, we ensure the web remains open to everyone."
Frequently Asked Questions
What is the difference between WCAG AA and AAA compliance?
WCAG AA is the standard legal compliance baseline for most commercial websites, requiring a 4.5:1 contrast ratio. AAA is the highest standard, requiring a 7:1 ratio and advanced accessibility support.
Can I rely fully on automated tools like Lighthouse for accessibility testing?
No. Automated checkers only detect about 30% to 40% of accessibility issues. Manual keyboard walks and screen reader testing are required to ensure full usability.
How do I make custom dynamic dropdowns keyboard accessible?
Implement keyboard listeners for Escape, Enter, Arrow keys, and manage the aria-expanded state along with moving focus to the active list item.
Why are image alt tags so important for accessibility?
Alt tags provide textual descriptions of images for screen reader users. If an alt tag is missing or empty, the screen reader may read the image filename aloud, causing confusion. Descriptive alt text ensures visual media is accessible.
Conclusion
Web accessibility requires a focus on semantics, navigation, and legibility. By using semantic HTML, verifying keyboard focus, and checking color contrast ratios, you can ensure your website is usable for all users. Prioritize accessibility in your development workflow to support an open, inclusive web.
Enjoyed this read?
Get monthly updates on privacy engineering and web performance straight to your inbox.