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