Hacer que tu tienda Shopify sea accesible según la ADA

Las demandas de la ADA (Ley de Estadounidenses con Discapacidades) contra sitios web de comercio electrónico aumentaron un 300% entre 2020 y 2024, y las tiendas Shopify constituyen una proporción cada vez mayor de los objetivos. Más allá del cumplimiento legal, la accesibilidad impacta directamente en los ingresos: aproximadamente el 26% de los adultos estadounidenses viven con una discapacidad, lo que representa 490 mil millones de dólares en poder adquisitivo. Una tienda inaccesible excluye por completo a estos clientes.

Esta guía cubre la implementación práctica de accesibilidad de Shopify: los criterios WCAG 2.1 AA específicos que más importan para el comercio electrónico, cómo auditar su tienda actual y las soluciones que abordan las infracciones más comunes.

Conclusiones clave

• WCAG 2.1 Nivel AA es el estándar requerido para el cumplimiento de la ADA, no AAA, no solo Nivel A
• La navegación por teclado debe funcionar para todos los elementos interactivos: navegación, selección de productos, carrito y pago.
• La relación de contraste de color debe ser 4,5:1 para texto normal y 3:1 para texto grande y componentes de interfaz de usuario.
• Los lectores de pantalla deben recibir texto alternativo significativo para todas las imágenes de productos y etiquetas significativas para todos los campos del formulario.
• Los indicadores de enfoque deben ser visibles visualmente: los navegadores los suprimen de forma predeterminada en muchos temas.
• El pago de Shopify es administrado por Shopify y es accesible, pero es posible que el cajón del carrito de tu tema no esté
• Los verificadores de accesibilidad automatizados detectan aproximadamente el 30% de los problemas; para el resto se requieren pruebas manuales
• Las superposiciones de accesibilidad (como accessiBe) no cumplen con las WCAG y aumentan el riesgo legal

Comprender los requisitos de ADA y WCAG para el comercio electrónico

La ADA no incluye estándares técnicos específicos para sitios web. Los tribunales han aplicado consistentemente las Pautas de Accesibilidad al Contenido Web (WCAG) como estándar de facto, siendo el Nivel 2.1 AA el objetivo de cumplimiento aceptado en la mayoría de los acuerdos y fallos.

WCAG 2.1 está organizado en torno a cuatro principios (POUR):

1. Perceptible: la información y los componentes de la interfaz de usuario deben estar presentables de manera que los usuarios puedan percibirlos (alternativas para el contenido visual, subtítulos para el audio, contraste suficiente).
2. Operable: los componentes de la interfaz de usuario y la navegación deben ser operables (accesible al teclado, tiempo suficiente para completar las tareas, sin contenido que provoque convulsiones)
3. Comprensible: la información y el funcionamiento de la interfaz de usuario deben ser comprensibles (lenguaje legible, comportamiento predecible, asistencia de entrada)
4. Robusto: el contenido debe ser lo suficientemente sólido como para ser interpretado por tecnologías de asistencia.

Las infracciones de accesibilidad más comúnmente litigadas en sitios de comercio electrónico:

Auditoría de accesibilidad: herramientas y proceso

Herramientas de prueba automatizadas:

Las herramientas automatizadas encuentran problemas estructurales: falta de texto alternativo, faltan etiquetas de formulario, fallas de contraste. No pueden encontrar: calidad significativa del texto alternativo, orden lógico de enfoque del teclado, experiencia del lector de pantalla, complejidad cognitiva.

Proceso de prueba manual:

Paso 1: prueba de navegación solo con teclado: Desconecta tu ratón. Navegue por su tienda usando solo Tab (avanzar), Mayús+Tab (atrás), Enter (activar), Espacio (seleccionar/desplazarse) y teclas de flecha (dentro de los componentes). Complete estas tareas:

• Navegar a una categoría de producto
• Seleccione un producto
• Elija una variante de tamaño/color
• Añadir al carrito
• Navegar al carrito
• Proceder al pago

