Fuentes de iconos y sus problemas de accesibilidad
Por qué las fuentes de glifos suelen leerse como caracteres ilegibles.
Fuentes de iconos y sus problemas de accesibilidad es una lección gratuita de Web Accessibility Academy en CoddyKit. Esta es la lección 4 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Web Accessibility Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Web Accessibility Academy incluye 4 lecciones en total.
Partes de esta lección aún no han sido traducidas y se muestran en 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. 🎯
Preguntas frecuentes
¿La lección «Fuentes de iconos y sus problemas de accesibilidad» es gratis?
Sí — el texto completo de «Fuentes de iconos y sus problemas de accesibilidad» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Web Accessibility Academy, actualiza a CoddyKit PRO. El curso de Web Accessibility Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Fuentes de iconos y sus problemas de accesibilidad»?
Por qué las fuentes de glifos suelen leerse como caracteres ilegibles. Practicas Web Accessibility Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar Web Accessibility Academy?
No se requiere experiencia previa. Web Accessibility Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 4 de 4.
¿Cuánto tiempo toma la lección «Fuentes de iconos y sus problemas de accesibilidad»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de Web Accessibility Academy?
Sí. Cada lección de Web Accessibility Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- SVG en línea: role img y un title
- Ocultar iconos decorativos con aria-hidden
- Botones con iconos que aún tienen nombre
- Fuentes de iconos y sus problemas de accesibilidad