Accessibility evaluation tool
A web-based tool combining axe-core, Pa11y and bespoke structural checks into one scored report with heading trees, landmark maps and a focus-order view.
- Context
- Personal
- Year
- 2026
- Stack
Playwrightaxe-corePa11yNodeJavaScript
The problem
Automated accessibility tools each cover a slice of WCAG and present their findings differently. Running three of them and reading three reports is slow, and none of them show the things an auditor actually looks at first: the heading outline, the landmarks and the focus order.
What I built
- One run, one report: axe-core and Pa11y results merged with bespoke checks for page structure, with a score so progress can be tracked between runs.
- Auditor’s view: a heading tree, a landmark grid and a focus-sequence visualiser, so the structural problems are visible without opening dev tools.
- Built on Playwright, so pages are evaluated in a real browser, including after client-side rendering.
What I learned
- Automation finds roughly a third of WCAG failures. The tool is there to make the human part faster, not to replace it.
- The most useful output was not the violation list but the heading and landmark views; they expose problems the rules engines cannot see.