Inicio › Recursos › Por sistema

La accesibilidad con Shopify

Los temas y apps de Shopify deciden la accesibilidad. El checkout viene en gran parte impuesto por Shopify.

Hallazgos frecuentes

Colores del tema con muy poco contraste, imágenes de producto sin texto alternativo, apps de reseñas y pop-ups sin manejo por teclado, megamenús que solo se abren al pasar el ratón, carruseles sin pausa. El núcleo de Shopify normalmente no es el problema — lo son el tema, las apps y los contenidos creados en el editor de texto enriquecido.

Revisar y elegir el tema

El tema decide el contraste, el foco visible, la estructura de encabezados y el manejo por teclado del menú y los filtros. Criterios antes de elegir: recorre la página de inicio, una colección y una página de producto con el tabulador — ¿el foco siempre es visible? ¿Se abre el menú sin ratón? ¿El contraste del texto y los botones es de al menos 4,5:1? Los temas por defecto de Online Store 2.0 (Dawn y los derivados de él) son un buen punto de partida; en los temas de pago ayuda hacer la prueba de teclado en la demo y pedir al proveedor una declaración de accesibilidad.

Imágenes de producto, variantes y texto enriquecido

Da a cada imagen de producto en el administrador un texto alternativo que describa el contenido — no el nombre del archivo. Lo mismo vale para las imágenes de variantes. El texto incrustado como gráfico en una insignia o banner («Oferta», «Solo hoy») es invisible para los lectores de pantalla; usa texto real. En el editor de texto enriquecido de la descripción del producto, usa bien los niveles de encabezado (no basta con agrandar el texto) y las listas como listas reales.

Apps y widgets integrados

Las apps de reseñas, pop-ups, venta adicional y banner de cookies suelen inyectar sus propios widgets que atrapan el foco del teclado, no tienen etiquetas o muestran superposiciones sin forma de cerrarlas. Prueba cada app por separado con el teclado; las apps de carrusel y cuenta atrás necesitan una pausa y no deben hacer parpadear nada. Una superposición de accesibilidad como app no resuelve los problemas estructurales y es criticada por las asociaciones de personas afectadas. En caso de duda: quita la app.

Pago: lo que Shopify impone y lo que no

El pago estándar de Shopify lo mantiene Shopify y está en gran parte construido de forma accesible — ahí tienes pocas palancas. Lo que sí influye: las extensiones de pago y los campos personalizados (mensaje de regalo, verificación de edad) pueden dificultar el uso con teclado o lector de pantalla, y el camino hasta el pago — carrito, campo de código de descuento, elección de envío — está en el tema. Prueba también esos pasos.

Probar y preguntas frecuentes

Prueba rápida: maneja la página de inicio, una colección y una página de producto solo con el teclado, amplía al 200% en el navegador, ejecuta una extensión como WAVE o axe DevTools. El escaneo gratuito de a11yglass revisa además el HTML servido en cuanto a contraste, textos alternativos, etiquetas, idioma y estructura. ¿Mi tienda de Shopify necesita una declaración de accesibilidad? Por lo general sí — una tienda a través de la cual compran consumidores es comercio electrónico en el sentido del BFSG; véase la página sobre la declaración de accesibilidad. ¿El pago de Shopify ya es accesible? En gran medida responsabilidad de Shopify, pero las extensiones pueden romperlo. ¿Qué tema es accesible? No hay un sello — lo decisivo es la implementación en el caso concreto.

Cómo ayuda a11yglass

El escaneo gratuito comprueba el HTML y el CSS entregados en busca de incumplimientos de las WCAG detectables automáticamente e indica en cada hallazgo el criterio de conformidad y una medida concreta. Detecta aproximadamente el 20–35 % de los problemas y no sustituye una auditoría completa.

Seguir leyendo

Información general según nuestro leal saber y entender, sin valor de asesoramiento jurídico. Para un caso concreto, consultar a un despacho especializado en derecho de las tecnologías de la información.