Yesterday, I shared how to test a whole website for accessibility issues with Pa11y and how to output the results as HTML. I also shared the link on Twitter, as I usually do, and Darek Kay chimed in, mentioning an alternative tool he created: Evaluatory.
Just like Pa11y, Evaluatory scans a website for accessibility and markup issues. Under the hood, it uses Deque Systems’ axe-core to test for accessibility issues and html-validate to validate your markup. It then outputs the results into a folder as HTML as well. Compared to the Pa11y check, Evaluatory comes with a few nice improvements. It checks for issues at multiple breakpoints at the same time, it can emulate dark mode, disable JavaScript (yes, Heydon!), and also run tests for all URLs referenced in a sitemap. And, it even takes screenshots for different breakpoints of each page it tests.
You can install it globally via npm, for example:
npm install -g evaluatory
And then run a test against a sitemap:
evaluatory --sitemap https://www.porsche.com/germany/Sitemap.smap
And this is how the HTML looks like after the tests are finished – in my case, in dark mode:
The Porsche website is not the one I am currently auditing, I was just curious how the results would look like… 😉
I really like the way Evaluatory presents the results! You get a link to the web page that was tested for quick access and can also open a detailed summary for each page. Here, the test results are sorted by category (base, axe-core, html-validate, and screenshots). A link to the respective rule that was violated is provided for more information and you also get syntax-highlighted code snippets which makes it easy to find the lines in your code that are affected. Overall, Evaluatory looks like a great addition – or even an alternative – to scanning your sites with Pa11y. Nice work, Darek! 👏
~
