• Success Criterion 2.1.1
  • Conformance level A

Scrollable Content Area That Can’t Be Reached by Keyboard

2.1.1 — Keyboard

Scenario

Setting

A video streaming service's show detail page

What’s wrong

Scrollable overflow container not keyboard-focusable (tabindex (keyboard-focus setting) missing), leaving overflow content unreachable without a mouse.

Example 

<div class="synopsis-box" style="overflow-y:auto; max-height:150px;">
  <p>Long synopsis text that overflows the visible box...</p>
</div>
<!-- no tabindex, so the box never receives focus and arrow keys can't scroll it -->

Why it matters

A viewer using only a keyboard cannot scroll down inside the synopsis box, so most of the show's description stays permanently hidden from them.

How to test

Tab to a scrollable region (e.g., a code block or overflow panel): if it has no tabindex="0" and arrow keys/Page Down don't scroll it, keyboard users can't reach its content.

How to fix

Adding tabindex="0" to a scrollable region lets arrow keys, Page Up/Down, Home, and End scroll it once it has focus.

<div class="synopsis-box" tabindex="0" role="region" aria-label="Synopsis" style="overflow-y:auto; max-height:150px;">
  <p>Long synopsis text...</p>
</div>

Outcome

A viewer tabs into the synopsis box and arrows down to read the rest of the description.

Who is affected

Keyboard-only users cannot reach content that only a mouse wheel or touch drag can scroll into view.

Learn more

Related scenarios