August 9, 2018

Doing my first accessibility audit

I mentioned a few weeks back that I've been learning about web accessibility and mixing the things that I learned into my own work process. I've been doing it so much that I think I've gotten to the point where I was more confident in knowing what to look for.

So we recently had what's called a "low-hanging fruit days" at the company where we're able to spend around three days working on easy-to-tackle things that we've sort of put on the backburner to revisit. I was having trouble thinking of things that I could be doing on those days, but fortunately my co-worker Andrey mentioned that he'd like to do an accessibility audit of the DuckDuckGo Privacy Essentials extension. So I volunteered to help him out.

Up until last week I've only had the chance to audit my own code. Auditing an unfamiliar codebase was a bit daunting for me especially since I couldn't find any articles online that talked about browser extension accessibility. All that came up in my search were browser extensions that check accessibility on a web page.

Fortunately all the concepts were the same, and the tools I use worked the same way. VoiceOver worked as expected in the extension, and it was easy to navigate the HTML by simply opening the DevTools.

A search button that doesn't have a label so VoiceOver reads it as 'button'.

A menu button that doesn't have a label so VoiceOver reads it as 'button'.

Now I got to file a ton of accessibility bugs so I'm pretty happy about that. We now have the very first pull request that fixes a bunch of those issues!

A screenshot of GitHub Issues full of items with the 'Accessibility' tag on them