Skip to main content

Accessibility Testing

Principle​

Accessibility must be verified continuously during development using a combination of manual testing, assistive technologies, and automated tools.

Keyboard Testing​

Guidance​

  • Navigate the page using only:
    • Tab / Shift+Tab
    • Enter / Space
    • Escape
    • Arrow keys
  • Ensure:
    • the focus order is logical and predictable,
    • the focused element is always visible,
    • all interactive elements are reachable and operable,
    • no component traps keyboard focus except intentional focus traps (e.g. dialogs),
    • hidden or inactive content is not focusable.
  • Test keyboard interaction patterns for components such as:
    • dialogs
    • dropdowns
    • tabs
    • accordions
    • menus
    • listboxes

Automated Tools​

Guidance​

  • Use automated tools to detect common accessibility issues:
    • Lighthouse — built into Chrome DevTools
    • WAVE — browser extension or web tool
    • axe DevTools — browser extension powered by axe-core
  • Automated tools help identify common structural issues, but they do not replace manual accessibility testing.

Browser Accessibility DevTools​

Guidance​

  • Use the Accessibility Tree and accessibility inspection tools in Chrome or Firefox DevTools to verify:
    • accessible names
    • roles
    • states and properties
    • keyboard focusability
    • visibility to assistive technologies
  • Verify that ARIA attributes and dynamic state changes are reflected correctly in the accessibility tree.

Basic Screen Reader Checks​

Guidance​

  • Perform basic testing using:
    • VoiceOver + Safari (iOS)
    • NVDA + Chrome (Windows)
  • Verify:
    • headings can be navigated correctly,
    • buttons and links are announced clearly,
    • forms expose labels, hints, and errors,
    • dynamic updates are announced,
    • dialogs move focus correctly,
    • focus order remains predictable.