SVG en línea: role img y un title
Asigne un nombre significativo al gráfico para los lectores de pantalla.
SVG en línea: role img y un title es una lección gratuita de Web Accessibility Academy en CoddyKit. Esta es la lección 1 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.
A Picture With No Words
An inline SVG draws shapes the eye loves, but a screen reader sees a pile of paths and says nothing useful about it. 🖼️
Meaningful or Just Pretty?
Before naming anything, ask one question: is this graphic meaningful or purely decorative? Your whole markup choice flows from that answer.
Tell the Browser It Is an Image
For a meaningful graphic, add role="img" so assistive tech treats the whole SVG as one image instead of loose shapes.
<svg role="img" viewBox="0 0 24 24">
<path d="M12 2 L22 22 H2 Z" />
</svg>Give It a Name With title
A <title> inside the SVG supplies the accessible name a screen reader will read aloud for the graphic.
<svg role="img" viewBox="0 0 24 24">
<title>Warning</title>
<path d="M12 2 L22 22 H2 Z" />
</svg>Put title First
Place <title> as the very first child of the SVG. Some screen readers only pick it up reliably when it comes before the shapes.
Connect It With aria-labelledby
For rock-solid support, give the title an id and point to it with aria-labelledby on the svg element.
<svg role="img" aria-labelledby="t1">
<title id="t1">Search</title>
<path d="..." />
</svg>aria-label as a Shortcut
Short on markup? An aria-label on the svg names it directly, no child title needed. It also overrides any inner title text.
<svg role="img" aria-label="Home">
<path d="M3 11 L12 3 L21 11" />
</svg>Name the Meaning, Not the Shapes
Write the name as the graphic's purpose, like Download, not its visual parts like a down arrow over a line.
desc Adds Longer Detail
Need more than a short name? A <desc> element holds a longer description, paired via aria-describedby for extra context.
<svg role="img" aria-labelledby="t2" aria-describedby="d2">
<title id="t2">Sales chart</title>
<desc id="d2">Revenue rose each quarter in 2025.</desc>
</svg>focusable Trips Up IE Legacy
Old browsers let SVGs grab keyboard focus. Adding focusable="false" keeps a non-interactive graphic out of the tab order.
<svg role="img" focusable="false" aria-label="Star">
<path d="..." />
</svg>Verify in the Inspector
Open your browser's accessibility panel and confirm the SVG shows as an image with the exact name you intended.
Quick Check
You want a meaningful inline SVG to be announced as a single image with a spoken name. Which combination does that?
Recap: Name the Meaningful
Meaningful SVGs get role="img" plus a title or aria-label naming their purpose. Inspect to confirm, and your graphics finally speak. ✅
Preguntas frecuentes
¿La lección «SVG en línea: role img y un title» es gratis?
Sí — el texto completo de «SVG en línea: role img y un title» 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 «SVG en línea: role img y un title»?
Asigne un nombre significativo al gráfico para los lectores de pantalla. 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 1 de 4.
¿Cuánto tiempo toma la lección «SVG en línea: role img y un title»?
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