TIL Accessibility in Devtools

POSTED ON: Aug 07, 2022

Having done accessibility testing using a bunch of very expensive external tools, it's kind of a pain. The average devteam doesn't have access to these tools. Heck, my current team doesn't have access to these tools! So finding this sweet devtools testing solution is amazing!

You can enable the Accessibility Devtool (currently in experiments mode) to do screenreader testing.

It's a toggle. It doesn't remove the DOM inspector. You can just switch between DOM and accessibility tree this way with one click. Good for debugging how accessible your page is.

via grumd on reddit

Reference: Enable "Full Accessibility Tree View" right now in dev tools

Related TILs

Tagged: accessibility

TIL aria-expanded for showing when things are hidden/shown

The aria-expanded attribute is set on an element to indicate if a control is expanded or collapsed, and whether or not its child elements are displayed or hidden.

Oct 31, 2022

TIL ARIA role presentation

Think of this as a reset. You use role=presentation to remove semantic meaning from an element.

Sep 30, 2022

TIL reduce-motion-blur

Dizziness and vertigo are symptoms of a vestibular balance disorder. If the user has set up a user preference that they prefer motion-based animation be disabled/reduced, we can tap into that. As web developers, we can also support them.

Sep 29, 2022