Subscribe

5 amazing Chrome accessibility tools you didnt know!

✍️

If you're into accessibility these 5 tools from Chrome DevTools should be on your list! See the guide to learn how to use them.

8 Oct, 2020 · 4 min read

I think we are all aware that we, as web developers, are responsible for making the web more accessible. But what does "accessibility" mean in development?

By web accessibility, we mean making a web page designed and coded so people with disabilities can access and use them.

I, for one, never know how to start? I keep hearing people shout, "MAKE YOUR WEBSITE ACCESSIBLE".

Ok, but how? And with which web development tools?

With these 5 Chrome DevTools for accessibility, we will learn how.

Open Chrome DevTools

We are using Chrome dev tools for all the below five items, which can be found using the following shortcuts.

Mac Cmd + Shift + C or Windows: Ctrl + Shift + C.

1. Chrome Accessibility inspector

The first and perhaps most apparent Tool is the accessibility inspector.

This will show us mainly the ARIA properties of certain DOM elements.

We need to open Chrome dev tools and right-click an element to access this menu. It's under the inspect tab but can be hidden under the extra options.

Chrome accessibility inspector

If you want to learn more about creating suitable ARIA labels, look at this article on WAI-ARIA.

2. Vision emulator

Did you know we can emulate vision deficiencies like color blindness?

You want to use this function to ensure that people with vision deficiencies see your web page correctly. It might be that people with visual disabilities can not distinguish between, e.g., button colors on the user interface.

Open up Chrome dev tools. Then we click more tools and choose, Rendering.

Chrome DevTools tools for rendering

Scroll down to the bottom of the Rendering tab and find "Emulate vision deficiencies".

Chrome emulate vision deficiencies

We can filter on the following:

  • Blurred vision (People who can't see sharp)
  • Protanopia (Color-blind, shades of red/greens)
  • Deuteranopia (Color-blind, green blind)
  • Tritanopia (Color-blind, blue, yellow shades)
  • Achromatopsia (Total color blind)

This will look as follows:

Note the image below shows a blurred vision of a website in a web browser!

Chrome blurred vision

3. Lighthouse reports

We have Lighthouse, which nowadays has a full accessibility tab built-in.

Open Chrome dev tools and click on the Lighthouse tab. We can then check the accessibility checkbox.

Lighthouse accessibility

We then get a report like this.

Chrome Lighthouse report

It analyzes the DOM for things such as:

  • ARIA definitions
  • Role attributes
  • Contrast ratios
  • Lang-attribute on HTML
  • Tabindex on forms
  • Alt-elements
  • And many more!

4. Contrast ratio

A big thing when it comes to accessibility is contrast. We also saw this in our vision deficiency item.

Google Chrome has a quick way to show contrast in a specific element.

To open the Contrast ratio, we need to open Chrome DevTools. Then inspect a text element and find a color box. Click the little color box and choose the pointer element.

Chrome contrast ratio

You might think, ok, but what does this mean?

  • The first value is your current contrast ratio
  • The second value is the minimum contrast ratio (AA)
  • The last one is the enhanced contrast ratio (AAA)

You can change the color and see if you can enhance your contrasts.

5. Inspect element tooltip in DevTools

Another great tooltip that combines many of the above is the inspector tooltip in Chrome.

We can use the inspector tooltip by opening DevTools and selecting the pointer icon.

Then we can hover over an HTML element and see with one quick glimpse what the contrast is the role and if it's focusable by the keyboard.

Chrome Inspector tooltip

Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter

Spread the knowledge with fellow developers on Twitter
Tweet this tip
Powered by Webmentions - Learn more

Read next 📖

May the 4th be with you

4 May, 2022 · 2 min read

May the 4th be with you

Which articles are you missing?

20 Apr, 2022 · 2 min read

Which articles are you missing?

Join 1371 devs and subscribe to my newsletter