Ocultando ícones decorativos com aria-hidden
Mantenha elementos ornamentais fora da árvore de acessibilidade.
Ocultando ícones decorativos com aria-hidden é uma aula grátis de Web Accessibility Academy no CoddyKit. Esta é a aula 2 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Web Accessibility Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Web Accessibility Academy inclui 4 aulas no total.
Partes desta aula ainda não foram traduzidas e aparecem em inglês.
Some Icons Say Nothing
A little flourish next to a label adds nothing for a screen reader user. Announcing it just adds noise they have to wade through. 🔇
The Word Decorative
An icon is decorative when removing it would not change what the user understands. The nearby text already carries the meaning.
Hide It From the Tree
Set aria-hidden="true" on a decorative icon to pull it out of the accessibility tree so screen readers skip it entirely.
<button>
<svg aria-hidden="true" focusable="false">...</svg>
Save
</button>It Hides Children Too
One aria-hidden="true" on a wrapper hides the element and everything inside it, so you mark the container, not each path.
Empty alt Does the Same for img
If the decorative icon is an <img>, give it an empty alt instead. An empty alt tells screen readers to skip the image.
<img src="sparkle.png" alt="" />Never Hide Visible Content
The golden rule: do not put aria-hidden on anything a sighted user relies on. You would erase real content for some people.
Never Hide Focusable Things
Putting aria-hidden on a focusable element creates a ghost: keyboard users land on a control screen readers refuse to announce.
Pair It With focusable false
For decorative inline SVGs, add focusable="false" alongside aria-hidden so no browser sneaks it into the tab order.
<svg aria-hidden="true" focusable="false">
<path d="..." />
</svg>Redundant Icons Are Decorative
A trash icon beside the word Delete is redundant. Hide the icon and let the visible text do the talking for everyone.
Watch for the Lone Icon
Careful: an icon with no nearby text is usually not decorative. Hiding it would leave the control silent and unnamed.
Confirm It Is Gone
In the accessibility inspector, a properly hidden icon simply vanishes from the tree. That empty spot is exactly what you want.
Quick Check
A checkmark icon sits right next to the visible word Complete. What should you do with the icon?
Recap: Hide the Noise
Decorative icons get aria-hidden="true" (or empty alt) and focusable false, never on focusable or unique content. Less noise, clearer pages. 🎯
Perguntas Frequentes
A aula “Ocultando ícones decorativos com aria-hidden” é grátis?
Sim — o texto completo de “Ocultando ícones decorativos com aria-hidden” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Web Accessibility Academy, atualize para CoddyKit PRO. O curso de Web Accessibility Academy inclui 4 aulas no total.
O que vou aprender em “Ocultando ícones decorativos com aria-hidden”?
Mantenha elementos ornamentais fora da árvore de acessibilidade. Você pratica Web Accessibility Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar Web Accessibility Academy?
Nenhuma experiência prévia é necessária. Web Accessibility Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 2 de 4.
Quanto tempo leva a aula “Ocultando ícones decorativos com aria-hidden”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de Web Accessibility Academy?
Sim. Cada aula de Web Accessibility Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- SVG em linha: role img e um title
- Ocultando ícones decorativos com aria-hidden
- Botões de ícone que ainda têm um nome
- Fontes de ícones e suas armadilhas de acessibilidade