Scrollable regions must be operable using a keyboard alone. If content scrolls vertically or horizontally, keyboard users must be able to place focus inside that region so they can scroll and access all of its contents.
In most browsers, keyboard scrolling works only when focus is inside the scrollable container or on a focusable element within it. If no element inside the region can receive focus, keyboard users may be unable to scroll the content, even though it may be fully visible and usable with a mouse.
This rule ensures that scrollable content does not become a hidden accessibility barrier for users who rely on keyboard navigation. WCAG does not define a dedicated “scrollable region” success criterion. Failures occur when scrolling requires pointer input, violating keyboard operability requirements.
WCAG Success Criteria Affected
Scrollable regions that cannot receive keyboard focus commonly result in failures of:
- SC 2.1.1 Keyboard (Level A)
Users cannot access or operate content using a keyboard alone. - SC 2.4.3 Focus Order (Level A)
Focus order skips scrollable content entirely.
Screen readers may still allow virtual cursor scrolling, but WCAG requires that keyboard-only users without assistive technology can reach and scroll the content.
Why This Matters
Keyboard users rely on focus to interact with content. When a scrollable region cannot receive focus:
- The region may not scroll using arrow keys, Page Up/Down, or other keyboard controls
- Content beyond the visible area becomes unreachable
- Users may know content exists, but cannot reach it
This affects users who:
- Navigate using only a keyboard
- Use screen readers with keyboard interaction
- Depend on predictable focus movement to explore content
If focus cannot enter a scrollable area, its hidden content may be inaccessible.
How to Fix the Problem
The key to making a scrollable region keyboard accessible is ensuring that either the region itself or an appropriate element inside it can receive keyboard focus when scrolling is required to access content.
Correct Markup Solutions
Technique 1: Make the scrollable region itself focusable
<div id="pass1" style="height: 200px; overflow-y: auto" tabindex="0">
<div style="height: 2000px">
<p>Content</p>
</div>
</div>This allows focus to move directly to the scrollable container, enabling keyboard scrolling.
Technique 2: Provide a focusable static element inside the region
<div id="pass2" style="height: 20px; overflow: auto;">
<input type="text" tabindex="-1" />
<select tabindex="-1"></select>
<textarea tabindex="-1"></textarea>
<p style="height: 200px;" tabindex="0"></p>
</div>This enables keyboard scrolling by placing focus on a non-interactive element.
Important caveat:
This technique introduces a non-semantic focus stop. Screen reader users may encounter a focusable element with no clear role or purpose. Use this approach only when no meaningful interactive element is appropriate.
Prefer native focusable elements where possible, and use tabindex only when necessary.
Conditional Solution
<div id="conditional1" style="overflow-y: scroll; height: 5px;">
<input type="text" />
</div>This may appear to work, but it can fail when browsers intercept keyboard events (for example, autocomplete behaviour).
Relying on focusable form controls alone is fragile and inconsistent.
Best practice:
Make the scrollable region itself focusable when scrolling is required to reach content.
Incorrect Markup
The following examples fail because no focusable element exists within the scrollable region.
<div id="fail1" style="height: 5px; overflow: auto;">
<input type="text" tabindex="-1" />
</div>
<div id="fail2" style="height: 5px; overflow: auto;">
<input type="text" tabindex="-1" />
<select tabindex="-1"></select>
<textarea tabindex="-1"></textarea>
</div>All potential focus targets have been removed from the tab order, preventing keyboard users from accessing the scrollable content.
Rule Description
Elements that contain scrollable content must be accessible by keyboard.
Users must be able to move focus into the scrollable region and access all of its content without relying on pointer interaction.
The Algorithm
- Identify elements with scrollable content
- Check whether the scrollable region or an appropriate child element can receive keyboard focus
- Confirm that focus allows users to scroll the region using the keyboard
- If focus cannot enter the scrollable area, the rule fails
Wrapping Up
Scrollable content must not depend on pointer interaction alone. If users can see content but cannot reach it using a keyboard, the interface fails basic operability requirements. Making scrollable regions focusable, when scrolling is required to access content, prevents entire sections from becoming inaccessible.
If focus cannot enter a scrollable region, its content may as well not exist.
