Cinco cosas, casi siempre las mismas: el contraste del color de marca, el foco de teclado en el carrito lateral, el selector de variantes sin etiquetas asociadas, los popups de descuento que no se cierran con Escape y el vídeo de portada que se reproduce solo sin botón de pausa. Se miden con axe, teclado y un lector de pantalla.
Casi todo eso vive en el tema, no en Shopify. Y casi todo se detecta en una tarde si sabes dónde mirar.
¿A quién obliga la ley y desde cuándo?
La Directiva (UE) 2019/882, la llamada Ley Europea de Accesibilidad, se aplica desde el 28 de junio de 2025. En España la traspone la Ley 11/2023, de 8 de mayo. El comercio electrónico dirigido a consumidores entra de lleno: la web, la app, el proceso de compra y la información de accesibilidad del propio producto que vendes.
Hay dos matices que conviene tener claros antes de correr:
- Microempresas de servicios exentas: menos de 10 personas empleadas y un volumen de negocio anual o balance general que no supere los 2 millones de euros. Si estás por encima de cualquiera de los dos umbrales, no te aplica la exención.
- Prórroga por contratos previos: los contratos de servicio celebrados antes del 28 de junio de 2025 pueden seguir sin cambios hasta que expiren, y como máximo hasta el 28 de junio de 2030. Es una ventana estrecha y no cubre una tienda que sigue vendiendo a clientes nuevos.
Una tienda estrictamente B2B, con acceso cerrado y sin venta a consumidores, queda fuera del alcance de la directiva. En cuanto hay carrito abierto al público, dentro.
¿Hay que cumplir WCAG o EN 301 549?
La ley no menciona ningún criterio técnico: exige requisitos funcionales (perceptible, operable, comprensible, robusto). Quien los traduce a algo comprobable es la norma armonizada EN 301 549, cuyo capítulo de contenido web incorpora directamente los criterios de WCAG 2.1 en nivel AA. Cumplir WCAG 2.1 AA es lo que te da presunción de conformidad.
WCAG 2.2 añade criterios (foco no tapado, alternativas al arrastre, tamaño de área táctil) que todavía no son exigibles por esta vía, pero que un tema decente ya cumple casi sin querer. No es donde deberías empezar.
¿Dónde revientan los temas de Shopify?
Dawn y los temas del Theme Store parten de una base razonable. Lo que rompe la accesibilidad es lo que viene después: el color corporativo que se mete en los ajustes, el carrito lateral rehecho a mano, las cuatro apps que inyectan modales y el vídeo del hero. Esto es lo que encontramos una y otra vez al auditar:
| Qué falla | Criterio | Cómo se detecta | Dónde se arregla |
|---|---|---|---|
| El acento de marca sobre blanco no llega a 4,5:1 en el botón de compra | 1.4.3 | axe / medidor de contraste | Ajustes de color del tema |
| El carrito lateral se abre y el foco sigue en la página de detrás; Escape no cierra | 2.1.2, 2.4.3 | Solo teclado | JS del componente del tema |
| Selector de variantes con divs clicables o un select sin etiqueta asociada | 1.3.1, 4.1.2 | Lector de pantalla | Liquid del tema |
| Popup de descuento sin rol de diálogo y sin devolver el foco al cerrar | 2.4.3, 4.1.2 | Solo teclado | App de terceros o desarrollo |
| Vídeo de portada en reproducción automática sin botón de pausa | 2.2.2 | Revisión manual | Sección del tema |
| «Producto añadido» que aparece en pantalla pero no se anuncia | 4.1.3 | Lector de pantalla | Región aria-live en el tema |
| Imágenes de producto con el nombre del fichero como texto alternativo | 1.1.1 | axe + revisión | Catálogo, no el tema |
El del contraste merece un apunte, porque es el que más discusiones abre con la parte de marca. Los naranjas, verdes claros y amarillos corporativos casi nunca alcanzan 4,5:1 sobre blanco; los azules y granates oscuros pasan sin tocar nada. La salida razonable no es cambiar la marca: es definir una variante oscurecida del acento para texto y botones, y conservar el color original en franjas, iconos decorativos y bordes, donde el criterio aplicable (1.4.11) solo pide 3:1.
¿Con qué se mide de verdad?
Cuatro herramientas, en este orden:
- axe DevTools (extensión de navegador) sobre portada, colección, ficha de producto y carrito. Es el motor de referencia y da el criterio WCAG incumplido y el nodo exacto.
- Lighthouse, que usa un subconjunto de axe. Sirve como termómetro rápido, no como certificado: se puede sacar un 100 y seguir incumpliendo, porque no navega, no abre modales y no toca el carrito lateral.
- El teclado, sin ratón. Tabulador desde el logo hasta el botón de pago. Aquí caen el 90 % de los fallos que ninguna herramienta automática ve: focos invisibles, órdenes de tabulación absurdos, modales de los que no se sale.
- Un lector de pantalla real: NVDA en Windows o VoiceOver en Mac. Diez minutos comprando a ciegas dicen más que cualquier informe.
Conviene calibrar expectativas con lo automático. Deque, la empresa que desarrolla axe, sitúa en torno al 57 % los problemas que su motor detecta sin intervención humana; otras mediciones lo bajan al 30 %. El resto exige que alguien navegue. Y como referencia del punto de partida del sector, el informe WebAIM Million lleva años encontrando fallos detectables automáticamente en cerca del 95 % de las portadas analizadas, con el contraste de texto como problema más repetido.
Para que no se vuelva a romper, Pa11y CI o axe-core en el pipeline, contra las URLs críticas del tema en preview, bloqueando el despliegue si aparece un fallo nuevo. Cuesta una tarde montarlo y evita que el arreglo dure hasta la siguiente campaña.
¿Qué se arregla en el tema y qué exige desarrollo?
Con ajustes del tema y algo de CSS se resuelven el contraste, el foco visible (nunca elimines el outline sin sustituirlo por algo con 3:1 de contraste), los tamaños de texto y el enlace de salto al contenido. Es media jornada.
Exigen tocar código: el atrapado de foco del carrito lateral, la reconstrucción del selector de variantes sobre fieldset, legend e input con etiqueta, las regiones aria-live para los avisos del carrito y el control de pausa del vídeo. Son entre 3 y 10 jornadas según lo personalizado que esté el tema.
Caso aparte: las apps. Un popup de captación o un buscador que inyecta su propio HTML no se arregla desde tu tema. O el proveedor lo corrige, o se sustituye. Al auditar el catálogo de apps merece la pena mirarlo junto al coste y al impacto en velocidad, porque suelen ser las mismas.
¿Y el checkout de Shopify, que no puedo tocar?
La obligación legal recae sobre ti como prestador del servicio, pero el marcado del checkout es de Shopify y no se edita salvo con las extensiones disponibles en Plus. En la práctica: audita lo que controlas, documenta lo que no, y en Plus revisa que tus propias extensiones de checkout no introduzcan campos sin etiqueta ni pasos que solo funcionen con ratón. Las páginas de cuenta de cliente están en la misma situación.
¿Qué pasa si no se hace nada?
En España el régimen sancionador se apoya en el texto refundido de la Ley General de derechos de las personas con discapacidad (Real Decreto Legislativo 1/2013), con multas de hasta 30.000 euros en infracciones leves, de 30.001 a 90.000 en graves y de 90.001 a 1.000.000 en muy graves. La vía más frecuente no es la inspección de oficio, sino la denuncia de un usuario que no ha podido comprar. Y esa es también la parte que no aparece en el expediente: cada uno de esos usuarios es un carrito que no se cerró.
