What Is the Accessibility Tree?

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).

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.

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!