Scrollable regions must be keyboard focusable
Content available in English only.
Accessibility isn’t just about avoiding violations — it’s about ensuring that everyone can use your product with confidence. This guide explains each rule’s intent, highlights common issues, and shows how to fix them according to WCAG and the European Accessibility Act (EAA).
These guidelines do not replace the official WCAG standards. They’re concise, developer-focused notes to help you identify and fix issues effectively.
If it can scroll, it must be reachable and scrollable with the keyboard.
Why this matters and how to fix it
Why this matters
If a container scrolls but cannot receive keyboard focus, users who rely on keyboard navigation cannot reach or scroll the content inside it. This often traps essential information out of reach for screen reader users, switch device users, and people who cannot use a mouse.
How to fix this issue
When a container has `overflow: auto` or `overflow: scroll` and may require user scrolling, ensure it is programmatically focusable using `tabindex="0"`. Confirm that scrolling works with the arrow keys, Page Up/Down, and spacebar. If the region represents important content, include an accessible name using `aria-label` or `aria-labelledby`.
Developer guidance
This issue commonly occurs in chat windows, modals, code viewers, file explorers, and dashboard panels. Provide a `ScrollArea` component in your design system that automatically applies `tabindex="0"` and ensures predictable focus behavior. Avoid using negative tabindex values to hide scrollable regions from focus.
Code examples
Incorrect Implementation
<div style="overflow:auto; height:200px">…long content…</div>Correct Implementation
<div tabindex="0" style="overflow:auto; height:200px">…long content…</div>Real-World Examples
Before
<div class="chat-messages" style="overflow-y:auto; height:300px">…</div>
<!-- Keyboard users cannot scroll → cannot read old messages -->After
<div class="chat-messages" tabindex="0" style="overflow-y:auto; height:300px">…</div>
<!-- Keyboard users can scroll using arrow keys, spacebar, Page Up/Down -->CSS Example (Guidance)
/* Providing a visible focus indicator improves clarity */
.scroll-region:focus {
outline: 2px solid var(--focus-ring-color);
outline-offset: 2px;
}Manual testing
- 1. Identify any regions with `overflow:auto` or `overflow:scroll`.
- 2. Try to reach the region using only the Tab key.
- • Expected: The scrollable region receives focus.
- 3. Once focused, use keyboard scrolling:
- • Arrow keys, Space, Shift+Space, Page Up/Down.
- • Expected: The content scrolls smoothly.
- 4. If the region does not receive focus, add `tabindex="0"`.
- 5. If the region is purely decorative, use `aria-hidden="true"` and ensure it never traps focus.
Trusted by organizations across Europe working toward WCAG and EAA conformance