a11y/scrollable-region-focusable

Why

A code block, a wide table or a chat log with overflow: auto scrolls only with a mouse or touch when nothing inside it can take focus. Keyboard users cannot read the hidden part.

Fix

Give the scroll container tabindex="0", a role that fits (region), and a name (aria-label or aria-labelledby), so it is announced when it takes focus.

Examples

<!-- bad -->
<div class="table-scroll"><table>…</table></div>
<!-- good -->
<div class="table-scroll" tabindex="0" role="region" aria-labelledby="sales-caption">
  <table><caption id="sales-caption">Sales by month</caption>…</table>
</div>

Sources

• WCAG 2.2, Understanding SC 2.1.1 Keyboard
• MDN, the tabindex global attribute

Read it in the terminal

npx github:dawidolko/frontend-skills explain a11y/scrollable-region-focusable