El texto alternativo empieza por la función de la imagen
Elige texto alternativo útil según el contexto, la decoración o la acción del enlace, y revisa las páginas terminadas en inglés y español.
Por Noe Guerrero III
Antes de llenar el campo de texto alternativo de una imagen, pregúntate qué aporta a esa página en particular. ¿Explica algo, sirve de decoración o permite realizar una acción? La respuesta cambia lo que debe incluir su texto alternativo.
Empieza por ese propósito y después escribe las palabras útiles. Una lista de servicios y ciudades cercanas no ayudará a alguien a entender la imagen ni a usar el enlace.
Ajusta el texto alternativo a la función de la imagen
El texto alternativo es una alternativa en texto que se proporciona para una imagen. Para una foto informativa sencilla, describe el significado que aporta en su contexto. La guía de W3C sobre imágenes informativas explica que la alternativa adecuada depende de por qué aparece la imagen en la página; no necesariamente es un inventario literal de todo lo visible.
La decoración requiere otra decisión. La guía de W3C sobre imágenes decorativas recomienda una alternativa intencionalmente vacía, escrita como alt="" para una imagen HTML. Eso es distinto de omitir el atributo, lo cual puede hacer que algunos lectores de pantalla anuncien el nombre del archivo. Pide al desarrollador que confirme cómo aplica tu editor esta opción.
Para un enlace o botón compuesto solo por una imagen, describe su destino o acción. Un texto equivalente dentro del mismo enlace puede hacer que el texto alternativo de la imagen resulte redundante.
La función de un logotipo puede cambiar según dónde aparezca. Revisa si identifica al negocio, enlaza a la página de inicio o repite información dentro del mismo enlace.
Revisa un ejemplo pequeño
Imagina un negocio de reparación de bicicletas en McAllen llamado Example Cycle Shop. Tanto el negocio como los siguientes usos de imágenes son hipotéticos, no un proyecto de un cliente. Su equipo de contenido está eligiendo los textos alternativos antes de entregar la página a un desarrollador.
| Imagen y contexto en la página | Propósito | Opción propuesta |
|---|---|---|
| Foto del servicio de frenos que muestra una rueda sujeta a un soporte de reparación | Explicar cómo se prepara el servicio | “Rueda sujeta a un soporte de reparación para una revisión de frenos” |
| Franja abstracta de huellas de llanta usada únicamente como borde | Decoración | Alternativa intencionalmente vacía |
| Imagen de un calendario usada sola como enlace para agendar | Abrir la página para agendar | “Agenda una cita de reparación” |
| Logotipo del negocio usado solo como enlace a la página de inicio | Identificar el destino | “Inicio de Example Cycle Shop” |
Estas son alternativas propuestas para esos usos imaginarios, no textos para pegar en todos los sitios web de bicicletas. La redacción para la foto informativa debería cambiar si otro detalle es el motivo para mostrarla. La etiqueta para agendar debe coincidir con el destino real.
Para cada imagen que entregues, incluye su ubicación en la página, su propósito y el texto alternativo propuesto o la decisión de tratarla como decorativa. Agrega cualquier duda como una pregunta para revisar. Una nota como “esta foto muestra el soporte de la rueda” orienta mejor al diseñador que una carpeta de archivos y la indicación “agrégale SEO”.
Mantén la información para los clientes donde todos puedan encontrarla. No dejes una condición importante del servicio disponible únicamente en el texto alternativo de una imagen. Dale también un lugar claro en el texto de la página. Un diagrama elaborado, una tabla de precios o un gráfico con instrucciones pueden necesitar más explicación de la que abarca este ejercicio con fotos sencillas; márcalos para una revisión de contenido aparte.
Mantén útil la redacción para buscadores
La guía de Google sobre SEO de imágenes dice que utiliza el texto alternativo junto con el análisis de imágenes y el contenido de la página para entender una imagen. También advierte contra el uso excesivo de palabras clave. Escribe una alternativa precisa y contextual; no agregues una lista de ubicaciones ni afirmaciones sin respaldo sobre ser el mejor.
Una ubicación puede importar cuando forma parte de lo que comunica la imagen. No es necesario insertarla en cada foto de reparación. Los textos alternativos útiles no prometen posicionamiento.
Revisa la imagen en la página terminada
La nota de entrega es un punto de partida. Revisa la página implementada junto con el texto que rodea la imagen, los enlaces y el idioma elegido. Pide al desarrollador que te muestre el texto alternativo guardado y verifique el nombre que se expone para un control compuesto solo por una imagen mediante una inspección de accesibilidad o una prueba con un lector de pantalla.
Lee la redacción propuesta junto al encabezado y al pie de foto. ¿Agrega la información prevista, repite la misma frase o describe un detalle que ya no aparece después de recortar la imagen? Si la imagen o su destino cambian, vuelve a revisar la decisión.
Para las páginas en inglés y español, revisa los textos alternativos con significado en ambos idiomas. Conserva los nombres y los datos, pero haz que la redacción suene natural. Nuestra guía de consistencia para sitios web bilingües aborda la necesidad relacionada de mantener el idioma elegido durante toda la experiencia del cliente.
Guarda las decisiones finales junto con las notas de contenido de la página. La siguiente persona que reemplace una foto debería poder entender por qué era informativa, decorativa o funcional, en lugar de heredar un campo vacío sin explicación o una lista de palabras clave.