What is an accessibility tree and how do I view it?

Question

I've been told to make sure my site has an accessibility tree. What is an accessibility tree? How do I view it?

Answer

An accessibility tree is a part of your website's DOM. All accessible objects are created in the accessibility tree for each DOM element that needs to be exposed to assistive technologies.

To view the accessibility tree:

In Chrome, right-click anywhere on the page and select “Inspect” to open Chrome Developer Tools. Under the “Elements” tab, click the “Accessibility” tab. The first item in the list is the Accessibility Tree.

In Firefox, right-click anywhere on the page and select "Inspect Element" to open Firefox Developer Tools. Click on the "Accessibility" tab. Turn On the accessibility features option. After it loads, the Accessibility Tree will populate.

Free Tools to Continue Learning

Accessible Web Company Logo

Accessible Web RAMP

Monitor your website and manage your progress towards WCAG conformance.

Accessible Web Company Logo

Accessible Web Academy

Career specific courses to help power up your accessibility knowledge.