What the HECK is an accessibility tree?

What is the DOM?

The DOM, an acronym for Document Object Model, is a standard defined by the W3C. This model serves as the blueprint for accessing documents, updating their content and structure, and manipulating their styles. Essentially, it dictates how a web browser represents a web page.

In the DOM, documents are represented as a hierarchical tree structure. Each object within this tree is nested under another object, with each having a single parent and potentially multiple children. Consequently, if an object is deleted from the DOM, its children are also removed.

Example of a DOM tree, source: GeeksforGeeks

What is an accessibility tree

The accessibility tree, an integral part of the DOM, provides information tailored for assistive technologies like eye-tracking systems, screen readers, and speech input software.

Accesibility tree of miasalazar.com

Assistive technologies rely on accurate accessibility information within this tree. Insufficient or incorrect data can lead to failures in providing the correct context and data to users.

Information contained within the accessibility tree includes:

• Roles: Describing the type of object.
• Names: Providing the element's name.
• States: Indicating states such as checked or unchecked for checkboxes.
• Description: Offering additional information about the element.

For this reason, it's imperative to develop web pages with accessibility in mind, ensuring that assistive technologies can interpret the content correctly.

Tips

• Utilize semantic HTML to provide comprehensive details to assistive technologies.
• Structure headings hierarchically, avoiding their use solely for appearance purposes.
• Exercise caution with CSS, as certain styling properties like display: none can exclude elements from the accessibility tree. You can check how to hide and show elements from assistive technologies on this article.
• Use ARIA (Accessible Rich Internet Applications) attributes judiciously. Prefer native HTML elements where possible and resort to ARIA attributes only when native HTML is insufficient.

How to access the accessibility tree?

Chrome

To check the accessibility tree of a website on Chrome, open Chrome Developer Tools, then click on the “Accessibility” tab under the under "Elements".

Firefox

In Firefox, open the Firefox Developer Tools and Click on the "Accessibility" tab.

Comments

[Manuel Artero Anguita 🟨]

Thanks Mia! Such a good post ! 🔥🔥

aria-label=“interested!”