Guía · Shopify
Accesibilidad en Shopify: la checklist práctica en 25 puntos
Última actualización
Información general, no asesoramiento jurídico. Para su caso concreto, consulte a un abogado.
Esta checklist reúne 25 puntos que conviene revisar en una tienda Shopify, ordenados por el lugar donde se corrigen: el tema, las imágenes, la navegación con teclado, los formularios y el pago, las apps de terceros y la documentación. Para cada punto indicamos dónde está en Shopify, cómo comprobarlo y el criterio de las WCAG 2.1 con el que se relaciona. Por qué importa todo esto desde el 28 de junio de 2025 se explica en El EAA para las tiendas Shopify en España.
En resumen
- La referencia técnica es la norma EN 301 549 V3.2.1, es decir, las WCAG 2.1 de nivel AA.
- En las páginas de inicio Shopify con dominio .es, los fallos automáticos más frecuentes son el contraste (72,3 %), los enlaces sin nombre (55,7 %) y las imágenes sin texto alternativo (40,5 %).
- La mayoría de los puntos se corrigen en el editor de temas o en la ficha de producto, sin programar.
- Las apps de terceros también forman parte de su tienda: revíselas igual.
- Las pruebas automáticas solo detectan una parte de las barreras; la checklist incluye pruebas manuales.
Qué muestran los datos de las tiendas .es
En nuestro estudio de 5.463 páginas de inicio Shopify en la UE (en inglés), 296 páginas tenían un dominio .es. El 93,9 % de ellas falló al menos una prueba automática de las WCAG 2.1 A/AA. Los fallos más frecuentes:
| Prueba | Páginas con fallo |
|---|---|
| Contraste de color insuficiente | 72,3 % |
| Enlaces sin nombre accesible | 55,7 % |
| Imágenes sin texto alternativo | 40,5 % |
| Botones sin nombre accesible | 17,6 % |
| Zoom bloqueado | 14,2 % |
Límites: son datos del rastreo de HTTP Archive del 1 de septiembre de 2026, versión móvil, solo páginas de inicio y solo pruebas automáticas. Las tiendas en .com u otros dominios genéricos no están incluidas, y las páginas de producto, carrito y pago tampoco. Una página sin fallos automáticos no es necesariamente accesible.
Antes de empezar
Prepare una lista de las plantillas que generan ventas: inicio, colección, producto, búsqueda, carrito y pago. Revise cada punto en esas páginas, en móvil y en escritorio. Para las pruebas manuales basta con el teclado (Tab, Mayús+Tab, Intro, Espacio, Escape) y un lector de pantalla gratuito: NVDA en Windows o VoiceOver en Mac e iPhone. Una revisión automática gratuita le da una primera lista de fallos detectables por máquina.
Tema y colores
| Punto | Dónde en Shopify | Cómo comprobarlo | Criterio WCAG |
|---|---|---|---|
| 1. Contraste del texto de al menos 4,5:1 (3:1 en textos de 24 px o más) | Editor de temas, ajustes de colores | Mida texto, botones y precios con una herramienta de contraste | 1.4.3 Contraste (mínimo) |
| 2. Contraste de 3:1 en bordes de campos, iconos y controles | Editor de temas, ajustes de colores | Mida el borde de los campos del boletín y de la búsqueda | 1.4.11 Contraste no textual |
| 3. Texto legible sobre banners, vídeos y diapositivas | Secciones de imagen y presentación del editor de temas | Mida el contraste sobre la zona más clara de la imagen | 1.4.3 Contraste (mínimo) |
| 4. Enlaces del texto distinguibles sin depender solo del color | Estilos del tema | Mire un párrafo con enlace en blanco y negro | 1.4.1 Uso del color |
| 5. Zoom permitido | Etiqueta meta viewport en layout/theme.liquid | Amplíe la página en el móvil; no debe haber maximum-scale=1 ni user-scalable=no | 1.4.4 Cambio de tamaño del texto |
| 6. Idioma de la página declarado | Atributo lang de la etiqueta html del tema | Vea el código fuente: lang="es" en la versión en español | 3.1.1 Idioma de la página |
| 7. Carruseles y vídeos que se pueden pausar | Secciones de presentación y vídeo | Si algo se mueve solo, busque un botón de pausa accesible con teclado | 2.2.2 Poner en pausa, detener, ocultar |
El Centro de ayuda de Shopify sobre accesibilidad en los temas recomienda los mismos umbrales de contraste, evitar la reproducción automática y no eliminar el indicador de foco. En el código del tema Dawn, la etiqueta viewport no bloquea el zoom y el idioma se toma de la configuración de la tienda (Dawn, layout/theme.liquid). Si usa otro tema o lo ha modificado, compruebe ambos puntos en su propio código.
Imágenes
| Punto | Dónde en Shopify | Cómo comprobarlo | Criterio WCAG |
|---|---|---|---|
| 8. Texto alternativo en las imágenes de producto | Productos, multimedia del producto, «Agregar texto alternativo»; en bloque, columna Image alt text del CSV | Exporte el CSV y busque celdas vacías | 1.1.1 Contenido no textual |
| 9. Texto alternativo en banners e imágenes del tema | Editor de temas, sección con la imagen, «Editar» | Revise cada sección de imagen de la página de inicio | 1.1.1 Contenido no textual |
| 10. Sin información importante solo dentro de imágenes | Banners de promociones, tablas de tallas en imagen | Si una imagen contiene texto (descuento, plazo), repítalo en texto real | 1.4.5 Imágenes de texto |
Shopify explica cómo añadir texto alternativo a las imágenes de producto y a las imágenes del tema. En el CSV de productos, la columna Image alt text admite hasta 512 caracteres; Shopify recomienda 125 o menos. Describa lo que la imagen aporta («Vestido midi de lino verde, vista trasera»), no repita el nombre del archivo.
Navegación por teclado
| Punto | Dónde en Shopify | Cómo comprobarlo | Criterio WCAG |
|---|---|---|---|
| 11. Todo se puede usar con el teclado | Todo el escaparate | Recorra inicio, producto y carrito solo con Tab, Intro y Espacio | 2.1.1 Teclado |
| 12. Foco siempre visible | Estilos del tema (CSS) | Al pulsar Tab, debe ver en todo momento dónde está | 2.4.7 Foco visible |
| 13. Enlace para saltar al contenido | Plantilla del tema | Pulse Tab al cargar la página: debe aparecer «Ir directamente al contenido» o similar | 2.4.1 Evitar bloques |
| 14. Menús, cajones y ventanas sin trampas | Menú móvil, cajón del carrito, búsqueda | Ábralos y ciérrelos con teclado; Escape debe cerrar y el foco no debe quedar atrapado | 2.1.2 Sin trampas para el foco del teclado |
| 15. Enlaces y botones con nombre | Iconos de carrito, cuenta, búsqueda, redes sociales; tarjetas de producto | Con el lector de pantalla, cada icono debe anunciar su función | 2.4.4 Propósito de los enlaces; 4.1.2 Nombre, función, valor |
Los enlaces sin nombre son el segundo fallo más frecuente en las tiendas .es del estudio. Suelen ser iconos sin texto o imágenes enlazadas sin texto alternativo. En Dawn existe un enlace para saltar al contenido, traducido al español como «Ir directamente al contenido» en los archivos de idioma del tema.
Formularios, carrito y pago
| Punto | Dónde en Shopify | Cómo comprobarlo | Criterio WCAG |
|---|---|---|---|
| 16. Campos con etiqueta visible o accesible | Boletín, contacto, búsqueda, cuenta | El lector de pantalla debe leer la etiqueta de cada campo | 1.3.1 Información y relaciones; 3.3.2 Etiquetas o instrucciones |
| 17. Errores explicados en texto | Formularios de contacto y de cuenta | Envíe un formulario vacío: el error debe decir qué falta, no solo marcar en rojo | 3.3.1 Identificación de errores |
| 18. Selector de variantes usable | Página de producto (talla, color) | Elija talla y color con teclado; el lector debe anunciar la opción elegida | 4.1.2 Nombre, función, valor |
| 19. Cambios del carrito anunciados | Añadir al carrito, cajón del carrito, cantidades | Con el lector de pantalla, al añadir un producto debe oírse una confirmación | 4.1.3 Mensajes de estado |
| 20. Pago completo sin ratón | Pago (gestionado por Shopify) y apps o extensiones de pago | Haga un pedido de prueba solo con teclado y con lector de pantalla | 2.1.1 Teclado; 1.4.3 Contraste (mínimo) |
La directiva exige expresamente funciones de pago accesibles. El pago de Shopify no lo programa usted, pero sí elige sus colores, logotipo y extensiones. Pruebe el recorrido completo y anote lo que puede cambiar y lo que no.
Apps de terceros
| Punto | Dónde en Shopify | Cómo comprobarlo | Criterio WCAG |
|---|---|---|---|
| 21. Banner de cookies accesible | App o banner de consentimiento | Debe recibir el foco, aceptarse y rechazarse con teclado y tener contraste suficiente | 2.1.1 Teclado; 1.4.3 Contraste (mínimo) |
| 22. Reseñas con valoración en texto | App de reseñas en producto y colección | Las estrellas deben leerse como texto («4,5 de 5») | 1.1.1 Contenido no textual |
| 23. Chat y ventanas emergentes que se pueden cerrar | Apps de chat, descuentos, boletín | Ciérrelas con teclado; no deben tapar el botón de compra ni robar el foco | 2.1.2 Sin trampas para el foco del teclado; 2.4.3 Orden del foco |
Cada app añade su propio código al escaparate. Si encuentra una barrera, comuníquela al desarrollador con una descripción y una captura, y busque alternativas si no hay respuesta.
Información de accesibilidad y seguimiento fechado
| Punto | Dónde en Shopify | Cómo comprobarlo | Criterio WCAG |
|---|---|---|---|
| 24. Información de accesibilidad publicada | Tienda online, Páginas; enlace en el menú del pie de página | La página existe, está enlazada y su fecha es reciente | No es un criterio WCAG: Ley 11/2023, art. 13 |
| 25. Revisiones con fecha | Fuera de Shopify: su registro de revisiones | Repita la checklist tras cada cambio de tema o de app y guarde el resultado con la fecha | No es un criterio WCAG: seguimiento (art. 13.2) |
Qué debe contener esa página y un modelo para adaptarla están en nuestra guía sobre la información de accesibilidad de una tienda online.
Los límites de esta checklist
Una checklist ayuda a no olvidar lo importante, pero no sustituye una auditoría. Las herramientas automáticas encuentran solo una parte de las barreras: en una prueba del Gobierno británico, diez herramientas juntas detectaron el 71 % de 143 barreras creadas a propósito y la mejor por sí sola el 41 % (GOV.UK, 2017). Para las páginas con más ventas, una revisión manual por una persona con experiencia en accesibilidad, o pruebas con usuarios con discapacidad, aporta lo que ninguna herramienta ve.
Cómo ayuda Testamur
Testamur es una app de Shopify en desarrollo. La revisión gratuita ya está disponible: analiza la página de inicio y, si su robots.txt lo permite, páginas de colección, producto y legales, y vincula cada fallo con las WCAG y la norma EN 301 549. La app propondrá correcciones en el código del tema y guardará un registro fechado de revisiones, correcciones y versiones de su información de accesibilidad. No es un widget superpuesto y no sustituye las pruebas manuales.
Fuentes
- W3C: Web Content Accessibility Guidelines (WCAG) 2.1 (en inglés)
- W3C: traducciones de las WCAG (para la 2.1 no hay aún traducción al español publicada)
- Centro de ayuda de Shopify: accesibilidad en los temas
- Centro de ayuda de Shopify: texto alternativo de las imágenes de producto
- Centro de ayuda de Shopify: archivo CSV de productos
- Código del tema Dawn: layout/theme.liquid (GitHub)
- Ley 11/2023, de 8 de mayo (BOE)
- GOV.UK Accessibility blog: prueba de herramientas automáticas (2017, en inglés)
Revise su tienda gratis
Vea qué barreras encuentra una revisión automática en su propia tienda Shopify: la página de inicio y, si su robots.txt lo permite, páginas de colección, producto y legales, vinculadas a las WCAG y a la norma EN 301 549. Gratis, resultado por correo electrónico. Las pruebas automáticas solo detectan una parte de las barreras.
Revisar mi tienda gratisPreguntas frecuentes
¿Es accesible un tema de Shopify por defecto?
Un buen tema es un punto de partida, no un resultado. Los colores que elija, los textos alternativos que escriba y las apps que instale cambian la accesibilidad de la tienda. Shopify indica en su Centro de ayuda que seguir solo sus pautas no basta para que una tienda sea accesible.
¿Qué norma debo seguir para la accesibilidad de mi tienda Shopify?
La referencia técnica para la web es la norma EN 301 549 V3.2.1, que incorpora las WCAG 2.1 de nivel AA. La versión V4.1.1, con las WCAG 2.2, se publicó en septiembre de 2026, pero todavía no es la referencia jurídica.
¿Basta con una auditoría automática de accesibilidad?
No. Las herramientas automáticas detectan solo una parte de las barreras. Úselas para encontrar lo evidente y repetirlo con frecuencia, y complételas con pruebas manuales con teclado y lector de pantalla en las páginas que generan ventas.
¿Puedo revisar el texto alternativo de muchos productos a la vez?
Sí. La exportación CSV de productos de Shopify incluye la columna Image alt text. Puede exportar, completar los textos que faltan y volver a importar el archivo. Revise antes la documentación de Shopify sobre cómo la importación sobrescribe los productos existentes.
¿Soy responsable de las barreras de las apps que instalo?
Usted presta el servicio a sus clientes, así que la tienda en su conjunto es su responsabilidad. Compruebe las apps visibles en el escaparate, comunique las barreras al desarrollador y nómbrelas en su información de accesibilidad mientras no estén corregidas.