The accessibility tree is the browser's structured view of the interface for assistive technology. It can reveal a missing name, an unexpected role, or a control state that differs from what the screen shows.

Inspect real user controls

  • Select a button, link, field, and expanded or selected control in the accessibility panel.
  • Check that each item has an appropriate role and a concise name that identifies its purpose.
  • Compare exposed checked, expanded, disabled, and selected states with the visible state.

Prefer semantic HTML first

A native button or label usually provides behavior and semantics without extra ARIA. Add ARIA only when the native elements cannot express the pattern, and keep its state synchronized with the interface.

The tree is a useful diagnostic, not a substitute for testing with a keyboard and assistive technology. Confirm the complete task flow, including errors and dynamic updates.