Sobre esta regra de acessibilidade
Elementos com aria-hidden não devem conter elementos focáveis.
Utilizar a propriedade aria-hidden="true" num elemento remove o elemento e todos os seus nós filhos da API de acessibilidade, tornando o elemento completamente indisponível para leitores de ecrã e outras tecnologias assistivas.
aria-hidden pode ser usado com extrema discrição para ocultar conteúdo visualmente exibido das tecnologias assistivas se o ato de ocultar este conteúdo tem como objetivo melhorar a experiência dos utilizadores de tecnologias assistivas, reduzindo conteúdo redundante ou supérfluo.
Se aria-hidden é empregado para ocultar material dos leitores de ecrã, o mesmo significado e funcionalidade equivalente deve ser disponibilizado às tecnologias assistivas.
Usar aria-hidden="false" em conteúdo que é descendente de um elemento que está oculto usando aria-hidden="true" não irá revelar esse conteúdo à API de acessibilidade, nem será acessível aos leitores de ecrã ou outras tecnologias assistivas.
A regra aplica-se a qualquer elemento cujo valor do atributo aria-hidden seja true.
Ao adicionar aria-hidden="true" a um elemento, os autores asseguram que as tecnologias assistivas irão ignorar o elemento.
Isto pode ser usado para ocultar elementos estéticos, como fontes de ícones, que não são destinadas a ser lidas por tecnologias assistivas.
Um elemento focável com aria-hidden="true" é ignorado como parte da ordem de leitura, mas continua a fazer parte da ordem de foco, tornando pouco claro se está visível ou oculto.
O que esta regra de acessibilidade verifica
Para todos os componentes de interface de utilizador, incluindo elementos de formulário, ligações e componentes gerados por script, o nome e papel podem ser identificados programaticamente; estados, propriedades e valores especificados pelo utilizador podem ser definidos programaticamente; e os agentes de utilizador, incluindo tecnologias assistivas, são notificados das mudanças.
Ajude-nos a melhorar os nossos guias
Detecte problemas de acessibilidade automaticamente
O Rocket Validator examina milhares de páginas com Axe Core e o W3C Validator, encontrando problemas de acessibilidade em todo o seu site.