AOM and accessibility tree

Learn how elements affect the accessibility tree.

What is the accessibility tree?

For every page, the browser builds an accessibility tree alongside the DOM. This tree is what screen readers consume; it holds each element's name, role and state.

Unlike built-in tags, custom elements have no implicit role. So <action-button> isn't a button to the browser; its role, name and state must be set explicitly, or it appears incomplete in the accessibility tree.

Explicit role and AOM

For a custom element, set an explicit role like role="button" or role="checkbox". Give it a name with aria-label and focus with tabindex="0". The element then works for both screen readers and keyboard.

AOM (Accessibility Object Model) is a newer proposal to assign these from JS: element.role = "button". Today the most robust path is the role attribute in HTML; AOM is a promising layer for the future.

Exercise Write an accessible action-button

Write an <action-button> custom element. Its opening tag should carry:

role="button"
aria-label="Add to cart" (non-empty)
tabindex="0"

Inside the tag, the text 'Add to cart' and the </action-button> closing tag.

Show example solution

<action-button role="button" aria-label="Add to cart" tabindex="0">
  Add to cart
</action-button>

Test yourself

Which attribute removes an element from the accessibility tree?
```
<div ??="true">Visual only</div>
```
- aria-disabled
- aria-hidden
- aria-expanded
- aria-live
Show answer

aria-hidden — Correct. aria-hidden='true' removes the element from the accessibility tree.

Complete the role attribute value

<action-button role="____" aria-label="Add to cart" tabindex="0">Add to cart</action-button>

Show answer

<action-button role="button" aria-label="Add to cart" tabindex="0">Add to cart</action-button>

Match each accessibility attribute to its meaning

role

Element type
aria-label

Accessible name
tabindex

Keyboard focus
aria-hidden

Hide from tree

Next lesson: Summary - Component library skeleton

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies