«   Previous tip Next tip   »

Chrome DevTools: Use Accessibility Inspection to better understand how accessible your markup is

20th April 2016
Use Accessibility Inspection to better understand how accessible your markup is

Introduction

Use the Accessibility Inspector to understand what accessibility related properties your inspected elements contain. The Accessibility Inspector refers to a DevTools pane which presents various accessibility properties and ARIA information for elements which you inspect.

What information you can get

For example, you can extract:

How to use this feature

  1. Open the Command Menu (Cmd + Shift + P) and select Show accessibility.
  2. Inspect different elements in the Elements Panel and observe the Accessibility Inspector updates accordingly.

As an experiment, if you're able to, inspect the text you're currently reading and observe Accessibility Tree.

Why use this

For many webpages, accessibility becomes an afterthought. People agree it's important, but it's rarely prioritised. However as web developers, we should strive to create solid experiences for our users, no matter their abilities.

Extra

There's more accessibility features in DevTools:

«   Previous tip Next tip   »

Sign up to receive a developer tip, in the form of a gif, in your inbox each week