Visit the accessebility tool. Or the source code.

Why

First of all, big thanks go to the team of axe-core and Google Lighthouse, since this page is built on their open-sourced code. The motivation was to make the web more accessible and to make it as easy as possible for website owners, developers, and users who want to share issues with website owners to check for over 50 accessibility issues totally for free. There are better and more complicated tools, but you need to install stuff, and you are not able to share your results as easily as here.

“For many people, technology makes things easier. For people with disabilities, technology makes things possible. Accessibility means developing content to be as accessible as possible, no matter an individual’s physical and cognitive abilities and how they access the web.”

How

The code can be found on the GitHub page, but to make it short, it uses Google Lighthouse, whose accessibility section is heavily based on axe-core, and translates the JSON report to the visual interface. Currently, this website even depends on the free Lighthouse API (huge thanks to Google). But if they turn it off, I can run the open-source code on my server myself. (Please don’t turn it off.)

Limitation

Well, this thing should only be the start; automatic accessibility testing still has limitations. With browser plugins like “Accessibility Insights for Web,” you can do a better job with some human involvement.

What does allyviz mean?

Accessibility (often abbreviated to A11y — as in, “a”, then 11 characters, and then “y”) in web development means enabling as many people as possible to use websites, even when those people’s abilities are limited in some way. I thought “ally” sounds a bit cooler than a11y, and well, “viz” stands for visualization.