Skip to content
Accessible Astro Documentation

Accessibility testing

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”)?

Keyboard Navigation

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?

Screen Reader Compatibility

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