Start scanning free

( Operable / WCAG 2.1.1 )

Scrollable region must be keyboard accessible

This check maps to Keyboard. Use the guidance below to confirm the issue, understand who it affects and ship a fix.

Moderate Level A WCAG 2.1.1 — Keyboard

What’s wrong

A scrollable content area uses overflow: auto or overflow: scroll but cannot receive keyboard focus, so keyboard users cannot scroll it.

Why it matters

Scrollable content areas must be reachable and operable by keyboard. Without focus, keyboard-only users cannot move through content inside a scrollable panel, table wrapper, or code block.

How to fix it

Add tabindex="0" to any element that has overflow: auto or overflow: scroll so keyboard users can focus and scroll it.

Before
<div class="code-panel" style="overflow: auto; max-height: 200px;">
  <!-- long content -->
</div>
After
<div
  class="code-panel"
  tabindex="0"
  style="overflow: auto; max-height: 200px;"
>
  <!-- long content -->
</div>

Once focused, users can scroll with arrow keys, Page Up, Page Down, Home, and End.

Learn more