¿Mi tienda Shopify tiene que cumplir la ley europea de accesibilidad? Qué exige y cómo auditar el theme - PangoStudio
¿Mi tienda Shopify tiene que cumplir la ley europea de accesibilidad? Qué exige y cómo auditar el theme

¿Mi tienda Shopify tiene que cumplir la ley europea de accesibilidad? Qué exige y cómo auditar el theme

Sí, si vendes a consumidores en la Unión Europea y no eres microempresa (menos de 10 personas empleadas y menos de 2 millones de euros de volumen de negocio o de balance). La Directiva (UE) 2019/882 —la European Accessibility Act— se aplica a los servicios de comercio electrónico desde el 28 de junio de 2025. El nivel técnico exigible es la norma EN 301 549, cuyo capítulo de web remite a WCAG 2.1 nivel AA.

En España la transposición es la Ley 11/2023, de 8 de mayo. No es una recomendación de buenas prácticas: hay obligación, hay autoridades de vigilancia y hay multas. Y afecta al front de tu tienda, que en Shopify significa a tu theme.

¿Qué exige realmente, más allá de decir «WCAG 2.1 AA»?

La directiva no cita WCAG. Cita requisitos funcionales y remite a normas armonizadas; la que cubre web es EN 301 549, y su cláusula 9 recoge los 50 criterios de WCAG 2.1 en niveles A y AA. Cumplirlos te da presunción de conformidad. Los que más se caen en una tienda:

  • 1.4.3 Contraste mínimo: 4,5:1 para texto normal, 3:1 para texto grande (a partir de 24 px, o 18,66 px en negrita).
  • 1.4.11 Contraste no textual: 3:1 para bordes de campos, iconos funcionales y estados de los selectores de variante.
  • 1.4.10 Reflow: la página tiene que funcionar a 320 px de ancho equivalente (zoom del 400 %) sin scroll horizontal.
  • 2.4.7 Foco visible y 2.1.2 Sin trampas de teclado.
  • 3.3.1 / 3.3.2 Errores y etiquetas en todos los formularios.
  • 4.1.2 Nombre, función, valor: todo control tiene que anunciarse a un lector de pantalla.

Hay además una obligación que casi nadie ha visto: el Anexo V pide que el prestador del servicio explique en las condiciones generales cómo cumple los requisitos de accesibilidad. Es una página que hay que escribir y publicar, no solo código que arreglar.

¿Hay alguna prórroga que me salve?

Tres, y ninguna te deja fuera del todo:

  • Microempresas de servicios: exentas de los requisitos de accesibilidad. El umbral es el de la Recomendación 2003/361/CE y se mira empresa a empresa, no tienda a tienda.
  • Régimen transitorio: los contratos de servicios firmados antes del 28 de junio de 2025 pueden seguir sin cambios hasta el 28 de junio de 2030 como máximo. Esto cubre contratos, no tu escaparate público.
  • Carga desproporcionada: existe (artículo 14), pero exige una evaluación documentada, conservada y revisable, y hay que rehacerla cuando cambia el servicio. Es un expediente, no una excusa verbal.

¿Qué falla de forma sistemática en un theme de Shopify?

Después de auditar themes de Dawn y de sus derivados comerciales, los fallos se repiten con una regularidad aburrida. Shopify exige un mínimo de accesibilidad a los themes del Theme Store, pero ese mínimo es un suelo, y además lo que rompe casi siempre es la personalización posterior: el color de marca, los swatches a medida y los bloques que ha metido una app.

Qué falla Dónde vive Criterio Se arregla o se rehace
Texto blanco sobre el naranja de marca Configuración del theme / CSS 1.4.3 Se arregla: cambiar el texto del botón a negro o oscurecer el acento
outline: none global base.css del theme 2.4.7 Se arregla: sustituir por :focus-visible con contorno de 2 px
Variante agotada indicada solo por una raya diagonal Sección de producto 1.4.1, 4.1.2 Se rehace el bloque: añadir texto y aria-disabled
Swatches como
con onclick
Snippet de variantes 2.1.1, 4.1.2 Se rehace: radios reales dentro de un fieldset con legend
Drawer de carrito sin foco atrapado ni cierre con Escape cart-drawer.js 2.4.3, 2.1.2 Se rehace: role="dialog", aria-modal, gestión de foco
Contador del carrito que cambia en silencio Cabecera 4.1.3 Se arregla: región aria-live="polite"
Placeholder usado como etiqueta Newsletter, contacto 3.3.2 Se arregla: visible
Error de formulario no vinculado al campo Contacto, login 3.3.1 Se arregla: aria-describedby + aria-invalid
Slider de la barra de anuncios en automático Sección announcement 2.2.2 Se rehace o se desactiva la rotación
Cabecera sticky que se come la pantalla al 400 % CSS del header 1.4.10 Se arregla: position: static por debajo de cierta altura

Un ejemplo con números, porque el contraste del acento es el fallo número uno. Un naranja tipo #FF5C00 da 3,1:1 contra blanco: pasa como componente de interfaz (3:1) y suspende como texto (4,5:1). Contra negro da 6,8:1. O sea que el botón puede seguir siendo naranja; lo que tiene que cambiar es la letra.

¿Cómo audito mi theme sin perder una semana?

Shopify juega a favor: la tienda no tiene mil páginas distintas, tiene ocho plantillas. Audita una de cada y cubres casi todo.

  1. Pasa Lighthouse (categoría Accessibility) sobre index, collection, product, cart, page.contact, customers/login, search y article. Lighthouse usa axe-core por debajo.
  2. Repite con la extensión axe DevTools, que da más detalle y agrupa por criterio.
  3. Asume que lo automático no basta. Deque, la empresa que mantiene axe, sitúa la detección automática en torno al 57 % de los problemas. El resto sale a mano.
  4. Recorrido solo con teclado: Tab desde la cabecera hasta pagar. Anota dónde desaparece el foco, dónde te quedas encerrado y qué no se puede activar con Enter o Espacio.
  5. Zoom al 400 % en un viewport de 1280 px y comprueba que no aparece scroll horizontal.
  6. Media hora con NVDA o VoiceOver en la ficha de producto: si el lector no dice qué talla has elegido ni si está agotada, tienes trabajo en el selector de variantes.

¿El checkout también es cosa mía?

El checkout lo construye y lo mantiene Shopify, y ahí tu margen es escaso. Pero ante la autoridad el prestador del servicio eres tú, así que sí entra en el alcance: revisa lo que sí controlas —extensiones de checkout, campos personalizados, la página de agradecimiento y los correos transaccionales— y documenta el resto como componente de terceros dentro de tu declaración de accesibilidad.

¿Y si no cumplo?

El régimen sancionador español se apoya en los tramos del Real Decreto Legislativo 1/2013, que llegan hasta 1.000.000 € en las infracciones muy graves. En la práctica el disparador suele ser una reclamación de una persona usuaria o de una asociación, no una inspección de oficio. El coste real más probable no es la multa máxima: es el expediente, el plazo de subsanación y tener que tocar el theme con prisa.

Add comment: