Scrolling box cannot be reached with the keyboard

Why does it matter?

Success criterion 2.1.1 asks that everything works from a keyboard. This box scrolls, but nothing in it can take focus. Chrome and Firefox let Tab stop on such a box, Safari does not, so keyboard users there cannot read what is out of view.

Who it affects: Keyboard, screen reader and low-vision users — every visitor meets the page title, language, landmarks, keyboard focus, target sizes and zoom settings on every page.

What does Lumtera flag?

A box that scrolls with nothing inside it that can take keyboard focus.

Check ID page-scroll-region, as shown in review mode and saved results.

How do I fix it in WordPress?

Add tabindex="0" to the box, with a role such as region and an aria-label, so keyboard users can stop on it and scroll with the arrow keys. A link or button inside the box also works, if Tab can reach everything that scrolls.

Example

<div style="height: 200px; overflow: auto">Long terms and conditions…</div>

<div style="height: 200px; overflow: auto" tabindex="0" role="region" aria-label="Terms and conditions">Long terms and conditions…</div>

How do I check the fix?

1. Reload the page in review mode and run the Whole page tab again. The finding disappears once the rendered page passes.
2. Load the page and press Tab: a "Skip to content" link should appear first, and you should always see where focus is, even under a sticky header. Pinch-zoom on a phone, and check the browser tab shows a meaningful title.