Ensure Elements That Have Scrollable Content Are Accessible By Keyboard

Casandra Visser

Author

Yotam Flohr

Researcher

Ritvik Shrivastava

Expert

July 29, 2024

Disabilities affected: Blind Low vision Hearing Mobility

Standards: WCAG 2.2 Level A

Written and researched for humans by humans

Casandra Visser

Author

Yotam Flohr

Researcher

Ritvik Shrivastava

Expertly reviewed by

Comments: 0

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.