Shopify
Accesibilidad en Shopify: qué falla de serie y cómo se arregla
Shopify es una buena plataforma y aun así casi ninguna tienda de Shopify cumple. No es una contradicción: la parte que Shopify controla —el checkout alojado, la infraestructura— está razonablemente cuidada, pero la parte que decide si un cliente puede comprar está en tu tema, y el tema es tuyo. Esta página va componente por componente: qué falla, qué criterio incumple y qué se cambia exactamente.
Shopify no te hace cumplir ni te impide cumplir. El checkout alojado te ayuda; el tema (Dawn incluido) llega con barreras conocidas en el menú, la galería de producto, el selector de variantes, el cajón del carrito y la búsqueda predictiva. Todas se corrigen tocando ficheros .liquid, JavaScript y CSS del tema: ninguna se arregla desde el panel de administración.
Lo que pone Shopify y lo que pones tú
Conviene separarlo bien, porque casi todo el ruido comercial mezcla las dos cosas.
Lo que pone Shopify: el checkout alojado, que la plataforma mantiene y mejora sin que tú toques nada, y los componentes base de sus temas oficiales, que han ido mejorando versión a versión.
Lo que pones tú: el tema y sus personalizaciones, las apps que instalas (los popups y los buscadores de terceros son los peores infractores), tus imágenes y su texto alternativo, y los textos de tus fichas. Aquí es donde está el 90 % de lo que encuentra una auditoría.
Un matiz que importa si vendes en Europa: que el checkout esté cuidado no te exime, porque la obligación mira al servicio completo, no a un tramo.
Las siete barreras que salen casi siempre
| Componente | Qué falla | WCAG | La corrección |
|---|---|---|---|
Menú y desplegablesheader.liquid | El botón del menú no actualiza aria-expanded y los megamenús atrapan el foco del teclado. | 4.1.2 · 2.1.1 | Actualizar aria-expanded al abrir y cerrar, y enlazar el submenú con aria-controls. |
Galería del productoproduct-media-gallery.liquid | Las miniaturas son botones sin nombre accesible y las flechas solo tienen icono. | 1.1.1 · 2.4.4 | Poner aria-label del tipo «Ver imagen 2 de 7» y marcar la activa con aria-current. |
Selector de variantesproduct-variant-picker.liquid | El color elegido se distingue solo por el color, y las variantes agotadas no se anuncian. | 1.4.1 · 1.3.1 | Agrupar en fieldset con legend, usar radios reales y añadir «Agotado» como texto oculto. |
Cajón del carritocart-drawer (JS) | Al abrirlo el foco se queda detrás, Escape no cierra y al cerrar el foco no vuelve. | 2.4.3 · 2.1.2 | Mover el foco al abrir, retenerlo dentro, cerrar con Escape y devolverlo al botón de origen. |
Búsqueda predictivapredictive-search.liquid | Los resultados aparecen sin anunciarse: quien no ve la pantalla no sabe que hay resultados. | 4.1.3 · 1.3.1 | Anunciar el número de resultados con role="status" y aria-live="polite". |
Pie de páginafooter.liquid | El campo de la newsletter usa el texto gris como etiqueta y los iconos sociales no tienen nombre. | 3.3.2 · 1.1.1 | Etiqueta real oculta asociada con for, y aria-label en cada icono. |
Contrastes y focobase.css | La etiqueta de rebajas y los botones desactivados se quedan por debajo de 4,5:1; el foco apenas se ve. | 1.4.3 · 2.4.7 | Oscurecer esos colores y dar al foco un contorno de 3 px con separación. |
Los nombres de fichero corresponden a Dawn y a los temas oficiales que derivan de él. En un tema de pago la ruta cambia, el problema no.
Por qué el widget de la app store no lo resuelve
En el App Store de Shopify hay decenas de widgets de accesibilidad por 20–50 € al mes. Ninguno corrige lo de la tabla de arriba, porque ninguno reescribe tu tema: añaden una capa encima con botones de contraste y tamaño de letra. El foco que se pierde al abrir el cajón del carrito se sigue perdiendo, y el selector de tallas sigue sin decir qué talla está elegida.
Peor: algunos inyectan ARIA incorrecta sobre elementos que ya estaban bien y empeoran la experiencia con lector de pantalla. Si ya tienes uno instalado, no lo quites hoy mismo — pero no cuentes con él como cumplimiento.
Prueba tu tienda en diez minutos, sin herramientas
- Guarda el ratón. Desde la portada, llega a un producto, elige una variante, añádelo al carrito y entra al pago usando solo Tab, Mayús+Tab, Intro y las flechas.
- Mira dónde está el foco en cada paso. Si en algún momento no sabes qué elemento está seleccionado, ese es un fallo de 2.4.7.
- Abre el cajón del carrito y pulsa Escape. Debe cerrarse y devolver el foco al botón que lo abrió.
- Amplía la página al 200 %. Nada debe solaparse ni obligar a desplazarse en horizontal.
- Desactiva las imágenes del navegador. Si tus fichas se quedan mudas, te falta texto alternativo.
Si algo de esto falla, ya tienes la lista de lo que hay que arreglar antes de pensar en declaraciones ni certificados.
¿Quieres el listado completo de tu tienda?
El escaneo gratuito te da un primer mapa de las barreras de tu tienda en unos minutos: sin cuenta, sin tarjeta y sin compromiso.