DEV Community

Cover image for Accessibility (or the lack of) broke my code
Estevan Maito
Estevan Maito

Posted on

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.

Detail screenshot of

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.

Stack Overflow


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.

Discussion (5)

rurickdev profile image
Rurick Maqueo Poisot • Edited

i think this is amazing and definitely the web (if not all the software) should have mandatory accessibility

Edit: also i want to know if you knew this other extension

estevanmaito profile image
Estevan Maito Author

Didn't know this extension. That's exactly what I thought for solving the overlapping boxes problem: icons.
There is also the axe-core extension (which powers my extension), but it only works in DevTools. I'm looking for a more impactful report.

javaarchive profile image

Nice! Did you use the extension on the extension itself to check for violations?

estevanmaito profile image
Estevan Maito Author

You got me. I didn't!

ben profile image
Ben Halpern

Thanks a lot for this! We have a lot of work to do on this front and this could really help