We know that developers play a critical role in how the internet is shaped today - from content to functionality to accessibility. But how mindful are we being of accessibility standards when it comes to our passion projects? I hope that the same due diligence regarding accessibility standards is taken regardless of the project - but I fear this may not be the case.
I wrote an earlier post about HTML and its affects on a screen reader and then I got thinking more about accessibility standards. It is easy to remember to use the strong/em tags and to include alt tags for images - but for more complex HTML elements do we know how we are affecting a screen reader? What if you want to have an unordered list without bullet points - is that screen reader friendly? I suppose you could do some research each time you question an HTML choice, but luckily I’ve found a helpful Chrome extension to do this work for us.
Continuum Explorer Community extension is free and easy to add to your Chrome browser. I’ve been using this extension to proof my passion projects before deploying to Heroku/Netlify. The tool scans webpages for accessibility concerns and also gives tips on how to resolve any issues. I’ve found it extremely helpful and enlightening as I jump into my career as a developer. You never know when you might accidentally mis-type something which could prohibit a screen reader from doing its job. Think of this extension as another set of eyes to review your work to ensure that all users can interpret and interact with your page.
To use, simply click on the extension icon in your browser, the application will scan your current webpage for any concerns regarding accessibility. Below, see first and example of a page without concerns, followed by a page that needs a lot of help!
You can see that this extension does a great job of listing the error, severity, and even gives you a clear path to identify the offender in your code. If you’re unsure of how to resolve the issue you can click on the link next to “Best Practice” to be lead to the page below:
This page is a great tool to learn more about the accessibility standards and to see several examples of how to write screen reader friendly pages. This is one of my favorite parts of the extension - instead of only telling you how to fix the problem, a resource is provided where I can dig deeper and learn more.
I hope that you’ll take the time to explore this Chrome extension. I’ve found it extremely helpful when proofing my work. As developers, it is imperative that we are constantly mindful on the impact we have on accessibility. The Internet is a place for community, discovering, commerce, learning, and so much more. Everyone should be able to interact with the Internet the same - with or without a screen reader.
Top comments (6)
Doesn't Chrome do this natively through Lighthouse audits?
Hi Henry! I'm not very familiar with the Lighthouse audits, but I'll play around with it. It is great that there are multiple tools to check accessibility!
It's in Chrome's dev tools.
They actually check all kinds of stuff. Looks like 46 different checks for accessibility, alone.
Check out sharetab extension. Very handy tool to share current tab link with team mates.
Great article, I'm totally going to check this out. I usually just go with eslint-jsx-a11y with my linting, and then run a Lighthouse audit after it's together 😎👍
Thanks for sharing additional tools Charlie - I'll have to check those out! Color contrast is so important and often overlooked - thanks for shedding light on that topic as well.