The Accessibility Tree

The way we write HTML is incredibly important because it informs the accessibility tree.

What is the accessibility tree?

The accessibility tree uses accessibility APIs to send assistive technologies the information they need about the elements on the page, allowing the users to easily interact with those elements. The accessibility tree is generated based on the DOM tree and becomes a parallel structure to the DOM tree.

It’s an internal browser structure representing the markup we’ve written. Each element in our HTML becomes an element in the DOM tree, and each element in the DOM tree becomes an object in the accessibility tree.

Objects in the accessibility tree

Each object in the accessibility tree contains information about four or five different properties, depending on the object type: name, description, role, state, and (optionally) interaction options.

Name

The name of an object is created based on the label that’s applied to it. This label is generated in one of two ways, depending on the element. ...