Cada tarea debe poder completarse únicamente con el teclado.

Paso 2: prueba del lector de pantalla: Utilice NVDA (gratis, Windows) o VoiceOver (integrado, Mac/iOS). Navegue por su página de inicio, la página de un producto y su carrito con el lector de pantalla activo. Escuche:

• ¿Se describe cada imagen de manera significativa?
• ¿Todos los botones están etiquetados con su acción?
• ¿Es lógico el orden de lectura?
• ¿Se anuncian mensajes de error?

Paso 3: prueba de zoom: Aumente el zoom del navegador al 200% y al 400%. La página debe redistribuirse y seguir siendo utilizable: sin desplazamiento horizontal al 200 %, sin superposición de contenido, sin texto truncado.

Paso 4: prueba de contraste de color: Utilice ax DevTools o WebAIM Contrast Checker para verificar que todo el texto cumpla con los requisitos de contraste: 4.5:1 para texto normal, 3:1 para texto grande (18 puntos+ o 14 puntos+ negrita), 3:1 para componentes de la interfaz de usuario (botones, íconos, bordes de formulario).

Accesibilidad de imágenes: texto alternativo para imágenes de productos

El texto alternativo es la infracción de accesibilidad más común en las tiendas Shopify. Cada imagen debe tener texto alternativo que transmita la misma información que un usuario vidente obtendría al ver la imagen.

Pautas de texto alternativo para imágenes de productos de Shopify:

Describa lo que es importante para las decisiones de compra:

• Nombre del producto y características distintivas clave.
• Color, material y características visuales destacables.
• Contexto si se muestra en uso (por ejemplo, "Taza de cerámica azul sobre mesa de madera")
• Cualquier texto visible en la imagen.

Qué NO hacer:

• "image001.jpg": los nombres de los archivos no son texto alternativo
• "Imagen del producto": las descripciones genéricas no transmiten información.
• Relleno de palabras clave: "taza azul, taza de café de cerámica azul, la mejor taza azul": esto es perjudicial
• Describir cada pequeño detalle: sea conciso y relevante.

Implementación de texto alternativo en Shopify:

Agrega texto alternativo a las imágenes de productos a través del administrador de Shopify:

1. Administrador > Productos > [Producto] > haga clic en una imagen
2. Ingrese el texto alternativo en el campo "Texto alternativo de la imagen".
3. Guardar

Para actualizaciones masivas de texto alternativo, utiliza el editor masivo de Shopify:

1. Administrador > Productos > Seleccionar todos los productos > Editar productos
2. Agregue la columna "Texto alternativo de la imagen del producto".
3. Editar y guardar

Imágenes decorativas:

Las imágenes puramente decorativas (patrones de fondo, divisores decorativos) deben tener texto alternativo vacío (alt=""). Esto indica a los lectores de pantalla que omitan la imagen por completo en lugar de anunciar "imagen" sin descripción.

Navegación por teclado: hacer que su tienda sea totalmente operativa

La accesibilidad del teclado requiere que cada elemento interactivo (botones, enlaces, campos de formulario, menús desplegables, modales) se pueda acceder, activar y navegar usando solo un teclado.

Gestión de enfoque en temas de Shopify:

La mayoría de los temas de Shopify suprimen los indicadores de enfoque por motivos de estética visual:

/* Many themes include this — it's an accessibility violation */
:focus {
  outline: none;
}

Reemplácelo con un estilo de enfoque visible que no rompa el diseño:

/* Visible focus for keyboard users, hidden for mouse users */
:focus-visible {
  outline: 3px solid #005FCC;
  outline-offset: 2px;
  border-radius: 2px;
}

/* Still suppress for mouse clicks (no :focus-visible means mouse/touch) */
:focus:not(:focus-visible) {
  outline: none;
}

Acceso al teclado del menú de navegación:

Los menús de navegación desplegables deben poder operarse con el teclado:

