Primero decide si la imagen informa o decora
Una imagen informativa añade un dato que no está ya en el texto: una foto de un producto concreto, un gráfico, una captura de una interfaz o una comparación visual. Una imagen decorativa acompaña el diseño, pero si desapareciera el lector seguiría comprendiendo el contenido. Esta diferencia determina si necesita una descripción alternativa.
Cuando una imagen es decorativa, no hace falta repetir su color, estilo o posición en el texto alternativo. Cuando aporta información, el objetivo es expresar esa información de manera breve y natural. No se trata de describir cada píxel, sino de comunicar aquello que el usuario perdería al no verla.
Cómo redactar texto alternativo útil
Empieza por el contexto de la página. Una misma fotografía puede requerir descripciones distintas según acompañe una ficha de producto, una noticia o una guía. Después nombra el elemento importante y la acción, estado o detalle que justifica la imagen. Evita empezar por “imagen de” o “foto de”: quien utiliza un lector de pantalla ya sabe que se trata de una imagen.
Son palabras sueltas. No explica qué se muestra ni por qué importa.
Una enumeración de colores y objetos distrae cuando la mayoría no aporta contexto.
“Zapatilla azul vista de perfil con suela blanca” identifica el producto y el detalle relevante.
Si el nombre visible ya da toda la información, el texto alternativo puede complementarlo en lugar de repetirlo. Para un gráfico complejo, una frase breve no basta: añade una explicación o tabla en el contenido cercano para que los datos sigan disponibles sin depender de la imagen.
Evita poner información esencial dentro de una foto
Los precios, instrucciones, teléfonos, enlaces y mensajes que solo existen dentro de una imagen son difíciles de leer, traducir, seleccionar o ampliar. Pon esos datos como texto HTML junto a la imagen. Si necesitas incluir una etiqueta visual, repite la información en texto y asegúrate de que el contraste siga siendo legible en móvil.
Esta decisión también facilita el mantenimiento. Cuando cambia un precio o una oferta, puedes actualizar una línea de texto sin editar, exportar y volver a optimizar una fotografía completa. La imagen queda reservada para mostrar el producto, el resultado o el contexto visual.
Comprueba el contenido en una pantalla pequeña
La accesibilidad no depende solo del atributo alternativo. En móvil, una foto con texto minúsculo, un recorte que oculta el producto o un contraste bajo puede dejar de cumplir su función aunque técnicamente tenga una descripción. Abre la página en vertical y verifica que el punto principal es identificable sin necesidad de ampliar.
Reduce las dimensiones pensando en el espacio final, pero no rebajes tanto la calidad que se pierdan etiquetas, contornos o detalles que el usuario necesita comparar. La guía de dimensiones ofrece un método para decidir el tamaño de salida antes de ajustar formato y peso.
Casos habituales
- Foto de producto: identifica producto, variante y vista cuando esos datos no estén ya en el título cercano.
- Imagen de cabecera decorativa: si no añade significado, usa una descripción vacía y deja que el encabezado de texto haga el trabajo.
- Captura de pantalla: explica qué acción, resultado o error debe observar la persona; no intentes transcribir toda la interfaz si está disponible en texto.
- Gráfico: resume la conclusión y ofrece los datos relevantes en texto o tabla junto a él.
- Logotipo enlazado: el texto alternativo debe expresar el destino o la acción, por ejemplo, “Inicio de ArchivoLigero”.
Revisión final de una imagen accesible
- Pregunta qué aporta: si no añade información, trátala como decorativa.
- Describe lo esencial: redacta una frase corta que comunique el dato visual importante.
- Separa texto e imagen: no dejes información imprescindible solo dentro de una fotografía.
- Comprueba móvil: revisa encuadre, contraste y legibilidad en un ancho reducido.
- Optimiza al final: ajusta dimensiones y peso sin eliminar el detalle necesario.
Estas comprobaciones mejoran la experiencia de quien usa un lector de pantalla, pero también la de quien navega con mala conexión, con una pantalla pequeña o sin contexto de la imagen. Una imagen clara, ligera y bien explicada ayuda a que la página sea útil antes de plantearse su monetización.