What Is the Accessibility Tree?

AccessibilityPosted on

The accessibility tree is the part of the DOM (Document Object Model). For every DOM element, there is also an accessible object in the accessibility tree.

The information in the accessibility tree is useful for screen-readers and other assistive technologies. Of course, it has great value for developers too.

Although it is based on the DOM, it a simplified and clarified version of it. We can find here every element of our page with related accessibility information.

How to Read the Accessibility Tree?

To gather accessibility information from an element, we have to inspect it in our browser. In this article, we will use Chrome, but it is a similar experience almost everywhere.

First, select an element and inspect it. After this, you need to navigate to the “Accessibility” panel next to the Styles. Here you see the “Accessibility Tree” and other useful information like the “ARIA Attributes” and the “Computed Properties”.

Accessibility Tree

The first accordion item is the tree here; you can see where the actual element occurs and its ancestors. You can also see the type of elements and its name (if have one).

Showing Chrome developer tools's accessibility panel.

ARIA Attributes

If the element has an ARIA attribute here, we can find that too. As you have noticed, there is a lot of handy information here if you want to review any site.

Showing Chrome developer tools's accessibility panel.

Computed Properties

At this panel, you can find any related property. Note that these can differ by elements. Not every element has meaning, and not each has the same properties. For example a <span> element not interesting for accessibility and an <input> is.

In the previous picture, we can see how many properties have a <textarea> element that is important for accessibility.

Another interesting part is the Name property. We can give value to it in many ways. It is a long list and gives us the question: does the order matter? Does a top record – like the aria-label – will override our generic HTML <label> element. The answer is yes!

Showing Chrome developer tools's accessibility panel.

In Chrome we can also see the full accessibility tree under the chrome://accessibility/ URL. Navigate down to the “Pages” section and click on the “Show accessibility tree” button.

Need a web developer? Maybe we can help, get in touch!

Similar Posts

More content in Accessibility category