Atributo ALT: ¿Qué Escribir?

Alt es un atributo obligatorio de la etiqueta <img>. Es una descripción alternativa para las imágenes que los usuarios no pueden ver:

• Por una conexión lenta;
• Por una ruta o nombre de archivo incorrectos en el atributo src;
• Porque usan lectores de pantalla.

Antes de pasar a los ejemplos, analicemos la necesidad del texto alternativo en diferentes situaciones.

¿Cuándo se Necesita el Texto alt?

Para cualquier imagen que ilustre o complemente el texto. Por ejemplo, para las imágenes dentro de la etiqueta <a>, si el enlace no tiene contenido de texto.

<a href="/courses">
  <img src="HDC.jpg" alt="HDC te invita a los cursos">
</a>

Cómo Escribirlo Correctamente

• Breve. La longitud máxima recomendada es de 125 caracteres. Uno de los lectores de pantalla más populares, JAWS, no le gustan las líneas largas. Las líneas muy largas pueden leerse como tres imágenes, aunque solo fuera una línea larga.
• Claro. ¿Hay que responder a la pregunta de qué se representa en la imagen? ¿Qué función cumple?
• Único. No repitas el texto que ya está en la página.
• No empieces con las palabras “imagen” o “ilustración”.
• Basarse en el contenido circundante.
• Seguir las reglas del idioma en el que se está escribiendo la descripción: puntuación, ortografía.

Ejemplos de Uso

Imagen

<img src="letrero-html.jpg" alt="Robot con letrero HTML">

Así se puede describir si en el artículo hay un texto que habla de la fotografía.

Si no hay texto, por ejemplo, tenemos una galería de imágenes, entonces hay que describir la imagen con más detalle:

<img src="dinosaurios.jpg" alt="Dos dinosaurios en el Parque Nacional Anza-Borrego con el cielo estrellado de fondo. Uno grande, otro pequeño">

Enlace

<a href="/blog">
  <img src="blog.jpg" alt="Ir a la página principal del blog">
</a>

No es necesario empezar el texto con “enlace”, la propia etiqueta <a> hace el papel de aclaración.

Diagrama

<img src="chart.png" alt="Diagrama con los resultados de una encuesta sobre lo que dificulta a los usuarios el trabajo remoto">

Si no hay texto con estadísticas, habrá que incluir todas las estadísticas en el alt:

<img src="chart.png" alt="Comida - 10%, vecinos - 15% ...">

Imagen con texto

Simplemente trasladamos el texto al alt:

<img src="courses.png" alt="HTML Desde Cero Cursos online gratuitos...">

Figure y figcaption

De todos modos escribimos un alt normal, ya que en figcaption suele haber una descripción pequeña:

<figure>
  <img src="image.jpg" alt="El lugar de trabajo de Tania">
  <figcaption>Tania se ha ido a calentar</figcaption>
<figure>

¿Cuándo No Se Necesita alt?

Cuando la imagen es decorativa y no tiene sentido.

• Avatar: el nombre de usuario ya lo tenemos.
• Vista previa del artículo: ya tenemos un título y eso será suficiente.
• Iconos en un botón.

Cómo No Hay que Escribir

Si la imagen es de diseño y no necesita alt, no hay que poner un espacio o su equivalente en ella.

Ejemplos malos:

<img src="image.png" alt=" ">
<img src="image.png" alt=" ">

Si lo haces así, los lectores de pantalla, o bien empezarán a decir que es una “imagen” (sin sentido), o bien leerán “espacio” (aún más sin sentido).

¿Qué Pasa si Se Olvida el Texto alt?

Hay dos problemas principales: los usuarios no verán nada y los lectores de pantalla pueden leerlo mal o no leerlo. Por ejemplo, NVDA no dirá nada, JAWS dirá “Imagen gráfica sin descripción”, y VoiceOver dirá el nombre del archivo.

Pero a veces hay imágenes a las que no se les añade alt. Por ejemplo, una búsqueda de “gato naranja“, y en los resultados de la búsqueda aparecen miles de gatos naranjas. No tiene sentido indicar alt.

En la mayoría de los casos, en esta situación se elimina el alt:

<img src="orange-cat-1.jpg">

Pero en este caso, algunos lectores de pantalla empezarán a leer src, lo que es aún peor. Por lo tanto, es mejor dejar un alt vacío. De dos males se escoge el menor.

<img src="orange-cat-2.jpg" alt="">

Inteligencia Artificial y alt

La IA en las redes sociales hace un buen trabajo al generar textos para imágenes. Algunos ejemplos son las redes sociales o Google Imágenes con las imágenes desactivadas.

Si miramos la generación automática de textos ahora, siempre hay una parte de suposición: “la imagen puede contener 1 persona”.

Con las imágenes abstractas es aún peor, ya que la IA no entiende en absoluto lo que está pasando.

No escribas en el alt Nombres de Archivo o el Nombre del Fotógrafo

A menudo veo qué descripción se rellena en el atributo alt y me sorprende lo lejos que puede llegar la imaginación. A menudo, el texto alternativo rellenado es completamente inútil, ya que no transmite el significado de la imagen.

¿Qué descripción no sirve?

• imgX2 o 7e0273c07fef3df7808604f0a191435c2c0c – simplemente un nombre o un hash de un archivo con una imagen.
• El nombre del sitio o el nombre del artículo – probablemente sea una obra para SEO.
• El nombre del fotógrafo – aquí todo está claro.

Todas estas opciones no ayudarán de ninguna manera a la principal tarea del alt-texto: comprender qué había en la imagen que no se cargó o al leer la página con un lector de pantalla.

En Resumen: Cómo Escribir un Buen alt

Una descripción simple y comprensible es la mejor solución si no es demasiado larga. La ausencia de descripción está bien, pero debe ser apropiada. La descripción emocional también está bien si encaja en el contexto.

Aquí hay seis reglas resumidas:

1. Simplemente describe lo que ves en la imagen – cuanto más corto, mejor.
2. Utiliza el contexto en el que se encuentra la imagen – es decir, ten en cuenta lo que hay a su alrededor en el sitio.
3. No escribas alt si la imagen no tiene un significado separado – por ejemplo, un avatar en un perfil.
4. No dudes en transmitir emociones a través del alt – si alguien está contento o triste, escribe sobre ello, si es apropiado.
5. No escribas alt para imágenes decorativas – por ejemplo, para iconos.
6. No escribas en el alt el nombre del archivo o el nombre del fotógrafo – el alt no es para eso.

Experimenta, prueba y no tengas miedo de equivocarte.