Keyboard & focus

A Scrolling Area Can't Be Reached with the Keyboard

Content inside a box that scrolls can't be reached by people using only a keyboard, so they never see what's hidden below or beside it.

scrollable-region-focusableWCAG 2.0Introduced in WCAG 2.0.Level AA — the minimum. Missing it blocks people outright.

Status: SeriousSerious — Significant friction, or information that is lost.CurrentScanners run this rule today.
Owner: DesignDevTest
Audit: Automated+ManualA scanner finds it; a person confirms the fix.

Why it matters

Some boxes on a page scroll on their own — a code sample, a wide table, a terms panel. A mouse or trackpad can scroll them. A keyboard can only scroll a box once the box has focus.

If nothing inside the box can take focus, keyboard users can't scroll it at all. Whatever sits past the visible edge is simply out of reach.

Who it affects

Who it affects, and how much
Who	What they experience	Impact
Keyboard-only users	They Tab straight past the box and can't scroll it, so the hidden content stays hidden.	High impact
Motor and dexterity	Switch and keyboard-style devices can't move into the box to scroll it.	High impact
Screen reader users	They can usually read the content with reading keys, but the box gets no name when they reach it.	Partial impact
Low-vision users (magnification)	At high zoom more boxes overflow, so more content becomes unreachable without a mouse.	Partial impact
Voice control users	Saying "scroll down" may scroll the whole page instead of the box.	Partial impact

Business & product impact

Business & product impact, with how much each claim weighs
Area	Why	Impact
Legal	It fails WCAG 2.1.1 Keyboard at Level A, the minimum. Australia's Disability Discrimination Act complaints and EN 301 549 both point to WCAG.	High impact
Conversion	If prices, terms or a submit option sit in an unreachable box, keyboard users can't finish the task.	Moderate impact
SEO	No search benefit — search engines read the content either way.	Low impact
Brand trust	Content people can see but can't reach feels careless.	Low impact
Cost to fix	Usually a small fix in a shared component, such as the table or code block wrapper.	High impact

Fixing it in code

A wide table that scrolls sideways

Don't

<div style="overflow-x: auto">
  <table>…</table>
</div>

A screen reader says: “Nothing — Tab skips the box.”

<div style="overflow-x: auto" tabindex="0" role="region" aria-label="Price comparison">
  <table>…</table>
</div>

A screen reader says: “Price comparison, region”

tabindex="0" lets the box take focus, so arrow keys can scroll it, and the label names it.

Visible focus on the scrolling box

Don't

[role="region"][tabindex]:focus {
  outline: none;
}

A screen reader says: “Focus lands, but sighted keyboard users can't see where.”

[role="region"][tabindex]:focus-visible {
  outline: 3px solid #1a5fb4;
  outline-offset: 2px;
}

A screen reader says: “Same announcement, now with a clear outline on screen.”

People need to see that the box has focus before they press the arrow keys.

Designer's handoff note

Avoid boxes that scroll inside the page where you can. Let content flow, or wrap it.

When a scrolling box is needed, design its focus outline and give it a short visible or spoken name.

Quick test

Tool

The keyboard alone

Checklist

Step 1: Find a box with its own scrollbar, like a wide table or code sample.
Step 2: Click the address bar, then press Tab until you reach the box.
Step 3: Press the arrow keys.

Pass: Focus lands on the box, you can see it, and the arrows scroll its content.
Fail: Tab skips the box, or the arrows scroll the page instead.

Check these at the same time

An element has an ARIA role that doesn't suit it aria-allowed-role

What a green scan still misses

A scanner spots a scrolling box with nothing focusable inside. It can't check that focus is visible, the name makes sense, or the box needed to scroll at all.

Reference

Rule ID: scrollable-region-focusable
Raised by: axe-core: “Scrollable region must have keyboard access”
WCAG: 2.1.1 Keyboard (opens in a new tab) · Level A · since WCAG 2.0
2.1.3 Keyboard (No Exception) (opens in a new tab) · Level AAA · since WCAG 2.0
Other standards: EN 301 549 9.2.1.1 · EN 301 549 9.2.1.3 · RGAA 7.3.2
Read more: Deque University: scrollable-region-focusable (opens in a new tab)
Last reviewed: 14 October 2026