What is the Accessibility Tree?
Simply put, the Accessibility Tree is what all operating systems use to power assistive technology. It is a modified Document Object Model (DOM). A browser takes the DOM and modifies it into a form that is useful to assistive technology.
Think of the Accessibility Tree as a list of images, links and input fields with buttons. The Accessibility Tree "shapes how disabled users understand and interact with your page, and it can mean the difference between access and exclusion." — The Accessibility Tree, Ben Myers
How Does the Accessibility Tree Work?
When a user visits a website, the browser receives the markup as the beginning of an interface. It then takes that markup and turns it into an internal representation known as the Document Object Model Tree or DOM Tree. The DOM Tree contains objects for everything in the markup. Based on the DOM tree, browsers will create the Accessibility Tree, which informs platform-specific Accessibility APIs, which then inform Assistive Technologies. Clearly, client-side code impacts the experience of assistive-technology users.
The Accessibility Tree contains accessibility-related metadata for most HTML elements and can contain information for interactive elements such as links, buttons and form inputs.
You will find four things in an Accessibility Tree:
- Name : A link with the text 'Apply Here' will have 'Apply Here' as its name.
- Description : The description of a table could explain what kind of info that table offers.
- Role : For example, is it a button, a nav bar or a list of items?
- State : Think about checked and unchecked for checkboxes
Courtesy of How accessibility trees inform assistive tech, Hidde de Vries
Why is the Accessibility Tree Important?
As developers and programmers, understanding the Accessibility Tree helps ensure your HTML, CSS and Javascript are informing assistive technology in such a way as to provide your website users with the best possible experience.
How Do I View the Accessibility Tree?
Browser tools to view the accessibility tree:
- Inspector tools found in Edge, Firefox, Safari, and Chrome
- Chrome also has: chrome://accessibility
Viewing operating systems' accessibility API:
- Mac OS: Accessibility Inspector of Xcode
- Windows: Accessibility Insights
