DEV Community

Cover image for What the HECK is an accessibility tree?
Mía Salazar
Mía Salazar

Posted on

3

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

Accesibility tree on Chrome

Firefox

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

Accesibility tree on Firefox

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read full post →

Top comments (1)

Collapse
 
manuartero profile image
Manuel Artero Anguita 🟨

Thanks Mia! Such a good post ! 🔥🔥

aria-label=“interested!”
Enter fullscreen mode Exit fullscreen mode

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more