Digital Accessibility Knowledge Base

scrollable-region-focusable

Ensure that a scrollable region has keyboard access

Who might be affected
Screen Reader
Keyboard

Description

Any scrollable area (HTML element that has one of the following CSS properties: overflow, overflow-x, or overflow-y set to auto or scroll) should be focusable for keyboard-only users to be able to get to it and scroll its content.

Quick Fixes

Add [tabindex="0"] to scrollable elements to make them accessible for keyboard users.
1✓   <div style="max-height: 400px; overflow-y: auto" tabindex="0">
2        <!-- The element content -->
3    </div>
4

5✓   <div style="height: 200px; overflow: scroll" tabindex="0">
6        <!-- The element content -->
7    </div>
8

9✗  <div style="max-height: 400px; overflow-y: auto">
10        <!-- The element content -->
11    </div>

How Users Are Affected

Keyboard-only users will not be able to scroll the content of scrollable elements.

WCAG Success criteria

This issue might cause elements to fail one or more of the following Success criteria:
2.4.7 Focus Visible (AA)