Which Chrome DevTools Improve Accessibility?

Which Chrome DevTools Improve Accessibility?

Learn how to leverage Chrome Developer Tools (DevTools) to identify and fix the accessibility bottlenecks of web pages you build. Boost accessibility with Lighthouse audits, the accessibility pane, contrast ratio, and other Chrome DevTools features.

Boost accessibility with Lighthouse audits, the accessibility pane, contrast ratio, and other Chrome DevTools features.

Many designers and developers view accessibility as an afterthought. However, adhering to accessibility best practices leads to a higher customer retention rate and increases generated revenue. Browsers have evolved with more features to support accessibility.

In this article, you’ll learn how to leverage Chrome Developer Tools (DevTools) to identify and fix the accessibility bottlenecks of web pages you build.

This article is for people who are familiar with accessibility best practices. You also need to have a basic understanding of DevTools.

Overview

As a frontend engineer who cares about how software solutions I build improve user experience, I use Chrome DevTools a lot.

Chrome DevTools is a suite of web developer tools built into the Google Chrome browser. It divides into a series of panels which are further organized into panes.

Try navigating a web page with a keyboard or assistive technology. Is the experience smooth? Are the elements standard-compliant? What can you do to improve its current state? With DevTools, you can identify and fix these issues.

To access the DevTools panel, the webpage you want to audit using Google Chrome. Then, use the shortcut Command + Shift + C on a Mac or Control + Shift + C on Windows and Linux to view the DevTools.

We’ll explore the following accessibility-related features in Chrome DevTools:

  • Lighthouse Audits panel
  • Elements Inspector
  • Contrast Ratio
  • Accessibility Pane
  • Emulating Colour Preferences
  • Emulating Vision Deficiencies

Lighthouse Audits panel

The Lighthouse Audits panel powered by aXe is a good tool for auditing accessibility. The audit report is informative. It states what failed, why it failed, and provides links to resources to help you learn more.

To audit a webpage, first open DevTools and click the Lighthouse panel. Uncheck other options, leaving only the accessibility option checked.

Then, select the device you’d like to perform an audit on and click Generate Report.

Auditing accessibility of a web page using Lighthouse Audits Panel.

Click the various sections of the generated report for tips on improving the accessibility score. The details on the passed audits are also very useful.

A Lighthouse audit report.

There is detailed audit documentation for heading order provided as a resource for a failed heading order.

It specifies the importance of the element that failed, how the Lighthouse heading levels audit fails, and how to fix poorly structured headings, among other information.

Elements inspector

The Inspect Element feature in DevTools gives you access to a tooltip with accessibility features at a glance. It shows up whenever you inspect an element on a web page.

Inspecting a button to view the accessibility features at a glance.

It displays the following properties:

  • Contrast Ratio: Measures the difference in brightness between the foreground and background color of the text.
  • Name: The visible text
  • Role: The function of the element (region, heading, button etc.). It displays “generic” for elements like <div> and <span> that have no semantic meaning
  • Keyboard-focusable: Shows if you can focus on an element using your keyboard. A grey color shows that the element is not keyboard-focusable. Green shows that the element is keyboard-accessible

Contrast Ratio

The Contrast Ratio feature measures the difference in brightness between the foreground and background color of the content of web pages. This will help when choosing the color scheme for your web pages during the design phase. Always ask yourself if the color you are about to choose meets the accessibility standard.

A high contrast ratio is the desired value for any content viewed by users. Low vision users or users affected by environmental factors may not be able to see the content on your web page if you don’t maintain a high contrast ratio.

Imagine a user viewing a web page with a low contrast ratio under the effect of sunlight. The user’s experience would be terrible.

WCAG requires “at least 4.5:1” contrast, so you cannot round a contrast ratio up to 4.5:1. For example, #777777 is a commonly-used shade of gray with a 4.48:1 contrast ratio. It does not meet the WCAG contrast threshold.

Contrast and Color Accessibility

The contrast ratio feature in Chrome DevTools.

The Contrast Ratio section of the Color Picker shows 2 checkmarks and the value of 10.39.

You can use the color picker to choose colors that meet the standard. To access this feature, inspect a text using the Element Inspector tool. Then, locate the color property on the styles pane.

Click the elements color preview, which is a small square on the left-hand side of the value. Locate the current contrast ratio section and click on the downward pointing arrow to view more details.

The Contrast Ratio Line in the color picker.

A single checkmark indicates that the element meets the minimum recommendation (AA). Strive to meet the enhanced recommendation (AAA) indicated by two checkmarks.

A line or two appears on the color palette. Clicking on the region a bit higher reduces it to the minimum recommendation. Anything beyond that would not meet the minimum recommendation.

The color picker.

The Contrast Ratio section of the Color Picker shows 1 checkmark and a value of 3.69.

devtools programming web-development developer

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Why Web Development is Important for your Business

With the rapid development in technology, the old ways to do business have changed completely. A lot more advanced and developed ways are ...

Important Reasons to Hire a Professional Web Development Company

    You name the business and I will tell you how web development can help you promote your business. If it is a startup or you seeking some...

Software Developer vs Web Developer | Difference Web Developer & Software Developer

Software Developer vs Web Developer | Difference Web Developer & Software Developer | Software development and web development are normally used interchangeably. Although both include development, a software developer has different responsibilities from that of a web developer.

Hire Dedicated eCommerce Web Developers | Top eCommerce Web Designers

Build your eCommerce project by hiring our expert eCommerce Website developers. Our Dedicated Web Designers develop powerful & robust website in a short span of time.

How long does it take to develop/build an app?

This article covers A-Z about the mobile and web app development process and answers your question on how long does it take to develop/build an app.