Accessibility tree

What is the Accessibility Tree?

The Accessibility Tree is a parallel representation of the web page's structure and content, designed to provide accessibility information for assistive technologies. It contains information about the semantic meaning and relationships between elements on the page.

Accessing the Accessibility Tree

Sitefig provides direct access to the accessibility tree from the page report. To access the JSON representation, click the button "Acessibility tree"

To access the Accessibility Tree in Google Chrome DevTools, follow these steps:

1. Open Google Chrome:

   Launch Google Chrome on your computer.

2. Navigate to the Web Page:

   Go to the web page you want to inspect for accessibility.

3. Open DevTools:

   There are several ways to open DevTools:

   • Press Ctrl + Shift + I (or Cmd + Option + I on macOS).
   • Right-click on the web page and select "Inspect" from the context menu.
   • Go to the Chrome menu (the three vertical dots in the top-right corner), select "More Tools," and then "Developer Tools."

4. Access the Accessibility Panel:

   • In DevTools, locate the tabs at the top of the panel.
   • Click on the "Elements" tab (it might be the default tab).
   • Next to the "Elements" tab, you'll find a ">>" icon; click it to reveal a dropdown menu.
   • From the dropdown menu, select the "Accessibility" tab.

Understanding Accessibility Features

The Accessibility Tree reveals essential accessibility features for each element on the page:

1. Roles: Elements have roles that define their purpose or function, such as "button," "link," or "heading." These roles help assistive technologies interpret and interact with the content correctly.
2. Names: Elements may have accessible names, which are text labels that convey their purpose to assistive technology users. The name often comes from visible text but can be programmatically defined.
3. States and Properties: Elements can have states (e.g., "pressed" for a button) and properties (e.g., "aria-hidden" set to "true" for hidden elements) that provide additional information about their behavior and state.
4. Hierarchy and Relationships: The Accessibility Tree shows how elements are nested and their relationships. This hierarchy is crucial for understanding the document structure and content flow.

Detecting Accessibility Problems

Using the Accessibility Tree, you can identify a wide range of accessibility problems:

1. Missing or Incorrect Roles: Elements with inappropriate roles can lead to confusion for assistive technology users. Ensure that elements have the correct roles to convey their purpose.
2. Missing or Inadequate Names: Elements must have descriptive, meaningful names. Check that buttons, links, and other interactive elements have appropriate labels.
3. Missing or Incomplete States and Properties: Ensure that elements with dynamic behavior (e.g., modals, accordions) have the appropriate states and properties to indicate their status.
4. Contrast Issues: While the Accessibility Tree doesn't directly detect color contrast issues, it can help you identify elements and text that need closer examination for contrast problems.
5. Keyboard Navigation: You can use the Accessibility Tree to verify the order in which elements receive keyboard focus. Ensure a logical and intuitive navigation sequence.
6. Semantic HTML: Detect the use of non-semantic elements (e.g., <div> for buttons) and replace them with semantically correct elements to improve accessibility.
7. Aria-labelledby and Aria-describedby: Check that elements using ARIA (Accessible Rich Internet Applications) attributes like aria-labelledby and aria-describedby reference valid IDs and provide meaningful descriptions.
8. Interactive Elements: Ensure that interactive elements (e.g., forms, buttons) have accessible names and roles for screen reader users.