Accessibility means people with different abilities, devices and situations can use your site. It also tends to make a product clearer and more robust for everyone. This checklist covers twenty practical checks, aligned to the Web Content Accessibility Guidelines (WCAG) 2.1 at level AA, which is the target most teams use. The success criterion numbers are included so you can look up the details.
Perceivable: can people take in the content?
- Text alternatives for images (1.1.1). Informative images have meaningful alt text. Purely decorative images use an empty alt attribute so screen readers skip them.
- Captions and transcripts (1.2.1, 1.2.2). Recorded video has captions, and audio-only content has a transcript.
- Headings and landmarks (1.3.1, 2.4.6). Each page has one clear h1, headings follow a logical order, and the page uses landmarks such as header, nav, main and footer.
- Colour is not the only signal (1.4.1). Errors, links and states are also shown with text, icons or underlines.
- Text contrast (1.4.3). Normal text has at least a 4.5:1 contrast ratio against its background. Large text (roughly 24px, or 19px bold) needs at least 3:1.
- Contrast for controls and graphics (1.4.11). Input borders, icons and other meaningful graphics have at least 3:1 contrast.
- Resizable text (1.4.4). The page still works when text is zoomed to 200%.
- Reflow (1.4.10). At a width of 320 CSS pixels, content stacks without needing horizontal scrolling, apart from things like data tables and maps.
- Text spacing (1.4.12). Content is not cut off or overlapping when users increase line, word and letter spacing.
- Hover and focus content (1.4.13). Tooltips and pop-ups can be dismissed, stay visible while hovered, and do not disappear unexpectedly.
Operable: can people use it?
- Keyboard access (2.1.1). Every interactive element can be reached and used with a keyboard alone.
- No keyboard traps (2.1.2). Focus can always move away. Modal dialogs keep focus inside while open, and close with the Escape key.
- Visible focus (2.4.7). A clear outline or highlight shows which element has focus.
- Skip link (2.4.1). A "skip to main content" link lets keyboard users bypass repeated navigation.
- Page titles and link text (2.4.2, 2.4.4). Each page has a descriptive title, and link text makes sense on its own. Avoid repeated "click here" links.
- Motion and animation (2.2.2, 2.3.1). Moving or auto-updating content can be paused, nothing flashes more than three times per second, and animation respects the reduced-motion setting.
Understandable: does it make sense?
- Page language (3.1.1). The html element declares the language, so screen readers pronounce text correctly.
- Form labels and purpose (1.3.1, 3.3.2, 1.3.5). Every field has a visible, programmatically linked label, clear instructions, and the right autocomplete attribute for personal details.
- Helpful errors (3.3.1, 3.3.3). Errors are identified in text, point to the field, and suggest how to fix the problem.
Robust: does it work with assistive technology?
- Name, role, value and status messages (4.1.2, 4.1.3). Custom components expose the right name, role and state to assistive technology, and updates like "item added" or "form saved" are announced without moving focus.
How to run the audit
- Start with automated tools. axe DevTools, Lighthouse and WAVE quickly find common problems. They only catch a portion of issues, so do not stop here.
- Do a keyboard-only pass. Unplug the mouse and try to complete your main tasks.
- Try a screen reader. NVDA on Windows, VoiceOver on Mac and iPhone, or TalkBack on Android.
- Zoom and resize. Check 200% text zoom and a 320px-wide window.
- Record what you find with the page, the check number, how severe it is and who owns the fix.
Where to start
If the list feels long, fix these first because they affect the most people: colour contrast, keyboard access and focus, form labels, headings and page structure, and alt text. Build the checks into design reviews and your definition of done, so accessibility is part of the work from the start.
This checklist is a practical guide, not legal advice. Accessibility requirements differ between countries and sectors, so check what applies to your organisation.