Ocultar iconos decorativos con aria-hidden
Mantenga los elementos ornamentales fuera del árbol de accesibilidad.
Ocultar iconos decorativos con aria-hidden es una lección gratuita de Web Accessibility Academy en CoddyKit. Esta es la lección 2 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.
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. 🎯
Preguntas frecuentes
¿La lección «Ocultar iconos decorativos con aria-hidden» es gratis?
Sí — el texto completo de «Ocultar iconos decorativos con aria-hidden» 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 «Ocultar iconos decorativos con aria-hidden»?
Mantenga los elementos ornamentales fuera del árbol de accesibilidad. 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 2 de 4.
¿Cuánto tiempo toma la lección «Ocultar iconos decorativos con aria-hidden»?
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