A tree should expose exactly one focusable item

Rule tree-roving-tabindex · Component patterns (best practice) · impact moderate · Static + live

↩ Back to the rules index · WCAG cross-reference

Why it matters#

The tree pattern uses a roving tabindex: a single treeitem is tabbable and arrow keys move focus and expand/collapse nodes. No focusable item makes the tree unreachable; many focusable items break the expected keyboard model. (Structural check.)

How to fix#

Give one treeitem tabindex="0" and the rest tabindex="-1", moving focus with arrow keys.

Example#

<ul role="tree"><li role="treeitem">A</li><li role="treeitem">B</li></ul>

<ul role="tree"><li role="treeitem" tabindex="0">A</li><li role="treeitem" tabindex="-1">B</li></ul>

WCAG success criteria#

2.1.1 Keyboard — Level A#

All functionality must be operable through a keyboard alone (composite widgets need roving tabindex or aria-activedescendant so every control is reachable and operable).

Understanding 2.1.1

Standards#

This rule contributes to the following standards:

WCAG A EN 301 549 Best practice

References#

• APG — Tree View