Ir para conteúdo principal

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

Publicado em: por Bruno Pulis 2 min de leitura

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

SDG,
Pulis.

Compartilhe

Sobre Bruno Pulis

Engenheiro de acessibilidade, focado em experiências inclusivas, teólogo, pensador e minimalista digital.

Esse site é independente, sem anúncios, sem trackeamento de informações e aberto para todos. Sem paywalls e anunciantes, com exceção de livros sugeridos na Amazon.

Você pode também apoiar meu trabalho através de doações pontuais ou regulares, através dos canais:

Assine minha newsletter

Receba atualizações direto no seu e-mail. Sem spam, apenas conteúdo significativo.

Se inscreva

Respostas via webmention's

Carregando webmentions...

Ainda não há menções via webmention. Seja o primeiro a responder!

Aprenda sobre webmentions

Posts relacionados