Accessibility testing

This checklist covers the basics of accessibility testing. While it’s not exhaustive, it helps catch common issues before conducting a formal audit. Remember that regular testing throughout development is key to maintaining accessible websites and applications.

When developing websites or applications, it’s crucial to regularly check for accessibility during the design and development process. This guide provides a comprehensive checklist to help you test your work. A good practice is to test using only your keyboard, zooming to 400% at 1280×1024 pixels resolution, and using a screen reader (like VoiceOver).

General Checks

The foundation of accessibility starts with proper content structure, color contrast, and semantic HTML:

Is the language properly set (<html lang="en">)?
Are skip links present to the main content?
Is all content wrapped in proper landmarks (header, main, footer, nav, article, section, aside)?
Are navigation elements properly labeled (<nav aria-label="Main">, <nav aria-label="Footer">)?
Does the color contrast meet requirements (minimum 4.5:1 for normal text, 3:1 for large text)?
Are links distinguished by more than just color (e.g., underline)?
Do interactive elements and links have clear focus indicators (not just browser default)?
Are links opening in new tabs properly indicated (visually and with sr-only text “opens in new tab”)?
Is there a logical tab order?
Is all content accessible at 400% zoom on 1280×1024 resolution without horizontal scrolling?
Is the heading structure semantic (h1 > h2 > h3 etc.) with one main h1 per page?
Are appropriate HTML elements used for their intended purpose?
Are JavaScript-driven changes properly announced to screen readers?
Are page titles descriptive (e.g., “Page Name - Site Name”)?
Is the logo properly labeled (e.g., “Site Name Logo”) and not linked on homepage?
Is an accessibility statement present and easily findable?
Are duplicate IDs avoided across the page?

Media Content

For images, videos, and animations:

Do videos have captions and audio descriptions (or transcripts)?
Do videos have clear titles on iframe elements?
Are keyboard shortcuts disabled for embedded videos where necessary (e.g., YouTube &disablekb=1)?
Do decorative images have empty alt attributes while informative images have descriptive alternatives?
Can animations longer than 5 seconds be paused?
Is text overlaid on images also available to screen readers?
Are SVG elements with role="img" properly labeled with aria-label or alt?
Are social media icons properly labeled (e.g., “Visit our Facebook page, opens in new tab”)?

Test your site without a mouse or trackpad:

Can all interactive elements be reached and operated with keyboard?
Can the menu be operated with arrow keys?
Can submenus be opened with enter/space/down arrow?
Can submenus be closed with escape?
Is there a focus trap on open submenus?
Do submenus have proper ARIA attributes (aria-expanded, aria-haspopup)?
Are menu toggles implemented as <button> elements (not links)?
Is the search functionality keyboard accessible?
Are carousels/sliders keyboard accessible?
Does keyboard focus remain visible and not get trapped in any section?

Forms and Interactive Elements

Essential form and interactive element checks:

Does each form control have a proper label?
Are required fields clearly indicated?
Are error messages clear, descriptive, and announced to screen readers?
Are error messages linked to their corresponding inputs?
Is the submit button clearly visible and properly labeled?
Are appropriate autocomplete attributes used?
Do search fields have proper labels and submit buttons?
Are newsletter signup forms properly labeled with clear error messages?
Do dialog elements work with keyboard and close with escape?
Are sliders/carousels keyboard-accessible and properly announced?
Are interactive elements using appropriate ARIA attributes?

Test with a screen reader and ensure the content makes sense:

Is the correct information being read?
Are “Read more” links contextual?
Do interactive controls announce their state correctly?
Are navigation menus properly structured (using <ul> and <li>)?
Are landmarks properly labeled?
Are decorative elements hidden from screen readers?

Mobile and Responsive Design

Check responsive behavior and mobile accessibility:

Does the mobile menu work properly with touch and keyboard?
Are submenu items accessible on mobile?
Is the mobile menu toggle button accessible and properly labeled?
Do all interactive elements have touch targets of at least 44×44 pixels?
Is content still readable and functional at various zoom levels?
Are focus indicators visible and not obscured by other elements?

Helpful Tools

Here’s a collection of tools that can help you with accessibility testing:

Browser Extensions

WAVE Evaluation Tool: Identifies accessibility issues directly in your browser
axe DevTools: Automated accessibility testing with detailed reports
Lighthouse: Built into Chrome DevTools, includes accessibility audits
HeadingsMap: Visualizes your document’s heading structure
Color Contrast Analyzer: Helps verify color contrast ratios

Screen Readers

VoiceOver: Built into macOS and iOS
NVDA: Free screen reader for Windows
JAWS: Professional screen reader for Windows
TalkBack: Built into Android devices

Online Tools

WAVE Web Accessibility Tool: Online version of WAVE
WebAIM Color Contrast Checker: Quick contrast ratio verification
HTML5 Outliner: Checks document structure and landmarks
Who Can Use: Color contrast checker showing how different vision types perceive your colors
A11y Project Checklist: Additional accessibility guidelines and resources

Development Tools

eslint-plugin-jsx-a11y: Catches accessibility issues in React code
pa11y: Command-line accessibility testing
Storybook a11y addon: Accessibility testing for Storybook components
axe-core: Accessibility testing engine for automated tools

Make accessibility testing a regular part of your development process, not just a final check. Test early and often to catch issues before they become harder to fix.