O atributo aria-hidden tem três estados, não dois

Ontem, estava navegando no curso de Acessibilidade Web da Google e deparei com uma informação que nunca tinha percebido.

O que você precisa saber: a maioria dos desenvolvedores conhece apenas true e false.
Existe um terceiro estado, e ignorá-lo gera comportamento imprevisível em leitores de tela.

Por que isso importa: usar aria-hidden incorretamente cria barreiras reais para usuários de tecnologia assistiva. Um detalhe de valor de atributo pode tanto ocultar conteúdo necessário quanto expor ruído desnecessário.

Os três estados

• true: remove o elemento da API de acessibilidade. Leitores de tela ignoram completamente.
• false: força a exposição do elemento, mesmo que não esteja renderizado.
• undefined (padrão): o navegador decide, com base na renderização via CSS.

O que muda na prática

Sem valor declarado o comportamento imprevisível:

<span class="fa fa-tweet" aria-hidden></span>

Com true, o ícone é removido da API de acessibilidade:

<span class="fa fa-tweet" aria-hidden="true"></span>

A regra mais importante

Nunca use aria-hidden=“true” em elementos que podem receber foco.

Referências

• WAI-ARIA spec — aria-hidden
• MDN — aria-hidden

SDG,
Pulis.