In HTML, the accessibility tree is a representation of the structure and properties of a webpage that is used by assistive technologies such as screen readers to navigate and interact with the page.
The accessibility tree is built by the browser, and it consists of a set of nodes, each representing an element on the webpage, such as a button, an image, or a heading.
For example, consider the following HTML code:
<div> <h1>Welcome</h1> <p>This is the main content of the page</p> <button>Submit</button> </div>
When this code is rendered by the browser, it will build an accessibility tree that consists of the following nodes:
- A "div" node that represents the parent element
- A "h1" node that represents the heading element and its inner text "Welcome"
- A "p" node that represents the paragraph element and its inner text "This is the main content of the page"
- A "button" node that represents the button element and its inner text "Submit"
Web Accessibility Guidelines
The accessibility tree is built according to the Web Accessibility Guidelines (WCAG) and the Accessible Rich Internet Applications (ARIA) specifications. These guidelines and specifications define how elements on a webpage should be represented in the accessibility tree. For example, if an image does not have an "alt" attribute, the accessibility tree will not include a node for the image, as per the WCAG guideline that requires alternative text for images.
Document Object Model (DOM) tree
The accessibility tree is different from the Document Object Model (DOM) tree, which represents the structure of the webpage as it is rendered by the browser. The DOM tree is primarily used by developers to manipulate the layout and behavior of a webpage, while the accessibility tree is used by assistive technologies to understand the purpose and function of elements on a webpage.
For example, consider the following code:
<button id="submit-button">Submit</button> <label for="submit-button">Click here to submit the form</label>
The DOM tree would contain two nodes, one for the button and one for the label. But the accessibility tree would contain a single node representing the button, and the label text "Click here to submit the form" would be assigned as the button's accessible name through the "for" and "id" attributes.
It is important to note that the accessibility tree is dynamic and it is affected by the changes that are made to the DOM tree. For example, if a new element is added to the DOM tree, the browser will also add a corresponding node to the accessibility tree, and if an element's properties are changed, the corresponding node in the accessibility tree will also be updated.
Conclusion
In conclusion, the accessibility tree is a representation of the structure and properties of a webpage that is used by assistive technologies to understand the purpose and function of elements on the webpage. It is built by the browser, and it is based on the Web Accessibility Guidelines (WCAG) and the Accessible Rich Internet Applications (ARIA) specifications. It is different from the Document Object Model (DOM) tree, which represents the structure of the webpage as it is rendered by the browser. By understanding how the accessibility tree works and how it is built, developers can create more accessible websites and web applications for all users.