• Pestaña al elemento de navegación
• Ingrese o Espacio para abrir el menú desplegable
• Teclas de flecha para navegar por los elementos desplegables
• Escapar para cerrar el menú desplegable

Pruebe esto en su tema actual. Muchos temas de Shopify tienen menús desplegables que se activan al pasar el cursor y que son inaccesibles para los usuarios del teclado. Solución: asegúrese de que los menús desplegables se abran en los eventos keydown para las teclas Intro/Espacio/flecha además de pasar el mouse.

Gestión de teclado modal y de cajón:

Cuando se abre un cajón modal o de carrito, el foco del teclado debe moverse al modal. Cuando se cierra, el foco debe volver al elemento que lo desencadenó. Todos los elementos enfocables dentro del modal deben ser accesibles; El foco no debe escapar del modal.

// Example: Focus management for cart drawer
function openCartDrawer() {
  const cartDrawer = document.getElementById('cart-drawer');
  cartDrawer.setAttribute('aria-hidden', 'false');
  cartDrawer.removeAttribute('inert');

  // Move focus to first focusable element in drawer
  const firstFocusable = cartDrawer.querySelector(
    'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
  );
  firstFocusable?.focus();

  // Trap focus within drawer
  cartDrawer.addEventListener('keydown', trapFocus);
}

function closeCartDrawer(triggerElement) {
  const cartDrawer = document.getElementById('cart-drawer');
  cartDrawer.setAttribute('aria-hidden', 'true');
  cartDrawer.setAttribute('inert', '');
  cartDrawer.removeEventListener('keydown', trapFocus);

  // Return focus to trigger element
  triggerElement?.focus();
}

Accesibilidad del formulario: etiquetas, errores e instrucciones

Los formularios son el área de accesibilidad de mayor importancia en el comercio electrónico: el formulario para agregar al carrito, la entrada de búsqueda, la suscripción al boletín informativo y los formularios de pago deben ser completamente accesibles.

Requisitos de etiqueta de formulario:

Cada entrada de formulario debe tener una etiqueta asociada mediante programación:

<!-- Correct: label explicitly associated via 'for' attribute -->
<label for="email">Email address</label>
<input type="email" id="email" name="email" required>

<!-- Correct: label wraps input (implicit association) -->
<label>
  Email address
  <input type="email" name="email" required>
</label>

<!-- Wrong: placeholder is not a substitute for label -->
<input type="email" placeholder="Email address" name="email">

El texto del marcador de posición desaparece cuando los usuarios escriben y tiene un contraste insuficiente en la mayoría de los navegadores. Nunca utilice un marcador de posición como única etiqueta.

Mensaje de error de accesibilidad:

Los mensajes de error deben asociarse mediante programación con el campo que los causó:

<div>
  <label for="zip">ZIP code</label>
  <input
    type="text"
    id="zip"
    name="zip"
    aria-describedby="zip-error"
    aria-invalid="true"
  >
  <p id="zip-error" role="alert">
    Please enter a valid 5-digit ZIP code
  </p>
</div>

El role="alert" hace que los lectores de pantalla anuncien el mensaje de error inmediatamente cuando aparece. aria-describedby vincula el error al campo de entrada para que los lectores de pantalla puedan encontrar el error al navegar al campo.

Selectores de variantes de tamaño y color:

Los selectores de variantes de productos (botones de tamaño, muestras de color) deben ser accesibles. Enfoques comunes:

<!-- Accessible radio button group for size selection -->
<fieldset>
  <legend>Size</legend>
  <div class="size-options">
    <input type="radio" id="size-s" name="size" value="S">
    <label for="size-s">Small</label>

    <input type="radio" id="size-m" name="size" value="M">
    <label for="size-m">Medium</label>

    <input type="radio" id="size-l" name="size" value="L">
    <label for="size-l">Large</label>
  </div>
</fieldset>

Las muestras de color necesitan nombres accesibles; el color visual no es suficiente:

