Fontes de ícones e suas armadilhas de acessibilidade
Entenda por que fontes de glifos muitas vezes são lidas como caracteres sem sentido.
Fontes de ícones e suas armadilhas de acessibilidade é uma aula grátis de Web Accessibility Academy no CoddyKit. Esta é a aula 4 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.
What an Icon Font Is
An icon font maps characters to glyphs, so a letter renders as a heart or arrow. Handy for sizing, but a minefield for screen readers.
The Garbage Character Problem
Many icon fonts hide glyphs in the private use area of Unicode. With the font off, a screen reader may read a random box or odd letter.
Fonts Can Fail to Load
If the font file blocks or fails, the fallback glyph shows instead of your icon. Now users see a stray character where a clear icon should be.
CSS Content Is Not Real Text
Icon fonts often inject glyphs via CSS pseudo-elements. That generated content is fragile and easy for assistive tech to misread.
i.icon-star::before {
content: "\e801";
}Hide Decorative Icon Glyphs
If an icon font glyph is decorative, wrap it and add aria-hidden="true" so the meaningless character never reaches the accessibility tree.
<span class="icon-star" aria-hidden="true"></span>Meaningful Glyphs Need Text
When the glyph carries meaning, pair the hidden icon with real visually hidden text so the meaning survives a font failure.
<span class="icon-warn" aria-hidden="true"></span>
<span class="sr-only">Warning</span>User Stylesheets Break Them
Some users override fonts for dyslexia or low vision. Their font replaces yours, and every icon font glyph turns into a plain letter.
Translation Tools Mangle Them
Browser translation can swap the glyph characters for other text, scrambling your icons because they are technically letters, not images.
Why SVG Wins
Inline SVG sidesteps all of this: it is a real image, survives font swaps and translation, and takes role and label cleanly.
Migrating Off Icon Fonts
Modern advice is to retire icon fonts in favor of inline SVG or SVG sprites. You gain crisp rendering and far fewer accessibility traps.
Test With the Font Disabled
Block the font in devtools and reload. If you see stray characters instead of icons, your fallbacks and labels need work.
Quick Check
You inherit a page using an icon font for a meaningful star rating. What is the safest accessibility fix?
Recap: Treat Icon Fonts With Care
Icon font glyphs are fragile text: hide decorative ones with aria-hidden, back meaningful ones with real text, and prefer SVG. 🎯
Perguntas Frequentes
A aula “Fontes de ícones e suas armadilhas de acessibilidade” é grátis?
Sim — o texto completo de “Fontes de ícones e suas armadilhas de acessibilidade” é 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 “Fontes de ícones e suas armadilhas de acessibilidade”?
Entenda por que fontes de glifos muitas vezes são lidas como caracteres sem sentido. 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 4 de 4.
Quanto tempo leva a aula “Fontes de ícones e suas armadilhas de acessibilidade”?
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