Dev Tips

DevTools: Built-in Accessibility Debugging from the Elements Panel

The built-in DevTools Accessibility Pane is now enabled by default, without needing to enable experiments (currently in Canary).

Use the Accessibility Inspector to understand what accessibility related properties your inspected elements contain. For example, you can extract:

Computed Text
Aria labels
Roles
Form criteria

For ARIA property values you may not be familar with, e.g. for those applicable to aria-live or aria-sort, you can rely on the autocomplete functionality within the Accessibility Inspector.

For aria-live, autocomplete suggests:

off
polite
assertive

If you have any troubles viewing this animated gif, check out: umaar.com/dev-tips/163-accessibility-debugging

Sponsor
Project management is better when it's visual: monday.com is the next generation of visual tools, built specifically for developers. See what everyone on your team is working on in a single glance.