<!-- Accessible color swatch -->
<input type="radio" id="color-navy" name="color" value="Navy">
<label for="color-navy">
  <span class="swatch navy" aria-hidden="true"></span>
  <span class="visually-hidden">Navy</span>
</label>

Etiquetas ARIA y HTML semántico

Los atributos ARIA (Aplicaciones enriquecidas de Internet accesibles) llenan vacíos semánticos donde el HTML por sí solo es insuficiente. Sin embargo, la primera regla de ARIA es: "No uses ARIA si HTML puede hacerlo".

Patrones ARIA comunes para tiendas Shopify:

<!-- Cart button with item count -->
<button aria-label="Cart, 3 items">
  <svg aria-hidden="true"><!-- cart icon --></svg>
  <span class="visually-hidden">Cart</span>
  <span class="cart-count" aria-hidden="true">3</span>
</button>

<!-- "Add to Cart" button state changes -->
<button id="add-to-cart" aria-live="polite">
  Add to Cart
</button>
<!-- After adding: -->
<button id="add-to-cart" aria-live="polite">
  Added to Cart ✓
</button>

<!-- Loading states -->
<div aria-busy="true" aria-live="polite">
  Loading products...
</div>

<!-- Expandable sections (accordion) -->
<button aria-expanded="false" aria-controls="faq-answer-1">
  What is your return policy?
</button>
<div id="faq-answer-1" hidden>
  <p>We accept returns within 30 days...</p>
</div>

Roles de referencia para la navegación:

Asegúrese de que su tema utilice elementos HTML de referencia adecuados por los que navegan los usuarios de lectores de pantalla:

<header role="banner"><!-- site header --></header>
<nav aria-label="Main navigation"><!-- primary navigation --></nav>
<main id="main-content"><!-- main content --></main>
<aside><!-- sidebar filters or complementary content --></aside>
<footer role="contentinfo"><!-- site footer --></footer>

Superposiciones de accesibilidad: por qué fallan

Las superposiciones de accesibilidad (accessiBe, UserWay, AudioEye) son widgets de JavaScript que pretenden hacer que su sitio sea accesible automáticamente. No son una solución y aumentan el riesgo legal.

Por qué fallan las superposiciones:

1. No pueden solucionar problemas estructurales de accesibilidad de HTML, solo presentación a nivel de superficie.
2. Con frecuencia entran en conflicto con las tecnologías de asistencia, lo que empeora la experiencia para los usuarios reales de lectores de pantalla.
3. Los tribunales no han aceptado las reclamaciones de los proveedores superpuestos como cumplimiento adecuado de la ADA
4. La Federación Nacional de Ciegos y otras organizaciones de defensa de la discapacidad se oponen explícitamente a las superposiciones.
5. Muchos proveedores de superposiciones se han enfrentado ellos mismos a demandas colectivas

Qué hacer en su lugar:

Invierta en soluciones estructurales de accesibilidad: HTML semántico, etiquetas adecuadas, navegación con el teclado, gestión del enfoque y contraste de color. Estas correcciones benefician a todos los usuarios, mejoran el SEO (los lectores de pantalla y los rastreadores de búsqueda tienen necesidades similares) y brindan una protección legal genuina.

Preguntas frecuentes

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

Próximos pasos

La implementación integral de accesibilidad de Shopify, que cubre navegación con teclado, compatibilidad con lectores de pantalla, accesibilidad de formularios y contraste de color WCAG, requiere tanto experiencia en desarrollo de frontend como metodología de pruebas de accesibilidad.

Los servicios Shopify de ECOSIRE incluyen auditorías de accesibilidad, corrección de WCAG 2.1 AA y monitoreo continuo de accesibilidad para proteger su tienda de litigios de ADA mientras expande su base de clientes accesibles.

Comuníquese con nuestro equipo de accesibilidad para programar una auditoría integral de WCAG 2.1 AA para su tienda Shopify.