Accessibility
Test for accessibility
Tools and checkers to help you test against accessibility guidelines.
Test your design
WebAim contrast checker - check colour contrast of text and graphics
Color Oracle - colour vision deficiency simulator
Stark - Figma accessibility plugin
The A11y Project - a comprehensive list of design and user experience resources
Accessible Prototypes Playground - accessible Figma prototypes for screenreaders
Test your code
Eslint-plugin-jsx-a11y linting plugin - find accessibility issues in React apps
Cypress axe - commands for Cypress to run accessibilty checks with axe-core
WebAim’s keyboard accessibility guide - check all interactive elements are keyboard accessible and focus feedback is visible
ChromeLens dev tools extension - check the tab order is logical using the ‘trace tab path’ function or use the ‘show tabbing order’ function in Chrome or Firefox
Tiny Helpers - A collection of free single-purpose online tools for web developers
Test with screenreaders
VoiceOver (Mac) -
Watch A11ycasts Voiceover basics
Read WebAim’s Voiceover guideTalkback (Android) -
Watch A11ycasts Talkback basics
Read WebAim’s Talkback guideNVDA (Windows) -
Watch A11ycasts NVDA basics
Read WebAim’s NVDA guide
Test your writing
Readable - get a readability score to measure whether content is likely to be understood by the intended reader
Checklists
Use checklists for guidance. Checklists don't cover off all scenarios or replace testing.
A11y Project and WebAIM - comprehensive checklists in plain English.
WebAim web accessibility evaluation guide - accessibility checks by content type.
Accessibility checklist - Figma checklist of key considerations.
What’s next?
Building to WCAG standards maintains quality and supports assistive technologies.
Clear copy in plain language benefits everyone.