El texto alternativo para imágenes de producto, cuando es útil, explica a quien compra qué aporta una imagen concreta: el aspecto de un producto, un detalle mostrado en otra vista o la finalidad de un control basado en una imagen. El texto alternativo es una alternativa textual que un programa, como un lector de pantalla, puede usar para describir una imagen. Empieza por su finalidad en la página y, después de guardarlo, comprueba el texto en la tienda real.
Una galería puede parecer clara aunque todas las imágenes utilicen el mismo nombre del producto como texto alternativo. La vista frontal, el detalle del cierre y la variante de color pierden entonces sus diferencias en el texto. Proponemos revisar la galería del producto como una pequeña tarea editorial: quien edita el catálogo comprueba el texto y quien mantiene la tienda comprueba el resultado.
Por qué el texto alternativo para imágenes de producto pierde detalles útiles
La descripción útil depende de la función de la imagen y del contenido que la rodea. Las directrices del W3C sobre imágenes informativas piden que se transmita la información importante en ese contexto. Repetir un título, nombre de archivo o término de búsqueda en toda una galería puede omitir la característica que una fotografía concreta pretendía mostrar. Rellenar el campo es solo una parte del trabajo.
El nombre del producto se considera suficiente. Un nombre identifica el artículo, pero un primer plano puede aportar un detalle del cierre o de un bolsillo. Observa qué añade la fotografía más allá del título y la descripción cercana.
Se pasa por alto la función de la imagen. Una fotografía también puede ser un enlace o un botón de la galería. Las directrices del W3C sobre imágenes funcionales incluyen la acción o el destino en la decisión. El nombre accesible, es decir, la etiqueta que la tecnología de asistencia recibe para ese control, debe hacer comprensible su finalidad.
La entrada guardada se considera el resultado final. Mantén el campo administrativo y la página mostrada como puntos de comprobación separados. Una importación, una imagen reutilizada o una lógica de tema personalizada justifican inspeccionar el resultado renderizado, es decir, lo que la página correspondiente de la tienda expone realmente, antes de cambiar todo el catálogo.
Las directrices de Google sobre imágenes también advierten contra el uso excesivo de palabras clave en las alternativas. Escribe para el detalle o la acción que necesita quien compra. Una lista de términos de búsqueda no aporta esa explicación.
Decide qué aporta cada imagen
Revisa la imagen junto con el texto que la rodea y cualquier enlace o botón al que pertenezca. Pregúntate qué información o acción quedaría poco clara sin ella. El árbol de decisión del W3C distingue entre usos informativos, funcionales y decorativos. Una imagen reutilizada en otro lugar necesita una nueva decisión según su contexto. Una vista posterior de la galería no es decorativa automáticamente porque el nombre del producto ya haya aparecido.
Imagina una tienda ficticia que vende un bolso bandolera azul. Estos ejemplos de texto son inventados, no son descripciones comprobadas en un catálogo real.
| Ubicación | Decisión que debes revisar |
|---|---|
| Vista frontal | Describe el aspecto visible pertinente, como un bolso azul con una solapa curva. |
| Primer plano del cierre | Describe el detalle visible del cierre que aporta esta vista. |
| Otro color | Adapta la descripción a la fotografía y la variante seleccionada. |
| Control de galería formado solo por una imagen | Haz que la acción del control sea comprensible, como abrir la vista del cierre. |
| Repetición puramente decorativa | Considera una alternativa vacía de forma intencionada tras comprobar la información y la función. |
Una alternativa vacía significa usar intencionadamente el atributo alt="". Las directrices del W3C sobre imágenes decorativas distinguen esta opción de omitir el atributo. En una imagen de una tarjeta de producto incluida en un enlace, un texto suficiente dentro de ese mismo enlace puede hacer apropiada una alternativa vacía. Un nombre de producto separado y cercano no da nombre automáticamente a un enlace formado solo por una imagen.
Mantén la información detallada sobre tamaños o montaje disponible como contenido accesible de la página. Las directrices del W3C sobre imágenes complejas piden una explicación textual más completa cuando una alternativa breve no puede transmitir la información. Evita comprimir las instrucciones de un diagrama en una descripción breve y descartar el resto.
Escribe y guarda una muestra revisada
Prepara una muestra que puedas comprobar antes de aplicar el método a todo el catálogo. Usaríamos un registro con la URL de la página, el idioma, la variante seleccionada, la referencia de la imagen, su finalidad, el texto propuesto y el resultado de la comprobación. Una miniatura o una referencia clara al contenido multimedia ayuda a relacionar la fila con la imagen real, en vez de hacer suposiciones a partir del nombre de archivo.
- Registra lo que aporta la imagen. Escribe qué necesita quien compra de esta vista y qué ofrece ya el texto cercano. Indica si la imagen forma parte de un enlace o botón.
- Redacta una alternativa breve. Conserva el detalle visible que permite distinguirla. Comprueba el color y otros datos pertinentes con la fotografía correcta y el registro del catálogo. No deduzcas del aspecto el material, la capacidad ni una certificación.
- Revisa las sugerencias antes de aceptarlas. Una descripción generada es un borrador. Pide a quien edita el producto que compruebe lo que dice y la finalidad que cumple, incluida la variante seleccionada y el idioma.
- Comprueba los valores existentes que no tengan explicación. Si el campo contiene códigos de existencias o formatos inusuales, pregunta a quien mantiene la tienda si alguna lógica personalizada de la galería depende de ellos. Prueba los cambios en una vista previa autorizada u otra muestra reversible antes de sustituir esos valores en bloque.
- Guárdala mediante el campo de contenido multimedia correspondiente. La ayuda actual de Shopify para ordenadores indica que debes ir a Productos, abrir el producto y después su elemento multimedia. Elige Añadir texto alternativo, introduce el texto revisado y selecciona Guardar texto alternativo. Esta ruta corresponde al contenido multimedia del producto. Las imágenes incluidas en descripciones o secciones del tema pueden usar otra ubicación de edición.
- Transmite los problemas de implementación a quien mantiene la tienda. Si el campo o control no puede expresar la finalidad necesaria, proporciona la página, la referencia de la imagen y el resultado previsto. En nuestro método propuesto de trabajo en sitios web de comercio electrónico, este traspaso separa la decisión sobre el contenido del cambio del tema y su comprobación.
Comprueba la tienda antes de cambiar el catálogo
Abre la página correspondiente de la tienda después de guardar y comprueba exactamente la ubicación que has editado. Confirma la alternativa de la imagen, el nombre accesible de cualquier control al que pertenezca y qué ocurre al cambiar una variante o vista de la galería. Si no puedes inspeccionarlo, pide a quien mantiene la tienda que te muestre el resultado comparado con tu registro antes de ampliar la edición.
- Identifica la imagen real. Usa las herramientas de inspección del navegador, o pide ayuda a quien mantiene la tienda, para leer el atributo
altde la imagen renderizada. Compáralo con el texto preparado y la fotografía que se muestra en ese momento. - Comprueba el nombre y la acción del control. En un enlace o botón, inspecciona tanto la etiqueta expuesta a la tecnología de asistencia como la alternativa de la imagen. Comprueba que la acción o destino indicados coincidan con lo que ocurre al activar el control. La descripción de la imagen por sí sola puede no determinar el nombre completo del control.
- Cambia la vista y la variante. Abre el detalle del cierre, selecciona otro color visible y vuelve a comprobar el resultado correspondiente. Si una descripción permanece asociada a la imagen equivocada, registra esa secuencia exacta para quien mantiene la tienda.
- Vuelve a abrir la página y el idioma correspondiente. Comprueba que el cambio guardado siga presente en la ubicación prevista. Registra aparte los casos sin resolver, incluidos aquellos en los que deba investigarse un proceso de importación o traducción.
Una inspección en el navegador comprueba la implementación. Una revisión experta con un lector de pantalla puede examinar la tarea de compra con esa tecnología de asistencia. Deja claro el alcance de cada revisión. Las comprobaciones sencillas del W3C advierten que las revisiones preliminares no son definitivas. Por tanto, ni un campo rellenado ni esta muestra demuestran la accesibilidad de toda la tienda. Nuestras primeras comprobaciones de accesibilidad para tu sitio web abarcan tareas más amplias, como el uso del teclado y los formularios.
Mantén correctas las alternativas después de editar
Asigna la responsabilidad del texto de origen y repite la comprobación correspondiente cuando cambien la fotografía, la variante, el idioma, el tema o la importación. Si varios sistemas suministran el catálogo, averigua cuál controla el campo. Incluiríamos esa relación en un flujo de integración del catálogo y el CRM antes de ampliar las ediciones manuales que otro proceso podría sustituir.
Haz un seguimiento de las ubicaciones revisadas, los textos confirmados en la tienda y los casos sin resolver. Estos registros muestran el trabajo terminado y lo que aún requiere atención. No miden un efecto en las ventas. Mantén juntos la referencia de la imagen, el texto actual, la persona responsable de la edición y el desencadenante de la siguiente revisión, para que otra persona pueda mantener la misma decisión.
Cómo intervenimos
Empezaríamos por las vistas de un producto y acordaríamos qué debe comunicar cada una. Después, el traspaso conecta el texto de quien edita con la ubicación donde se guarda, el resultado en la tienda y cualquier comportamiento del control que siga sin resolverse. Empieza tu propio registro con un producto cuya galería muestre detalles distintos y comprueba la muestra antes de ampliarla.
