Nomes e papéis

Elementos ocultos não podem continuar acessíveis pelo teclado

Regra: aria-hidden-focus
Gravidade: Grave
Nível WCAG A

Por que isso importa

aria-hidden="true" oculta o elemento dos leitores de tela, mas não da tecla Tab. Quem usa os dois cai em um controle anunciado como nada, numa parte da página que não está visível.

Como corrigir

Adicione o atributo inert ao contêiner oculto para que o conteúdo saia também da ordem de tabulação.
Onde inert não for viável, coloque tabindex="-1" em cada descendente focável.
Para conteúdo também oculto visualmente, display:none ou o atributo hidden resolve os dois de uma vez.

Na marcação

Falha

<div aria-hidden="true">
  <button>Buy now</button>
</div>

Passa

<div aria-hidden="true" inert>
  <button>Buy now</button>
</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:

4.1.2 Nome, função e valor (abre em nova aba) — Nível WCAG A

Para aprofundar

Deque University sobre aria-hidden-focus (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.