DEV Community

Molly Nemerever
Molly Nemerever

Posted on

The Chrome Extension All Devs Need

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!

site without accessibility concerns
error free message

site with several accessibility concerns
error detail of several errors to be fixed

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:

Info page regarding accessibility
useful info page to learn more about errors

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.

Discussion (7)

Collapse
forsh3y profile image
Charlie

There's a WebAIM official one called Wave! It's also available on Firefox, so that's what I use. Axe by Deque even features a mobile app for testing! An extension to check contrast (I use Kontrast) and one to adjust for color blindness is also important. Lighthouse Audits are also really useful, but as I'm sure you already know, there's a good amount of accessibility audit tests that need to be done manually. Thanks for the write up on Continuum!

Collapse
mollynem profile image
Molly Nemerever Author

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.

Collapse
quinncuatro profile image
Henry Quinn

Doesn't Chrome do this natively through Lighthouse audits?

Collapse
mollynem profile image
Molly Nemerever Author

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!

Collapse
quinncuatro profile image
Henry Quinn

It's in Chrome's dev tools.

They actually check all kinds of stuff. Looks like 46 different checks for accessibility, alone.

Collapse
tswapy profile image
Swapnil Naik

Check out sharetab extension. Very handy tool to share current tab link with team mates.

Collapse
petecapecod profile image
Peter Cruckshank

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 😎👍