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.

https://twitter.com/brian_lovin/status/1124787522909949952

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 https://estevanmaito.github.io/billie/

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
Stack Overflow

Dev.to
Dev.to

Medium
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:

W3C

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.

Latest comments (5)

Collapse
 
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 chrome.google.com/webstore/detail/...

Collapse
 
estevanmaito profile image
Estevan Maito

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.

Collapse
 
javaarchive profile image
Raymond

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

Collapse
 
estevanmaito profile image
Estevan Maito

You got me. I didn't!

Collapse
 
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