Accessibility (or the lack of) broke my code

A year ago, I came across this image on Twitter. It was a demo developers at Facebook were designing to solve accessibility issues, and was expected to later be open sourced.

This feature never saw the open source days, but later that week in May/19, I created a similar project just to prove the concept (repo) and created a demo for it.

As you can see, the library works by drawing clickable, colored rectangles over violations. It works!

So today (yes, 1 year later), I've decided to make it a Chrome extension, so everybody could use it to analyze their pages, and it was at this moment that I knew my extension couldn't handle the current web accessibility state.

StackOverflow

Dev.to

Medium

I didn't expect this level of violations, so the extension is completely useless, because it starts drawing from the root and goes down the DOM tree. As almost every website above had problems starting at html or body, you can't even click on the other errors. And where you can, it's almost certain that a parent element already has some problem too.

The solution, you may think, is to just reverse the order violations are drawn, or place icons instead of drawing a giant box, but the point here is that this extension should've not be catching so many errors. I can fix my code, but it won't fix yours!

A bonus, the Web Accessibility Initiative page:

How could we avoid this (the state of a11y currently)? Do you think adopting something during the development workflow would work?

If you're interested in testing the extension, it's here.