Ensure that scrollable region has keyboard access
Compliance Data & Impact
Disabilities Affected
- Blind
- Deafblind
- Mobility
Requirement(s)
Not specified, or not applicable
WCAG Success Criteria
2.4.7 Focus Visible
Section 508 Guidelines
Not specified, or not applicable
Rule Description
Elements that have scrollable content should be accessible by keyboard
Why it Matters
Checks scrollable content for focusable elements enabling keyboard navigation. Keyboard navigation should not fail when focus moves to an element within a scrollable region.
How to Fix the Problem
Correct markup solutions
The key to getting a scrollable region to be accessible with the keyboard is to ensure that a keyboard-only user can focus the scrollable region itself or a static text item within the scrollable region. The first example below shows the first technique and the second one shows the second technique.
<div id="pass1" style="height: 200px; overflow-y: auto" tabindex="0">
<div style="height: 2000px">
<p>Content</p>
</div>
</div>
<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>
Conditional solution
The following examples could fail if the browser intercepts the keyboard events for autocomplete. It is better to always put a tabindex of 0 on the scrollable region or a static element within the region.
<div id="conditional1" style="overflow-y: scroll; height: 5px;">
<input type="text" />
</div>
Incorrect markup
The following two examples fail because there is no focusable element 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>The Algorithm (in simple terms)
Ensure that scrollable region has keyboard access.