O atributo aria-hidden tem três estados, não dois
PermalinkOntem, 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.
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 inscrevaRespostas via webmention's
Carregando webmentions...
Ainda não há menções via webmention. Seja o primeiro a responder!