Chrome Accessibility Tree Viewer is used to check how web page elements are parsed by screen readers, helping to discover problems such as missing tags, wrong roles, etc. 1. After opening DevTools, select the element in the Elements panel and view it in the Accessibility panel under the Computed tab; 2. Click "Show accessibility tree" to view the accessibility structure of the entire page; 3. Elements with only accessibility semantics will appear in the accessibility tree, such as div, input, h1-h6, a, etc. with role or aria-label; 4. Pay attention to whether the role, name, status and attributes are correct when checking, such as ensuring that the button has aria-label to avoid misuse of the role; 5. You can combine Lighthouse for overall accessibility scoring and analysis.

Chrome's Accessibility Tree Viewer is a very practical developer tool that can help you see how elements in web pages are parsed and presented by assistive technologies such as screen readers. It can help you quickly discover accessibility issues, such as missing tags, wrong roles or incomplete attributes.

Open Accessible Tree Viewer

First, you need to open Chrome Developer Tools (DevTools), you can select "Check" anywhere by right-clicking the page, or use the shortcut keys F12 or Ctrl Shift I ( Cmd Option I on Mac).

Next, select a DOM element in the Elements panel, and then find the Computed tab on the right, and you will see a panel called Accessibility at the bottom. After clicking on it, you can see the performance of this element in the barrier-free tree.

If you want to see the accessibility structure of the entire page more clearly, you can click the "Show accessibility tree" button in the Accessibility panel, which will display the accessibility node level of the entire page.

Understand the structure of the accessibility tree

Accessibility trees are similar to DOM trees, but not all DOM nodes appear in the accessibility trees. Only those elements with accessible semantics (such as role, label, state, etc.) will be included.

For example:

• A <div> will not appear in the barrier-free tree by default<li> <code><div> with <code>role="button" or aria-label will be included
• Form controls such as <input> , title <h1></h1> to <h6></h6> , link <a></a> , etc. usually appear in the accessibility tree.

When viewing, you can see the role, name, states, and properties of each node. This information is very important for understanding how users perceive content through screen reading software.

---

FAQs and Inspection Suggestions

Here are some issues you may encounter when using the Accessible Tree Viewer, as well as the corresponding checking methods:

• Elements do not appear in the accessibility tree : it may be the lack of necessary semantic tags or interactive features. Consider adding tabindex , role or aria-label .
• Name (name) is empty : This causes the screen reader to not correctly describe the element's purpose. Make sure to use aria-label , aria-labelledby or text content to provide the name.
• Role is not suitable : for example, role="heading" is used to simulate the title but not set the correct level. Try to use native HTML tags, or make sure the ARIA role is used properly.
• State and attributes are missing : For example, whether the button is disabled, whether the check box is selected, etc., states should be clearly expressed through the ARIA attribute.

For example: If you have an icon button and only use <span class="icon"></span> , it will not appear in the barrier-free tree by default. You need to add properties like role="button" and aria-label="關(guān)閉" to allow the screen reader to recognize its function.

---

Combined with Lighthouse for comprehensive evaluation

In addition to directly viewing the accessibility tree, you can also use the Lighthouse feature in Chrome DevTools to do a comprehensive accessibility score.

After entering DevTools, click the Lighthouse tab and check "Accessibility". After running the test, you will get a detailed report, including suggestions for multiple dimensions such as contrast, keyboard navigation, and ARIA usage.

This approach is more suitable for overall assessment of website accessibility levels, while the Accessibility Tree Viewer is more suitable for troubleshooting specific elements one by one.

---

Basically that's it. Proficiency in using the Accessibility Tree Viewer can help you locate and fix accessibility issues hidden in web pages faster. Although it seems a bit technical, you can get started soon by just looking at common patterns.