scrollable-region-focusable

Description

The scrollable-region-focusable rule ensures that elements with scrollable overflow can be focused and scrolled using a keyboard. When a container has overflow: auto or overflow: scroll, it creates a scrollable region. If this region is not keyboard-focusable, keyboard-only users and screen reader users cannot scroll through its content. They can only access content visible in the initial viewport of that container, and any content below the visible area becomes completely unreachable without a mouse.

This rule meets WCAG requirements by:

1. Keyboard Accessibility (WCAG 2.1.1 Keyboard): It ensures that all functionality, including the ability to scroll through content, is operable through a keyboard interface without requiring specific timing.
2. No Keyboard Trap (WCAG 2.1.2 No Keyboard Trap): When scrollable regions are properly focusable, users can both enter and exit them during keyboard navigation without becoming stuck.

To comply with this rule, add tabindex="0" to scrollable containers so they can receive keyboard focus, allowing users to scroll their content with arrow keys.

Examples

This example shows a <div> with overflow: auto making it scrollable, but without keyboard focus support. Keyboard users cannot scroll through the long content it contains.

Here, tabindex="0" is added to the scrollable container along with a descriptive aria-label, allowing keyboard users to focus the region and scroll its content with arrow keys.

How to fix?

To fix violations of the scrollable-region-focusable rule, follow these steps:

• Add tabindex="0" to any element that has overflow: auto or overflow: scroll applied via CSS, so that it can receive keyboard focus.

• Add role="region" and aria-label to the scrollable container to give screen reader users context about what the scrollable area contains.

• Test that once the scrollable region receives focus, users can scroll its contents using the arrow keys without being trapped inside.

• Consider whether the scrollable region pattern is the best approach. In many cases, visible pagination, “show more” buttons, or page-level scrolling can provide a more accessible alternative.

Reference

• WCAG Success Criterion 2.1.1: Keyboard

• WCAG Success Criterion 2.1.2: No Keyboard Trap