Definición
El texto alternativo es la descripción que se pone en el atributo alt de una imagen:
<img src="rodamiento-6204.jpg" alt="Rodamiento rígido de bolas 6204 con protección metálica">
Cumple tres funciones, y la primera es la que de verdad importa:
Accesibilidad. Quien navega con un lector de pantalla no ve la imagen: oye el alt. Sin él, oye "imagen" o el nombre del fichero, que suele ser algo como IMG_20240312.jpg.
SEO. Google no ve las imágenes: lee el alt para entender qué contienen. Es lo que permite posicionar en la búsqueda de imágenes y aporta contexto a la página.
Respaldo. Si la imagen no carga, el navegador muestra ese texto.
La regla que casi nadie conoce: el alt vacío
No todas las imágenes deben llevar descripción. Una imagen puramente decorativa —un adorno, un separador, un degradado— debe llevar alt="", vacío pero presente.
La diferencia importa mucho para quien usa un lector de pantalla:
alt=""→ el lector la ignora. Correcto para decoración.- Sin atributo
alt→ el lector lee el nombre del fichero. Ruido. alt="imagen decorativa"→ el lector lo lee en voz alta. Peor todavía.
Así que la pregunta antes de escribir un alt es: ¿esta imagen aporta información que no esté ya en el texto? Si no, vacío.
Cómo escribirlo
- Describe lo que se ve, no lo que te gustaría posicionar.
- Concreto y breve. Entre 5 y 15 palabras suele bastar.
- Sin "imagen de" ni "foto de". El lector de pantalla ya anuncia que es una imagen.
- Si es funcional, describe la función. Un icono de lupa dentro de un botón de búsqueda lleva
alt="Buscar", noalt="lupa". - Si contiene texto importante, transcríbelo. Un gráfico con datos necesita que esos datos estén en algún sitio accesible.
- Si es un enlace, el
althace de texto ancla: tiene que decir a dónde lleva.
Ejemplo práctico
Al auditar esta web, el resultado en imágenes fue 100 % con atributo alt, cero omisiones en las 99 páginas de entonces. Y lo interesante no es eso: es cómo están repartidos.
La firma manuscrita de la portada, el monograma y los adornos llevan alt="". Son decorativos: el monograma dice "AE" y el nombre ya está escrito al lado en texto. Si los describiera, quien usa un lector de pantalla oiría el nombre dos veces seguidas.
Las capturas de los proyectos, en cambio, llevan descripción real, porque aportan información que no está en el texto.
Ahí está la decisión que hay que tomar en cada imagen, y por eso el alt no se puede automatizar bien: una máquina puede describir lo que hay en la foto, pero no sabe si esa información ya está en el párrafo de al lado.
Un caso relacionado que también salió en la auditoría: el mismo logotipo se servía a 1967×517 píxeles para mostrarse a 144×38. Buen alt y 87 KB de peso innecesario. Las dos cosas hay que mirarlas: el alt es para quien no la ve, y el peso para quien sí.
Errores comunes
- Omitir el atributo. El navegador lee el nombre del fichero.
- Rellenarlo de palabras clave. "rodamiento barato comprar rodamiento 6204 online rodamientos" es spam, lo detecta Google y es una tortura para quien lo oye.
- Poner
altdescriptivo a imágenes decorativas. Ruido para el lector de pantalla. - El nombre del fichero como
alt. - Describir el estilo en vez del contenido. "foto bonita en blanco y negro".
- Copiar el mismo
alten todas. Habitual cuando lo genera una plantilla. - Olvidar los fondos CSS. Una imagen puesta como fondo con CSS no tiene
alt. Si es importante, no debería ser un fondo.
Cuándo revisarlo
En cualquier auditoría, porque es de las cosas más baratas de arreglar y afecta a dos frentes a la vez. Extraer todas las imágenes de un sitio y ver cuáles no tienen alt es cuestión de minutos con cualquier rastreador.
Y con prioridad especial en comercio electrónico: las fotos de producto son una fuente real de tráfico desde la búsqueda de imágenes, y ahí un alt bien escrito tiene retorno directo.
