Teclado

Áreas roláveis precisam ser alcançáveis pelo teclado

Regra: scrollable-region-focusable
Gravidade: Grave
Nível WCAG A

Por que isso importa

Um painel com barra de rolagem própria e sem conteúdo focável dentro não pode ser rolado pelo teclado. Tudo o que está abaixo naquele painel fica simplesmente inalcançável.

Como corrigir

Acrescente tabindex="0" ao contêiner rolável para que ele possa receber foco.
Dê a ele um papel e um nome (role="region" com aria-label) para que a função seja anunciada.
Garanta que o indicador de foco fique visível no próprio contêiner.

Na marcação

Falha

<div class="log" style="overflow-y: auto; max-height: 12rem">...</div>

Passa

<div class="log" style="overflow-y: auto; max-height: 12rem"
     tabindex="0" role="region" aria-label="Event log">...</div>

A exigência por trás disso

Esta regra é uma das formas de falhar nos seguintes critérios de sucesso das WCAG 2.2. O W3C, que publica a norma, explica cada um deles:

2.1.1 Teclado (abre em nova aba) — Nível WCAG A
2.1.3 Teclado (sem exceção) (abre em nova aba) — Nível WCAG AAA

Para aprofundar

Deque University sobre scrollable-region-focusable (abre em nova aba)

A Deque mantém o axe-core, o motor de código aberto que o nosso scanner executa. A página deles documenta a regra como o motor a implementa.

Verificações automáticas encontram falhas que o navegador consegue comprovar. Elas não julgam se uma legenda está correta, se um texto alternativo é útil, nem se a página pode ser operada de ponta a ponta pelo teclado — isso exige uma pessoa.