Your daily frequent11y newsletter, brought to you by @ChrisBAshton:

How to use the accessibility tree for a11y testing

Giovani Camara uses a simile to describe the accessibility tree’s relationship to the DOM as being like a ‘filter’ for your emails: the DOM contains a lot of information, but the accessibility tree shows only the data related to accessibility.

This article is very short – it describes how to access the accessibility tree in Chrome DevTools, which is to right-click, Inspect, click the double arrow in the bottom right panel and select Accessibility.

What’s more interesting is the embedded video (10m) where Giovani demonstrates this visually, and then goes on to show how he uses the accessibility tree as a development aid, by using it to examine the W3 WAI ARIA example implementation of tabs. He explains how to use it to see the computed properties, ARIA attributes and the child/parent relationships of a component.

Prefer longer newsletters? You can subscribe to week11y, fortnight11y or even month11y updates! Every newsletter gets the same content; it is your choice to have short, regular emails or longer, less frequent ones. Curated with ♥ by developer @ChrisBAshton.