Dostępność

`a11y/scrollable-region-focusable`

A scrolling region with no focusable content inside can itself take focus (tabindex="0") and has a name.

poważnaw przeglądarceWCAG 2.1.1 · Afe-a11y-keyboard

Dlaczego

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.

Poprawka

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.

Przykłady

<!-- 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>

Źródła

Fakty

Identyfikator: a11y/scrollable-region-focusable
Waga: poważna
Sprawdzanie: w przeglądarce wymaga wyrenderowanej strony: audit --url
Dotyczy plików: page
WCAG 2.2: 2.1.1, poziom A
Ten sam problem w: axe-core scrollable-region-focusable
Uczy jej skill: fe-a11y-keyboard Keyboard access and focus
Od wersji: 0.1.0

Plik reguły na GitHubie

Przeczytaj w terminalu

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