SevirantaHacer accesible tu tienda Shopify: una guía práctica
5 de junio de 2026
Respuesta corta. Shopify sienta una buena base, pero no entrega una tienda accesible "recién sacada de la caja". La mayoría de los errores están en tu tema, tu contenido y tus apps, y precisamente esos puedes resolverlos a menudo de una sola vez para todo el tema. Repasa los seis puntos de abajo (contraste, textos alternativos, encabezados, apps, teclado, idioma) y tendrás cubierta la mayor parte.
¿Por qué Shopify por sí solo no basta?
Un tema de Shopify es una plantilla. Que tu web cumpla las WCAG depende de cómo esté construido ese tema, qué colores elegiste, qué apps instalaste y cómo rellenaste tus productos. Por eso dos tiendas con el mismo tema pueden puntuar de forma muy distinta. La buena noticia: como mucho se repite a través del tema, una sola corrección cubre a menudo cientos de páginas.
1. Comprueba el contraste de color
El error más frecuente. En tu panel ve a Online Store → Themes → Customize → Theme settings (engranaje) → Colors y asegúrate de que el texto y el fondo tengan al menos un contraste de 4,5:1 (3:1 para texto grande). Fíjate sobre todo en los textos de los botones, las etiquetas de precio, los enlaces y en el texto sobre tu botón Add to cart. Ajústalo bien una vez y rige para toda la tienda. Consulta contraste de color: el requisito WCAG y cómo medirlo.
2. Pon textos alternativos a las fotos de tus productos
Ve a Products, haz clic en un producto y baja hasta Media → haz clic en la imagen →
Add alt text. Describe de forma breve y objetiva lo que se ve (p. ej. "Zapato de hombre de
ante negro con cordones"), sin lenguaje de marketing. Empieza por tus productos más vendidos y los
banners de tu página de inicio. Las imágenes decorativas reciben un alt vacío (alt="").
3. Comprueba la estructura de encabezados
Usa los encabezados en orden lógico (H1 → H2 → H3) y no solo para el formato. En el editor de Shopify ves los encabezados reflejados en tus secciones y bloques de texto enriquecido; no te saltes niveles.
4. Presta atención a tus apps
Esta suele ser la mayor fuente de problemas. Las apps de reseñas, chat, pop-ups y filtros inyectan su propio código —a menudo mediante iFrames o el Shadow DOM— en tu tema, y ese código contiene con frecuencia botones sin nombre, ARIA incorrecto o elementos que no se pueden manejar con el teclado. Así que no instales a ciegas cualquier app y prueba siempre tu web con las apps activas. Si una app resulta inaccesible, cámbiate a una alternativa que sí respete las normas WCAG.
5. Prueba con el teclado
Prueba a recorrer tu web del todo sin ratón: solo con la tecla Tab y Enter. ¿Puedes llegar a todo —menú, filtros, carrito, pago— y ves en cada momento dónde está el foco? Mucha gente navega así, y revela las barreras rápidamente.
6. Comprueba el ajuste de idioma
Asegúrate de que tu tema fije el atributo de idioma correcto, para que un lector de pantalla elija la
pronunciación adecuada. Ve a Themes → Actions (⋯) → Edit code, abre layout/theme.liquid y
comprueba que la etiqueta <html> contenga la variable de idioma:
<html lang="{{ request.locale.iso_code }}">. Shopify suele gestionarlo bien, pero compruébalo
cuando uses apps de traducción.
Errores frecuentes de Shopify y su corrección
| Elemento de Shopify | Error frecuente | La corrección |
|---|---|---|
| Botones | tipografía demasiado clara en el botón "Pagar" | contraste en los ajustes del tema a 4,5:1 como mínimo |
| Fotos de producto | nombre de archivo como descripción (product_v2.png) | añadir texto alternativo funcional vía Media |
| Pop-up del carrito | cruz de cierre (X) sin etiqueta | aria-label="Cerrar carrito" en la plantilla |
| App de accesibilidad | instalar un widget de overlay | evitar — no repara tu código ni protege contra reclamaciones |
¿Ayuda una app de accesibilidad de la Shopify App Store?
No. Si buscas "accessibility" en la App Store, encuentras decenas de apps que prometen hacer tu tienda compatible con un solo clic mediante un widget. No piques: no reparan tu tema base, y los organismos reguladores comprueban el código fuente en bruto de tu tienda. Resolverlo estructuralmente en tu tema y tu contenido es la única vía que resiste, y además te aporta mejor SEO y un tiempo de carga más rápido. Más sobre esto en por qué un widget de overlay no te protege.
¿Cumple así mi tienda Shopify con la ley?
Estos seis puntos cubren la mayor parte de lo que detecta una comprobación automatizada, pero "cumplir" va más allá: depende de tu tema completo, tus apps y tu contenido en conjunto. Si la European Accessibility Act se te aplica, lo repasas en nuestra checklist. Y atención: una app de overlay no resuelve esto, porque no repara el código de tu tema.
¿Cómo sé dónde está ahora mi tienda Shopify?
La forma más rápida: escanea gratis una página. Verás, por cada hallazgo, qué falla y cómo resolverlo, y como mucho pasa por tu tema, lo resuelves a menudo de una sola vez para toda tu tienda. En menos de 60 segundos, sin cuenta.