¿Qué es el texto alternativo?

El texto alternativo es la alternativa escrita de una imagen, contenida en el atributo alt del elemento de imagen de HTML. La tecnología de asistencia lo lee en lugar de la imagen, los navegadores lo muestran cuando la imagen no carga y los buscadores lo utilizan como una señal para interpretar el contenido visual. En una tienda el atributo afecta a la fotografía de producto, los banners de categoría, las guías de tallas en formato imagen, los iconos de pago y entrega y los visuales de campaña. Aunque suele llamarse etiqueta alt, es un atributo y no una etiqueta propia.

Definición

Las Pautas de Accesibilidad para el Contenido Web exigen una alternativa textual para el contenido no textual en el criterio de conformidad 1.1.1, nivel A. La regla no consiste en describir cada imagen, sino en transmitir el mismo propósito: una foto informativa de producto necesita una descripción específica, una imagen decorativa lleva un atributo alt vacío para que la tecnología de asistencia la omita, y una imagen usada como enlace describe el destino en lugar de la ilustración. En la Unión Europea, la Ley Europea de Accesibilidad amplía estas obligaciones al comercio electrónico dirigido a consumidores. Acumular palabras clave en el atributo no sirve a ninguno de los dos públicos.

Por qué es importante

En una tienda composable las imágenes proceden de un PIM, un DAM o un CMS, de modo que el texto alternativo pertenece al activo en ese sistema y viaja por la API junto a la URL de la imagen, localizado por mercado como cualquier otro campo de contenido. Los componentes del frontend deberían tratar el valor como una propiedad obligatoria en lugar de derivarlo del nombre de archivo, y las imágenes sin texto suministrado deberían renderizar un atributo vacío en vez de un marcador. Las pipelines de imágenes responsivas que generan varias versiones mantienen una sola alternativa por activo, y la carga diferida nunca debe aplazar el atributo.

Casos de uso

En las fichas de producto cada imagen de la galería describe lo que la distingue, como una vista trasera, un detalle de tejido o una referencia de escala. En las páginas de listado la alternativa suele repetir el nombre del producto y la variante representada, lo que mantiene legible el marcado de la tarjeta. Los banners que llevan una oferta dentro del gráfico necesitan esa oferta también en texto, porque de lo contrario el mensaje se pierde sin imágenes. El contenido editorial y las galerías de usuarios siguen la misma regla, mientras que separadores y texturas decorativas permanecen mudos con un atributo vacío.

Relacionado

Más información: Image Optimization · SEO.