O que é o atributo aria-hidden e como ele funciona?
Se você precisar exibir conteúdo ao mesmo tempo em que o oculta de pessoas que usam tecnologia assistiva, como leitores de tela, você pode usar o atributo
aria-hidden.
Você só precisa adicioná-lo ao elemento HTML que deseja ocultar e definir seu valor como true, como você pode ver aqui: aria-hidden="true".
Este atributo oculta o elemento e todos os seus filhos da árvore de acessibilidade, mantendo-os visíveis na página. Casos de uso comuns incluem:
- Ícones e imagens que têm apenas um propósito decorativo.
- Conteúdo duplicado.
aria-hidden apenas oculta o conteúdo da tecnologia assistiva, como leitores de tela. Se o conteúdo deve ser ocultado de todos, então você não deve usar aria-hidden para escondê-lo. Por exemplo, um menu hamburger que está atualmente recolhido deve ser ocultado de todos os usuários de teclado, não apenas dos usuários de leitor de tela. Neste caso, você poderia definir a propriedade CSS display como none no menu para removê-lo do DOM quando estiver recolhido.
Você nunca deve usar aria-hidden para esconder um elemento que pode ser focado com o teclado. O atributo aria-hidden apenas remove o elemento da árvore de acessibilidade. Ele não o remove do DOM. Assim, ainda será possível para os usuários de leitor de tela navegar até o elemento usando a tecla Tab, mas o leitor de tela não anunciará o elemento, fazendo com que eles foquem efetivamente em "nada".
Aqui está um exemplo onde ocultamos um ícone da árvore de acessibilidade adicionando o atributo aria-hidden com o valor true.
Nós mantemos apenas o texto exposto para tecnologias assistivas para evitar qualquer confusão que possa surgir da redundância de ter tanto um ícone e texto para o mesmo propósito.
NOTA: Este exemplo interativo inclui o Font Awesome CDN para que você possa ver o ícone de engrenagem exibido na janela de visualização. Para ver as prévias, você precisará ativar o editor interativo.
<head>
<!-- Font Awesome CDN -->
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.5.0/css/all.min.css"
/>
</head>
<button>
<i class="fa-solid fa-gear" aria-hidden="true"></i>
<span class="label">Settings</span>
</button>aria-hidden quando:
- O elemento HTML já possui um atributo
hidden. - O elemento ou o ancestral do elemento já está oculto com
display: none. - O elemento ou o ancestral do elemento já está oculto com
visibility: hidden.
aria-hidden não é necessário.
Como ao usar qualquer atributo ARIA, você deve sempre testar com tecnologias assistivas e, de preferência, fazer com que pessoas com deficiências testem seu trabalho para garantir que seja fácil de entender, mesmo com esses elementos ocultos.
Você também deve saber que definir aria-hidden como false não exporá o elemento às tecnologias assistivas se algum de seus elementos pai tiver esse atributo definido como true.
O atributo aria-hidden é usado para ocultar elementos de pessoas que usam tecnologia assistiva, como usuários de leitores de tela.
Embora possa ser útil para ocultar elementos puramente decorativos e conteúdo duplicado, deve ser usado com moderação para evitar prejudicar a acessibilidade.
Em geral, todo o conteúdo e funcionalidade disponíveis na página também devem estar disponíveis para pessoas que usam tecnologia assistiva. O caso de uso para aria-hidden é muito restrito e deve ser limitado principalmente a tornar a experiência mais limpa para usuários de leitores de tela, removendo informações puramente decorativas ou duplicadas. Não use aria-hidden para ocultar conteúdo que você acha que os usuários de leitores de tela não se interessariam. Usuários de leitor de tela merecem ter acesso a todas as informações na página.
Seguindo essas melhores práticas e testando a experiência do usuário, você pode criar experiências online inclusivas para todos.Este módulo não possui perguntas. Marque como concluído.