See the accessibility tree 관련

Google Chrome > Article(s)

---

Article(s)

Firefox > Article(s)

---

Article(s)

---

See the accessibility tree | Devtools Tips

---

See the accessibility tree

The accessibility tree is a representation of the structure of a web page that is used by assistive technologies such as screen readers. It is similar to the DOM tree, but it only includes the elements that are relevant for accessibility. For example, it includes text nodes, links, images, or form controls, but not generic elements such as <div> or <span>.

It's best to actually use a screen reader, or another assistive technology, to experience how your webpage is perceived by users with disabilities. But, it can sometimes be useful to see the accessibility tree in DevTools to understand how a page is structured.

---

Firefox

Firefox has a dedicated Accessibility tool. To open it:

1. Press F12 to open DevTools.
2. In the main toolbar, click the [Accessibility] tab.
3. Expand the [document] node that's displayed in the tool to reveal the accessibility tree.

Supported features include:

• Hovering over nodes in the tree highlights the corresponding DOM elements in the page.
• Selecting nodes reveals their accessibility properties in the sidebar.
• Accessibility issues are displayed next to the corresponding nodes in the tree.
• Checking for more issues, tabbing order, or simulating color vision deficiencies from the toolbar.

The Accessibility tool in Firefox, showing the accessibility tree

Chrome / Edge / Chrome-based Browers

Chrome and Edge have an option to display the accessibility tree in the [Elements] tool, instead of the DOM tree. To enable it:

1. Press F12 to open DevTools.
2. Go to the [Settings] panel by pressing F1.
3. In the sidebar, click [Experiments].
4. Find the [Enable full accessibility tree view in the Elements panel] checkbox and select it.
5. Restart DevTools.

To see the accessibility tree in the [Elements] tool:

1. Open the [Elements] tool.
2. Click [Switch to Accessibility Tree View] in the top-right corner of the DOM tree.

Supported features include:

• Hovering over nodes in the tree highlights the corresponding DOM elements in the page.
• Selecting nodes reveals the matching CSS styles in the Styles pane and lets you update them.

The Elements tool in Edge, showing the accessibility tree where the DOM tree normally is

See also

• Simulate color vision deficiencies
• Visualize the tabbing order on the page
• Drag and drop nodes in the DOM tree

Inspect the user-agent DOM

---

Devtools Tips > Inspect the user-agent DOM

---

이찬희 (MarkiiimarK)

Never Stop Learning.