Texto alternativo de imágenes: cuándo y cómo
Escriba texto alternativo que transmita el significado de las imágenes no decorativas
Texto alternativo de imágenes: cuándo y cómo es una lección gratuita de HTML Academy en CoddyKit. Esta es la lección 3 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 HTML Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de HTML Academy incluye 4 lecciones en total.
¿Qué es el texto alt?
El atributo alt proporciona texto alternativo para las imágenes:
- Los lectores de pantalla lo leen en lugar de la imagen
- Se muestra cuando la imagen no se puede cargar
- Los motores de búsqueda lo indexan
- Es obligatorio para cumplir la WCAG
La regla de oro
El texto alt debe transmitir la misma información o función que la imagen transmitiría a un usuario vidente:
<!-- The test: if you removed this image,
would the alt text give you the same information? -->
<!-- BAD: not descriptive -->
<img src="chart.png" alt="Chart">
<!-- GOOD: conveys the information -->
<img src="chart.png" alt="Bar chart showing 48% revenue increase from Q1 to Q4 2024">Imágenes informativas
Imágenes que transmiten información: describa su contenido:
<img
src="signup-flow.png"
alt="Five-step signup flow: Email → Profile → Plan → Payment → Confirmation"
>
<!-- Describe what the image shows, not what it is -->
<!-- BAD: 'Image of a graph' -->
<!-- GOOD: 'Line graph showing download growth from 10k to 150k per month' -->Imágenes decorativas: alt vacío
Las imágenes puramente decorativas deben tener un alt vacío para que se omitan:
<!-- Decorative separator -->
<img src="divider.png" alt="">
<!-- Icon beside text that already describes it -->
<img src="warning-icon.svg" alt=""> <span>Payment failed</span>
<!-- The icon duplicates the adjacent text — empty alt is correct -->
<!-- Never omit alt entirely — missing alt attribute is an error
Empty alt="" = intentionally decorative
Missing alt = unknown, screen readers may read the filename -->Imágenes funcionales
Imágenes que cumplen una función: describa la función, no la apariencia:
<!-- Logo that links to home -->
<a href="/">
<img src="logo.svg" alt="CoddyKit — Go to homepage">
</a>
<!-- Describes the destination, not the logo's appearance -->
<!-- Submit button using an image -->
<input type="image" src="submit.png" alt="Submit registration form">
<!-- Describes what happens when activated -->Imágenes complejas: figuras y descripciones largas
Los gráficos o diagramas complejos pueden necesitar algo más que un alt breve:
<figure>
<img
src="complex-diagram.png"
alt="Network architecture diagram — see the description below"
aria-describedby="diagram-desc"
>
<figcaption id="diagram-desc">
<p>The diagram shows three tiers: a client layer with browsers and mobile apps,
a middle tier with load balancers and app servers,
and a data tier with primary and replica databases.</p>
</figcaption>
</figure>Imágenes de texto
Evite las imágenes de texto; si debe utilizarlas, el alt debe coincidir exactamente con el texto:
<!-- Logo with text 'CoddyKit' -->
<img src="text-logo.png" alt="CoddyKit">
<!-- Promotional banner with text 'Save 50% this week only' -->
<img src="promo.jpg" alt="Save 50% this week only">
<!-- Better: use real HTML text styled with CSS
Images of text fail at zoom and high contrast modes -->El contexto cambia el alt
La misma imagen puede necesitar un texto alt diferente en distintos contextos:
<!-- As part of an article about dogs: -->
<img src="golden.jpg" alt="Golden retriever fetching a yellow tennis ball">
<!-- As a product photo for 'Golden Retriever Dog Toy':
<img src="golden.jpg" alt="Golden retriever playing with our premium fetch toy">
<!-- As a decorative header image:
<img src="golden.jpg" alt=""> -->Longitud del texto alt
Directrices sobre la longitud del texto alt:
- Manténgalo conciso; no es necesario comenzar con «Imagen de» o «Foto de»
- Procure que tenga menos de 125 caracteres (algunos lectores de pantalla lo truncan a partir de 125)
- Para imágenes complejas, use un alt breve y
aria-describedbypara la descripción ampliada - No incluya palabras clave de forma excesiva; escriba para las personas
Pruebas del texto alt
Cómo probar el texto alt:
- Desactive las imágenes en el navegador (Firefox: Herramientas → Estilo de página → Sin estilo)
- Use la herramienta WAVE para ver todo el texto alt a la vez
- Escuche con VoiceOver/NVDA lo que se anuncia
- Ejecute Lighthouse: Accesibilidad → Los elementos de imagen tienen atributos [alt]
SVG y nombres accesibles
Para SVG insertados directamente, proporcione los nombres accesibles de otra manera:
<!-- Standalone SVG with title: -->
<svg role="img" aria-labelledby="icon-title">
<title id="icon-title">Settings</title>
<!-- SVG paths -->
</svg>
<!-- Decorative SVG: -->
<svg aria-hidden="true">
<!-- paths -->
</svg>Comprobación rápida
¿Qué valor de alt debe tener una imagen puramente decorativa?
Repaso: texto alt
Aspectos esenciales del texto alt:
- Incluya siempre el atributo alt; use alt="" para las imágenes decorativas
- Describa la información, no la apariencia
- Imágenes funcionales: describa la acción o el destino
- Imágenes complejas: alt breve y aria-describedby para la descripción completa
- Imágenes de texto: el alt debe coincidir exactamente con el texto
Preguntas frecuentes
¿La lección «Texto alternativo de imágenes: cuándo y cómo» es gratis?
Sí — el texto completo de «Texto alternativo de imágenes: cuándo y cómo» 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 HTML Academy, actualiza a CoddyKit PRO. El curso de HTML Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Texto alternativo de imágenes: cuándo y cómo»?
Escriba texto alternativo que transmita el significado de las imágenes no decorativas Practicas HTML 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 HTML Academy?
No se requiere experiencia previa. HTML 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 3 de 4.
¿Cuánto tiempo toma la lección «Texto alternativo de imágenes: cuándo y cómo»?
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 HTML Academy?
Sí. Cada lección de HTML 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
- Por qué importa la accesibilidad: niveles WCAG
- Jerarquía de encabezados para lectores de pantalla
- Texto alternativo de imágenes: cuándo y cómo
- Navegación con teclado y orden del foco