The Chrome Extension All Devs Need
Tags: a11y, beginners, productivity
Published: 2019-07-22 14:52:51

---
title: The Chrome Extension All Devs Need
published: true
description: check accessibility of your webpages
tags: #accessibility #beginners #productivity
---

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](https://dev.to/mollynem/5-ways-your-html-code-affects-a-screen-reader-2cn1) 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](https://chrome.google.com/webstore/detail/continuum-explorer-commun/bafnegdlhjhdcmakjaankoogodomfbde?hl=en-US) 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](https://thepracticaldev.s3.amazonaws.com/i/ilu0gky995uw5faleg3t.png)<figcaption> error free message</figcaption>

![site with several accessibility concerns](https://thepracticaldev.s3.amazonaws.com/i/3kkgtp94ikvg1g9b6tk8.png)<figcaption> error detail of several errors to be fixed</figcaption>


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](https://thepracticaldev.s3.amazonaws.com/i/fizk9aajz56bdeu01vs8.png)<figcaption> useful info page to learn more about errors</figcaption>


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.