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:

  1. Right-click anywhere on the page and at the bottom of the menu activate “inspect.”
  2. 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.
  3. 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:

  1. 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.
  2. You’re able to get a breakdown of an element’s attributes in a more digestible layout. It has less clutter than the DOM.
  3. You can get a hierarchy of relationship information broken down easier. You can see parent/child information and navigate much quicker.
  4. 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.

Comments (Markdown Supported)

10 responses to “How to use the accessibility tree for a11y testing”

  1. Giovani says:

    Hi 👋 Everyone!

    I just added a commenting feature. Leave a comment if you’d like.

    Thanks,
    Gio 🙂

  2. Kerstin says:

    Thanks for this, I haven’t used this tool for testing before!

  3. nicSR says:

    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.

  4. EdwinBlive says:

    upgrades. Plus, these agencies track adjustment in Google

  5. EdwinBlive says:

    What are the perks of contracting expert website optimization
    organizations? Expert Website seo firms employ crews of mavens devoted on elevating your webpage’s content for searching engines. This encompasses studyingkeyword combinations, optimizing on site areas, and working on off-site
    adjustments. Additionally, these firms keep an eye on alterations in associated with Google
    rules and revise your website’s written content
    when needed. This conserves you effort and your employees from redundant stress.

    https://gotwebsite1.com/tucson-local-seo-company/ – [color=black_url – Affordable SEO for new businesses in Mesa

  6. KarenNit says:

    In the present day uncertain environment, safeguarding your precious items is essential to ensure peace of mind. A primary a highly effective ways to secure your belongings is by putting resources in a top-notch safe. From crucial documents to precious jewelry, a safe provides a protected storage solution for items of great value.

    One of a critical aspect to think about when buying a safe is its level of security. High-security safes are equipped with state-of-the-art locking mechanisms, such as digital fingerprints or electronic keypads, to discourage unauthorized access. Additionally, the design of the safe plays a critical role in its security features. Look for safes made from strong materials like iron or metal, which offer resistance against interference and break-ins.

    Regular maintenance of your safe is also crucial to ensure its continued effectiveness. This includes periodic inspections to check for signs of wear and tear, as well as lubricating the locking mechanism to keep it working smoothly. It’s also important to keep the interior of the safe clean and free from dust and debris, as this can affect its performance over time.

    Furthermore, think about the placement of your safe within your home or business. Select a location that is discreet yet easily accessible for authorized users. Avoid placing the safe in areas prone to water damage or harsh weather conditions, as this can affect its contents.

    In conclusion, owning a safe is not just about having a secure place to store your valuables; it’s about taking proactive steps to protect what matters most to you. By committing in a premium safe and properly maintaining it, you can ensure the safety and security of your belongings for years to come.

    https://mercurylock.com/services

  7. HelenWhivy says:

    Organizing an open-air wedding in Pheonix and concerned about the unpredictable weather? Don’t let Mother Nature rain on your parade – literally! At Rentals Phoenix], we offer stunning wedding tent rentals that will ensure your special day goes off without an hitch.

    Our wedding tent rentals are crafted to supply both attractiveness and functionality. Say “I do” under tha elegant canopy of one of our tents, surrounded by your loved ones and tha breathtaking scenery of Pheonix. With an variety of sizes and styles to select from, you can customize your tent to perfectly fit your wedding vision.

    But our wedding rentals don’t stop at tents. From tables and chairs to linens and decor, we provide everything you need to make the wedding of your dreams. Our team will work with you every stage of the way to ensure that your wedding day is everything you’ve ever imagined – and more.

    Plus, with our affordable rental options, you can have the wedding of your dreams without breaking the bank. So why wait? Contact Rentals Phoenix] now to find out more about our wedding tent rentals and start planning the outdoor wedding you’ve always dreamed of! event rentals phoenix

  8. Homepage says:

    … [Trackback]

    […] Informations on that Topic: giovanicamara.com/blog/how-to-use-the-accessibility-tree-for-a11y-testing/ […]

Leave a Reply

Your email address will not be published. Required fields are marked *

About this post:

Picture of Giovani Camara
Giovani Camara

Search for a post

Blog Categories