A basic understanding of Accessibility Testing is essential for Web Developers to integrate into their daily web development practices.
The Google Chrome Developer team put together a fantastic intro series for accessibility testing.
Browser plugins like Lighthouse only test for ONE of the three tests listed below ( Visual Impairment ). If Lighthouse is all you are using, you are missing 2/3 of your accessibility issues.
Some users have visual impairments where color contrast or combinations of colors could make a website impossible to use. We also want to be sure that visual elements have descriptive text for those that cannot see the content you embed into the page. Lastly, we want to make sure the page's overall structure makes sense for those accessing text-only versions of the website.
This type of accessibility test is the most common developers perform.
Here are the most common accessibility audit tools you can use for your preferred browser ( you only need one ):
- Chrome DevTools - Accessibility
- Intro Video ( NOTE: Tool now lives under "Lighthouse" tab )
- Extension - WAVE Evaluation Tool
- Extension - axe DevTools - Web Accessibility Testing
- Audits in Web Inspector
- Extension - a11yTools - Web Accessibility ( Recommended by Apple, but not free )
- Accessibility Inspector ( This is actually crazy powerful )
- Extension - WAVE Accessibility Extension
- Extension - axe DevTools - Web Accessibility Testing
- Website
- Intro Video ( Chrome overview, but same for Firefox )
- Chromium DevTools - Accessibility
- Intro Video ( NOTE: Same as Chrome Browser )
- Extension - axe DevTools - Web Accessibility Testing
- Website
- Intro Video ( Chrome overview, but same for Edge )
Some users cannot use a mouse to navigate a website and rely 100% on keyboard navigation. HTML elements have different keyboard navigation requirements.
This type of accessibility test is often overlooked by developers, and is not detected by plugins like Lighthouse. You do not need any special tools to test keyboard navigation — simply use your keyboard to make sure things work as expected.
macOS Users:
If you are using macOS, for some reason, Apple has disabled keyboard navigation support on the operating system level, as well as separatley in Safari browser, so you will need to make sure this is enabled to test this properly.
System Preferences: ( this will fix issues with Firefox )
Safari Preferences:
Here is a breakdown of the different ARIA Roles of HTML elements and how keyboard navigation should work for each ( see "Keyboard Support" documentation for each example ):
NOTE: Each ARIA Role below also provides HTML Examples, CSS & JavaScript code needed to support Accessibility Requirements
Screen Readers rely heavily on Keyboard Navigation but require that the content also contain audible descriptions for those with visual impairments.
This accessibility test is often skipped entirely by developers as plugins like Lighthouse do not detect screen reader issues and are falsely perceived as difficult to test. There is a bit of a learning curve to get the hang of Screen Readers if you've never used one. Spending an initial 5-10 minutes getting used to the controls is usually all you need to learn the basics.
macOS / iOS comes with a native Screen Reader you can use called VoiceOver. Use the links below to learn more about this tool.
- VoiceOver
- WebAIM - Using VoiceOver Article
- Google Chrome Developers - VoiceOver macOS Tutorial Video
- Google Chrome Developers - VoiceOver iOS Tutorial Video
Windows users can install a free screen reader called NVDA. Use the links below to learn more about this tool.