# Scrollable regions must be keyboard accessible.

> Canonical HTML version: https://rocketvalidator.com/accessibility-validation/accesslint/0.16/keyboard-accessible/scrollable-region
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

When an HTML element has scrollable content (through CSS properties like `overflow: scroll` or `overflow: auto`), keyboard users need a way to reach and scroll that content. If the scrollable region is not focusable and does not contain any focusable elements, users who rely on the keyboard have no way to scroll through it. The content inside the region is effectively hidden from them.

This affects keyboard-only users, including people with motor disabilities who cannot use a mouse, as well as screen reader users who navigate sequentially through focusable elements. Sighted keyboard users are particularly impacted because they may be able to see that more content exists but have no way to reach it.

## Why this matters

WCAG Success Criterion 2.1.1 (Keyboard) at Level A requires that all functionality be operable through a keyboard interface. A scrollable region that cannot receive keyboard focus fails this requirement because users cannot operate the scroll mechanism with arrow keys. This criterion also maps to WCAG 2.1.3 (Keyboard, No Exception) at Level AAA, which has no exceptions for this behavior.

When a scrollable region receives focus (either directly or through a focusable child element), the user can press arrow keys to scroll the content. Without focus, the arrow key events never reach the scrollable container, and the content remains stuck in its initial scroll position.

## How to fix it

There are two approaches:

**Make the scrollable element itself focusable** by adding `tabindex="0"`. This places the element in the sequential focus (tab) order so keyboard users can tab to it and then use arrow keys to scroll. When doing this, also add an accessible name (via `aria-label` or `aria-labelledby`) and a `role` like `region` so screen reader users understand what the element is.

**Ensure the scrollable region contains at least one focusable element.** If the scrollable area already contains interactive elements like links, buttons, or form controls, the user can tab into those elements and use arrow keys from there. No additional attributes are needed in this case.

A few things to keep in mind:

- Some browsers automatically make scrollable elements focusable, but this behavior is not consistent across all browsers. Relying on it is not safe.
- Setting `tabindex="-1"` on a scrollable element makes it programmatically focusable (via JavaScript) but does not include it in the tab order, so it does not solve the problem for sequential keyboard navigation.
- If JavaScript is used to intercept or suppress keyboard events within the scrollable region, keyboard scrolling may still fail even when focus is correctly managed. That scenario requires separate testing.

## Examples

### Scrollable region with no focusable content (inaccessible)

This scrollable `div` cannot receive keyboard focus and contains no focusable children. A keyboard user cannot scroll it.

```html
<div style="height: 100px; overflow: auto;">
  <p>This is a long paragraph that extends beyond the visible area of the
  container. A keyboard user has no way to scroll down to read the rest of
  this content because the container is not focusable and contains no
  focusable elements inside it.</p>
</div>
```

### Fixed: scrollable region made focusable with `tabindex="0"`

Adding `tabindex="0"`, a `role`, and an `aria-label` makes the region keyboard accessible and gives it a name for screen reader users.

```html
<div
  style="height: 100px; overflow: auto;"
  tabindex="0"
  role="region"
  aria-label="Terms and conditions">
  <p>This is a long paragraph that extends beyond the visible area of the
  container. A keyboard user can now tab to this region and use arrow keys
  to scroll through the content.</p>
</div>
```

### Fixed: scrollable region contains a focusable element

Because the scrollable region contains a link, a keyboard user can tab to the link and then use arrow keys to scroll the surrounding content.

```html
<div style="height: 100px; overflow: auto;">
  <p>This is a long paragraph that extends beyond the visible area of the
  container. It includes a <a href="/terms">link to the full terms</a>,
  which gives keyboard users a way to reach this scrollable area.</p>
</div>
```

### Scrollable region with `tabindex="-1"` (still inaccessible)

Using `tabindex="-1"` does not add the element to the tab order. Keyboard users still cannot reach it through normal tab navigation.

```html
<div
  style="height: 100px; overflow: auto;"
  tabindex="-1"
  role="region"
  aria-label="License agreement">
  <p>This content is not reachable by pressing Tab. The negative tabindex
  allows JavaScript to call focus() on the element, but it does not help
  users who navigate with the keyboard alone.</p>
</div>
```