Ensure Elements That Have Scrollable Content Are Accessible By Keyboard
Blind
Low vision
Hearing
Mobility
WCAG 2.2 Level A
Web accessibility standards require elements that have scrollable content to be keyboard accessible.
Why It Matters
Scrollable content needs focusable elements to enable keyboard navigation. Failure to do so can create accessibility issues on a site.
Fixing the Issue
Ensure that the scrollable region has keyboard access.
Good Code Example
Code example
<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>
Copy
The following examples would 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.
Code example
<div id="conditional1" style="overflow-y: scroll; height: 5px;">
<input type="text" />
</div>
Copy
Bad Code Example
Code example
<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>
Copy
Test Cases
For more examples, visit the W3C’s GitHub’s ATC Rules library.