Accessibility
Tools
- W3C Markup Validation Service
- WAVE Web Accessibility Evaluation Tool
- axe - Web Accessibility Testing Chrome extension
- GreenIT-Analysis - Web Accessibility Testing (Chrome extension)
- Accessibility Insights (Chrome extension)
- Color Contrast Accessibility Validator
- NoCoffee vision simulator (Firefox)
- axe Accessibility Linter | Deque
- Assistant RGAA | Chrome | French
- Assistant RGAA | Firefox | French
- Siteimprove | Dutch | Requires email | Stores user data
- Tenon.io | Limited free service | Stores user data
- Accessibility Checker (multiple pages) | EXPERTE.com
- Lighthouse
- AccessLint | GitHub App
- Accessibility for Teams | US Govt.
- Accessibility | React
- Reach UI | React-based design
Colour contrast
Not everyone has perfect eyesight, especially in poor light. Poor contrast can be tested, together with other accessibility issues, using the web accessibility evaluation tool, WAVE, or by inspecting an element using browser tools.
A summary of WAVE's of the WCAG (Web Content Accessibility Guidelines):
- WCAG Level AAA
- A contrast ratio of at least 7:1 for normal text and 4.5:1 for large text.
- WCAG 2.0 level AA
- A contrast ratio of at least 4.5:1 for normal text and 3:1 for large text.
- WCAG 2.1
- A contrast ratio of at least 3:1 for graphics and user interface components.
Practice
I use Deque's axe linter to catch mistakes as I make them. It is available as a VS Code extension and checks React (or Preact), Vue, HTML, and Markdown files. Support for more frameworks is being considered.
Lighthouse can be run in a number of environments. The accessibility score is unaffected by other activity so it is not necessary to run it in incognito mode.
If you want to check accessibility across your site, I recommend EXPERTE.com's accessibility checker. It is based on Lighthouse but will crawl up to a maximum of 500 pages. It is ideal for a small site, such as this one, made up of HTML pages created by a static site generator (Next.js).