composite-not-in-focus-sequence
Web validation
Composite components, such as grids, tablists, and trees, combine many interactive items into one widget. They use either the roving tabindex pattern or the aria-activedescendant pattern for keyboard navigation.
In both patterns, at least one element of the widget must be reachable with the Tab key. That lets keyboard users enter the component and then move inside it with the arrow keys.
Tab stop targets for composite patterns:
| Pattern | aria-activedescendant target | Roving tabindex target |
|---|---|---|
| grid | role="grid" | role="gridcell", role="columnheader", role="rowheader" |
| listbox | role="listbox" | role="option" |
| menu, menubar | role="menu", role="menubar" | role="menuitem", role="menuitemcheckbox", role="menuitemradio" |
| radiogroup | role="radiogroup" | role="radio" |
| tablist | role="tablist" | role="tab" |
| tree | role="tree" | role="treeitem" |
| treegrid | role="treegrid" | role="gridcell", role="columnheader", role="rowheader" |
Pass Patterns
Component uses aria-activedescendant
The container is in the tab sequence with tabindex="0", and arrow keys move aria-activedescendant.
<div role="grid" tabindex="0" aria-activedescendant="cell-1">
<div role="row">
<div id="cell-1" role="gridcell">A1</div>
<div id="cell-2" role="gridcell">B1</div>
</div>
</div>Component uses roving tabindex
Exactly one item is focusable, and arrow keys move focus by updating tabindex values.
<div role="tablist">
<button role="tab" tabindex="0" aria-selected="true">First tab</button>
<button role="tab" tabindex="-1" aria-selected="false">Second tab</button>
</div>Fail Patterns
No element is focusable
Neither the container nor its items can receive keyboard focus, so the widget is unreachable.
<div role="tree">
<div role="treeitem">Node 1</div>
<div role="treeitem">Node 2</div>
</div>A listbox with no focusable option
The listbox container has no tabindex and no option is focusable, so the keyboard cannot enter it.
<ul role="listbox" aria-label="Fruit">
<li role="option">Apple</li>
<li role="option">Banana</li>
</ul>WCAG techniques
Sufficient techniques
Try It Yourself
Using a keyboard
- Load the page.
- Press Tab until you expect to reach the composite widget, such as a tablist.
- Watch whether focus enters the widget.
Expected results: Focus stops on the widget or its selected item, so arrow keys can navigate inside.
Actual results: Focus skips the widget entirely, so its items cannot be operated.
Inspecting the browser dev-tools
- Inspect the composite container and its items.
- Check the
tabindexvalues and whether the container usesaria-activedescendant. - Confirm that exactly one element is in the tab sequence.
Expected results: The container has tabindex="0" with aria-activedescendant, or one item has tabindex="0" for roving tabindex.
Actual results: Neither the container nor any item is in the tab sequence.
FAQ
How does this issue relate to 2.1.1 Keyboard?
SC 2.1.1 requires all functionality to be operable with a keyboard. If a composite widget has no element in the tab sequence, keyboard users cannot enter or operate it, which fails the criterion.
Why is this issue marked as Critical?
When a composite widget is missing from the tab sequence, keyboard users and many assistive technology users cannot reach or operate it at all. That is a complete loss of functionality that blocks task completion across browsers and devices.
Standards and Regulations
| Standard | Success Criterion | Reference |
|---|---|---|
| WCAG 2.2 | 2.1.1 Keyboard (A) | All functionality of the content is operable through a keyboard interface without requiring specific timings for individual keystrokes, except where the underlying function requires input that depends on the path of the user's movement and not just the endpoints. |
| EN 301 549 | 9.2.1.1 Keyboard | Same as the WCAG text. |
| Section 508 | 1194.21(a) | When software is designed to run on a system that has a keyboard, product functions shall be executable from a keyboard where the function itself or the result of performing a function can be discerned textually. |
| 508 Trusted Tester | 2.1.1-keyboard-access, 4.A | All functionality can be accessed and executed using only the keyboard. |