Scrollable regions must be keyboard-accessible

Rule scrollable-region-focusable · Deeper checks · impact serious · Live only (static → incomplete)

↩ Back to the rules index · WCAG cross-reference

Why it matters#

An element whose content actually overflows a scrollable container (overflow:auto/scroll) must be reachable by keyboard so users can scroll it. A container with no keyboard-focusable descendant, no tabindex, and no native focusability of its own is invisible to Tab navigation. Containers whose content fits (defensive overflow CSS) and natively-focusable fields (<textarea> gets overflow:auto from the browser stylesheet) are exempt.

How to fix#

Add tabindex="0" and a descriptive role/aria-label to the scrollable container, or ensure it contains at least one naturally focusable element.

Example#

<div style="overflow:auto;height:200px">Long content without any focusable elements</div>

<div tabindex="0" role="region" aria-label="Changelog" style="overflow:auto;height:200px">Long content</div>

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

References#

• WCAG — Keyboard