Browser A11y Tools

Your favorite (and least favorite) browsers have accessibility tools built in that will help you create great experiences for everyone.

Outline

• Chrome
  • Inspect
    • Name, role
    • Color contrast
    • Keyboard focusable
  • Elements
    • Node > Accessibility
      • Role, ARIA attributes, states, etc.
      • Enable full-page accessibility tree
      • Show source order
  • Device emulation
  • Lighthouse
    • Accessibility audits (Axe)
  • Rendering
    • Emulate vision deficiencies
• Edge
  • EVERYTHING CHROME HAS
  • Issues > Accessibility
  • Read Aloud
• Firefox
  • Accessibility panel
    • Check for specific issues: Contrast, Keyboard, Text Issues, All
    • Simulate vision impairments
    • Show Tabbing Order
    • Inspect
      • Color contrast
      • Alt text
      • Name, role, states, etc.
  • Responsive Design Mode
• Safari
  • Audit
    • Full page audit
    • Specific tests, e.g. testMenuRoleForRequiredChildren, testForLinkLabels
  • Responsive Design Mode
  • Elements
    • Node > Accessibility

References

• https://developer.chrome.com/docs/devtools/accessibility/reference/
• https://firefox-source-docs.mozilla.org/devtools-user/accessibility_inspector/
• https://developer.apple.com/safari/tools/

Links

• https://docs.microsoft.com/en-us/microsoft-edge/devtools-guide-chromium/accessibility/accessibility-testing-in-devtools