I needed a tool which could quickly and automatically tell me when my website, balkanheritage.info violates web accessibility standards. I chose pa11y, which is a command-line accessibility testing tool that runs automated checks against a URL using the well-known tool axe-core.
But one problem surfaced rather quickly, which was that pa11y wasn’t actually using WCAG 2.2 rules in its scans. This is because pa11y isn’t updated too often which means that even the latest version scans with an accessibility ruleset for WCAG 2.1 when it should include the newer rules from WCAG 2.2.
There’s a pull request in Github which would fix it by just adding the proper tag, wcag22aa, but has not been merged yet. I could have forked it and fixed it myself. But then I thought why not remove a layer of risk and just replace pa11y-ci with a direct axe-core + Puppeteer scanner that enforces WCAG 2.2 AA itself?
So I did that and my custom scanner wrapper script immediately earned its keep by surfacing two real bugs, both now fixed:
- the nested
<footer>HTML tag in the<balkans-footer>web component which caused a duplicatecontentinfoARIA landmark, and - the skip link being outside of a proper
region.
A contentinfo landmark is the ARIA role the browser implicitly assigns to <footer>; when a custom element like <balkans-footer> renders a <footer> inside its shadow DOM while also being placed inside the page’s own <footer>, then we get two nested contentinfo landmarks, which is invalid: per ARIA, contentinfo must appear at most once per page and only at the top level.
The skip link was placed directly on <body>, before <header>, so it sat outside every landmark. Axe’s region rule flags any page content not contained within a landmark region. Most skip-link examples you find online show it as the very first child of <body> without explaining that this merely puts it in a landmark-free zone, which is not good (Why? I must try out a screenreader myself and find out what’s it like in this case).
Now, the website seems to conform to WCAG 2.2AA; how nice is that.
Mashq and Machine 
Leave a comment