loading...
Cover image for Accessibility (or the lack of) broke my code

Accessibility (or the lack of) broke my code

estevanmaito profile image Estevan Maito ・2 min read

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.

Posted on May 12 by:

estevanmaito profile

Estevan Maito

@estevanmaito

Full stack developer looking for what makes a great design. Follow my journey https://twitter.com/estevanmaito

Discussion

markdown guide
 

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/...

 

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.

 

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

 
 

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