What is the accessibility tree?
Before we can understand this tool, we have to define the “DOM” and the “Accessibility Tree.”
The Dom:
When a person writes code like HTML (hypertext markup language), that code has to be translated by the browser into a webpage. Web developers and general techies commonly refer to this as the “DOM (document object model).”
The Tree:
The same applies to assistive technology such as a screen reader. When a person writes code like HTML (hypertext markup language), that code has to be translated into a format the screen reader will understand. This process/information is commonly referred to by a11y specialist as the “accessibility tree.”
Takeaway: The DOM and the accessibility tree are very similar but differ in output and what the code translation is meant for.
Are the DOM and the accessibility tree the same?
Although the DOM and the accessibility tree use the same data, they’re slightly different. The DOM ( HTML ) provides all the data. Everything is visible to a user, which means there’s lots of data to work with. Whereas the tree only shows accessibility data. The simplest way to describe this is by saying the accessibility tree is basically a filter that only shows us accessibility-related information in the DOM. For example, suppose I was in my email inbox (this would be the DOM), and I wanted to filter emails sent to me by a specific person (this would be the tree). In that case, that’s what the accessibility tree does. I will only see accessibility-related information.
Takeaway: The accessibility tree is a filter of the DOM that only shows accessibility-related info.
How to use the accessibility tree?
It’s straightforward. All you have to do is open the developer tools. There are a variety of shortcuts and ways to open the developer tools, but the easiest is by using the context menu in the chrome browser (right-click menu) and activating the “inspect element” option.
Steps:
- Right-click anywhere on the page and at the bottom of the menu activate “inspect.”
- There will be an elements panel on the right side of the developer tools (near the CSS styles). Activate the right arrow and select the “Accessibility” tab.
- Voila, you have the accessibility tree.
Video tutorial of me using the tool:
Here’s a video of me actually using the accessibility tree. In the video below, I show you how to locate the tree via the context menu and how I would use it.
Why use this tool?
Here are a few benefits:
- You don’t have to activate a screen reader to get name, role, and state information. It will speed up development if you can get this information much quicker. Of course, you should always verify it with actual assistive technology! This is just another tool.
- You’re able to get a breakdown of an element’s attributes in a more digestible layout. It has less clutter than the DOM.
- You can get a hierarchy of relationship information broken down easier. You can see parent/child information and navigate much quicker.
- This tool consistently works. Some tools like ANDI get blocked by some websites for security reasons. The accessibility tree is never blocked since it’s built-in the browser. It’s that trusty sidekick you can always count on.
Conclusion
In the end, this tool is really my source of truth and has become my favorite tool when accessibility testing. It saves me a bunch of time, and I can get the information I need on the fly. My hope is that accessibility specialist start using this tool more often.
As always, thanks for reading. If you have any comments, concerns, or feedback, please reach out to me via LinkedIn.
4 responses to “How to use the accessibility tree for a11y testing”
Hi 👋 Everyone!
I just added a commenting feature. Leave a comment if you’d like.
Thanks,
Gio 🙂
Thanks for this, I haven’t used this tool for testing before!
Glad I could help!
Hi Giovani
very nice and helpful for me. I didn’t know ANDY-Bookmarklet and I’m often abit confused ond Accessibility tree and Shadow-root.
It seems Web-Components are written in shadow-tree’s and the Accessibility tree is able to read it. But somtime it is very confusing why it works on screenreader but on normal using in browsers, not. So maybe you have some more inputs how to use the accessibiliy tree with mixed code of DOM/ and shadow dom with using/manipulating javascript.