Ensure Elements That Have Scrollable Content Are Accessible By Keyboard

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

Ensure Elements That Have Scrollable Content Are Accessible By Keyboard

Written and researched for humans by humans

Why It Matters

Fixing the Issue

Good Code Example

Bad Code Example

Test Cases