Keyboard
Scrollable areas must be keyboard-reachable
- Rule:
scrollable-region-focusable - Severity: Serious
- WCAG level A
Why it matters
A pane with its own scrollbar and no focusable content inside cannot be scrolled by keyboard at all. The content below the fold of that pane is simply unreachable.
How to fix it
- Add tabindex="0" to the scrollable container so it can take focus.
- Give it a role and a name (role="region" with aria-label) so its purpose is announced.
- Make sure the focus outline is visible on the container itself.
In markup
<div class="log" style="overflow-y: auto; max-height: 12rem">...</div><div class="log" style="overflow-y: auto; max-height: 12rem"
tabindex="0" role="region" aria-label="Event log">...</div>The requirement behind it
This rule is one way of failing the following WCAG 2.2 success criteria. The W3C, which writes the standard, explains each of them:
- 2.1.1 Keyboard (opens in new tab) — WCAG level A
- 2.1.3 Keyboard (No Exception) (opens in new tab) — WCAG level AAA
Further reading
Deque University on scrollable-region-focusable (opens in new tab)
Deque maintains axe-core, the open-source engine our scanner runs. Their page documents the rule as the engine implements it.
Automated checks find failures a browser can prove. They cannot judge whether a caption is accurate, whether an alt text is useful, or whether a page can be operated end to end with a keyboard — those need a person.