Accesibilidad en ecommerce: checklist WCAG para tiendas online

¿Cómo haces que una tienda online sea accesible para personas con discapacidad?

Haz que una tienda online sea accesible cumpliendo con WCAG 2.2 Nivel AA: contraste de color suficiente (4.5:1 para texto), navegación completa por teclado, texto alternativo descriptivo en las imágenes de producto, formularios correctamente etiquetados y páginas de producto compatibles con lectores de pantalla. Empieza con un escaneo automatizado (WAVE, axe, Lighthouse), arregla primero el contraste y las etiquetas, luego prueba todo el flujo de compra solo con un teclado. La accesibilidad se solapa fuertemente con la optimización de la UX móvil — la mayoría de las soluciones mejoran la conversión para cada comprador, no solo para los que tienen discapacidad.

Por qué la accesibilidad en ecommerce es un imperativo empresarial en 2025

Uno de cada cuatro adultos en Estados Unidos — aproximadamente 61 millones de personas — vive con una discapacidad, según los Centros para el Control y la Prevención de Enfermedades (CDC, 2024). A nivel global, la Organización Mundial de la Salud informa que 1.3 mil millones de personas experimentan una discapacidad significativa. Este grupo demográfico controla unos $13 billones estimados de ingresos disponibles anuales, según el Return on Disability Group (2024). Sin embargo, la gran mayoría de las tiendas de ecommerce sigue siendo parcial o totalmente inaccesible para estos consumidores.

Un estudio de WebAIM de 2024 encontró que el 95.9% del millón de principales páginas de inicio tenía fallos detectables de WCAG 2, con una media de 56.8 errores por página. Más allá de los argumentos morales y comerciales, el riesgo legal se ha convertido en un poderoso motivador. Las demandas de accesibilidad digital relacionadas con la ADA superaron las 4,600 en 2024, según UsableNet — un aumento del 15% respecto al año anterior. Los acuerdos normalmente oscilan entre $10,000 y $150,000.

El argumento empresarial en cifras

El diseño accesible mejora la experiencia para todos. Las mejoras de accesibilidad digital como las etiquetas claras, el orden lógico de tabulación y el texto de alto contraste benefician a todos los usuarios, especialmente en dispositivos móviles.

• Mejora de la tasa de conversión: Las tiendas conformes con WCAG 2.1 AA ven aumentos de la tasa de conversión del 15 al 30%, según Deloitte (2024).
• Beneficios de SEO: El algoritmo de posicionamiento de Google favorece los sitios accesibles con estructuras de encabezado adecuadas, texto alternativo y HTML semántico (Moz, 2024).
• Menores tasas de rebote: Los sitios accesibles experimentan tasas de rebote un 20% más bajas de media, según Baymard Institute (2024).
• Lealtad de marca: El 71% de los consumidores con discapacidad abandonará un sitio web inaccesible y nunca regresará, según la Click-Away Pound Survey (2024).
• Expansión de mercado: Incluyendo a amigos y familiares que influyen en las decisiones de compra, el mercado extendido alcanza más de 2.3 mil millones de personas a nivel global (Return on Disability, 2024).

Entender WCAG 2.2: el estándar de accesibilidad para ecommerce

Las Pautas de Accesibilidad para el Contenido Web (WCAG) 2.2, publicadas por el World Wide Web Consortium (W3C) en octubre de 2023, proporcionan el marco autoritativo para la accesibilidad digital. WCAG se organiza en torno a cuatro principios, a menudo resumidos con el acrónimo POUR (en inglés): Perceptible, Operable, Comprensible y Robusto. Cada principio contiene pautas con criterios de éxito comprobables en tres niveles de conformidad: A (mínimo), AA (recomendado) y AAA (más alto).

Para las tiendas de ecommerce, WCAG 2.1 Nivel AA es el estándar que la mayoría de los tribunales y organismos reguladores toman como referencia. WCAG 2.2 añadió nueve nuevos criterios de éxito, varios de los cuales son directamente relevantes para el ecommerce — incluyendo requisitos para la apariencia del foco, los movimientos de arrastre y los mecanismos de ayuda consistentes. Las tiendas construidas sobre LaunchMyStore se benefician de una plataforma diseñada con el cumplimiento de WCAG como principio fundamental, pero los propietarios de tiendas aún necesitan asegurarse de que su contenido personalizado, imágenes e integraciones de terceros cumplan el estándar.

Los cuatro principios POUR aplicados al ecommerce

• Perceptible: Todas las imágenes de producto requieren texto alternativo descriptivo. Los videos necesitan subtítulos y descripciones de audio. El texto debe tener suficiente contraste con su fondo (al menos 4.5:1 para texto normal y 3:1 para texto grande).
• Operable: Cada elemento interactivo — botones, enlaces, menús desplegables, carruseles y formularios — debe ser totalmente operable solo mediante teclado. Ninguna funcionalidad debería depender exclusivamente de la interacción con el ratón.
• Comprensible: Las etiquetas de formulario deben indicar claramente qué información se requiere. Los mensajes de error deben explicar qué salió mal y cómo arreglarlo. La navegación debe ser consistente en todas las páginas.
• Robusto: El código de tu tienda debe usar HTML válido y atributos ARIA para que las tecnologías de asistencia (lectores de pantalla, magnificadores, controles de voz) puedan interpretar y presentar correctamente el contenido a los usuarios.

Navegación por teclado: la base del ecommerce accesible

Aproximadamente el 7% de los adultos en edad laboral tiene una dificultad grave de destreza que limita o impide el uso del ratón, según el Microsoft Inclusive Design Toolkit (2024). Muchos más usan el teclado como dispositivo de entrada principal debido a lesiones temporales, condiciones de tensión repetitiva o preferencia personal. Si un usuario no puede tabular por tus listados de producto, operar tu selector de talla o completar tu formulario de pago usando solo un teclado, tu tienda es inaccesible para millones de clientes potenciales.

Requisitos críticos de navegación por teclado

• Orden lógico de tabulación: La secuencia del foco debe seguir el orden visual de lectura de la página — normalmente de izquierda a derecha, de arriba a abajo. Usa el atributo tabindex con moderación y evita los valores de tabindex mayores que 0, que anulan el orden natural del documento.
• Indicadores de foco visibles: Los usuarios deben poder ver qué elemento está enfocado actualmente. WCAG 2.2 requiere un indicador de foco que tenga al menos un contorno sólido de 2px con una relación de contraste de 3:1 respecto al estado sin enfocar. Nunca uses outline: none sin proporcionar un indicador visible alternativo.
• Enlaces para saltar la navegación: Proporciona un enlace “Saltar al contenido principal” en la parte superior de cada página para que los usuarios de teclado puedan omitir los menús de navegación repetitivos.
• Menús desplegables accesibles por teclado: Los filtros de producto, los menús de ordenación y los desplegables de categoría deben abrirse con Enter o Espacio, navegar con las teclas de flecha y cerrarse con Escape.
• Atrapamiento del foco en los modales: Cuando se abre un diálogo modal (p. ej., superposición de vista rápida de producto, guía de tallas o aviso de inicio de sesión), el foco del teclado debe quedar atrapado dentro del modal hasta que se cierre. El foco debe volver al elemento que lo activó al cerrarse.

Consejo profesional: Prueba todo tu flujo de pago usando solo las teclas Tab, Shift+Tab, Enter, Espacio y Escape. Si no puedes completar una compra sin tocar tu ratón, tus usuarios de teclado tampoco pueden. Esta sola prueba revela la mayoría de los problemas de accesibilidad de navegación.

¿Cuáles son los problemas más comunes de lectores de pantalla en el ecommerce?

Los lectores de pantalla como JAWS, NVDA y VoiceOver son usados por unos 7.1 millones de estadounidenses con discapacidad visual, según la American Foundation for the Blind (2024). Si tu marcado es semántico y está bien estructurado, los lectores de pantalla transmiten la información del producto de forma efectiva. Si depende solo del estilo visual, los usuarios de lectores de pantalla reciben una experiencia confusa.

Escribir texto alternativo efectivo para las imágenes de producto

El texto alternativo es la mejora de accesibilidad de mayor impacto para las imágenes de producto. El texto alternativo ausente o inadecuado afecta al 55.6% de las páginas probadas, según WebAIM (2024).

• Sé específico y descriptivo: En lugar de “Camisa azul”, escribe “Camisa Oxford de algodón azul marino de corte ajustado para hombre con cuello abotonado”.
• Evita la redundancia: No empieces el texto alternativo con “Imagen de” — los lectores de pantalla ya anuncian el elemento como una imagen.
• Imágenes decorativas: Usa atributos alt vacíos (alt="") para las imágenes puramente decorativas.
• Galerías de imágenes: Cada imagen en una galería de producto debería tener un texto alternativo único que describa esa vista específica.

Etiquetas ARIA y puntos de referencia

Los atributos ARIA complementan la semántica HTML para las tecnologías de asistencia. Las implementaciones críticas para el ecommerce incluyen:

• Roles de punto de referencia: Usa role="navigation", role="main", role="search" y role="complementary" para ayudar a los usuarios de lectores de pantalla a navegar entre secciones.
• Regiones en vivo: Usa aria-live="polite" para las actualizaciones del carrito y los recuentos de resultados de filtro para que los lectores de pantalla anuncien los cambios dinámicos.
• Estados expandido/colapsado: Los acordeones y las secciones de FAQ deberían usar aria-expanded="true/false" para comunicar su estado.
• Controles personalizados: Los widgets de valoración y los selectores de cantidad necesitan los atributos role, aria-label y aria-valuenow apropiados.

Contraste de color y diseño visual para la inclusividad

Aproximadamente 300 millones de personas en todo el mundo tienen deficiencia de visión de color, según el National Eye Institute (2024). Otros 246 millones tienen una discapacidad visual de moderada a grave. Diseñar la interfaz visual de tu tienda con suficiente contraste de color e información que no dependa del color asegura que estos usuarios puedan comprar de forma efectiva.

Requisitos de contraste

WCAG 2.1 Nivel AA requiere una relación de contraste mínima de 4.5:1 para el texto normal (menos de 18pt o 14pt en negrita) y 3:1 para el texto grande (18pt+ o 14pt+ en negrita). WCAG 2.2 extiende esto a los elementos no textuales: los componentes de la interfaz de usuario (botones, campos de formulario, iconos) y los objetos gráficos también deben cumplir una relación de contraste de 3:1 respecto a sus colores adyacentes.

Los fallos de contraste comunes en el ecommerce incluyen texto gris claro sobre fondos blancos para la información “secundaria” (descripciones de producto, insignias de rebaja), texto de marcador de posición en los campos de búsqueda que desaparece cuando el campo está activo, y botones de “Añadir al carrito” de bajo contraste sobre fondos estilizados. Herramientas como el WebAIM Contrast Checker o las DevTools del navegador pueden evaluar las relaciones de contraste en segundos.

Más allá del color solo

Nunca dependas del color como único medio para transmitir información. Ejemplos de infracciones incluyen usar solo rojo/verde para indicar el estado de disponible frente a agotado, el precio de rebaja mostrado solo en texto rojo sin indicadores adicionales, y errores de formulario resaltados solo con un borde rojo. En su lugar, combina el color con etiquetas de texto, iconos, patrones u otras señales visuales.

Criterio WCAG	Requisito	Aplicación en ecommerce	Herramienta de prueba
1.1.1 Contenido no textual (A)	Todas las imágenes tienen texto alternativo	Fotos de producto, banners, iconos	axe DevTools, WAVE
1.4.3 Contraste mínimo (AA)	4.5:1 para texto, 3:1 para texto grande	Botones, precios, descripciones	WebAIM Contrast Checker
1.4.11 Contraste no textual (AA)	3:1 para componentes de UI	Campos de formulario, iconos, anillos de foco	Colour Contrast Analyser
2.1.1 Teclado (A)	Toda la funcionalidad por teclado	Navegación, filtros, pago	Prueba manual
2.4.7 Foco visible (AA)	Indicador de foco de teclado visible	Todos los elementos interactivos	Manual + axe DevTools
2.5.8 Tamaño de objetivo mínimo (AA)	Objetivos táctiles mínimos de 24x24px	Botones, enlaces, controles de formulario	DevTools del navegador
3.3.2 Etiquetas o instrucciones (A)	Los formularios tienen etiquetas descriptivas	Pago, registro, búsqueda	WAVE, Lighthouse
4.1.2 Nombre, rol, valor (A)	Los controles personalizados tienen info ARIA	Widgets de valoración, selectores de cantidad	axe DevTools, lector de pantalla

Formularios y pago accesibles: eliminar la barrera final

El flujo de pago es donde los fallos de accesibilidad te cuestan más dinero. Según el Baymard Institute (2024), el 69.8% de los carritos de compra online ya se abandonan — y los formularios de pago inaccesibles empujan ese número aún más alto para los usuarios con discapacidad. Si un usuario ciego no puede identificar el campo de la tarjeta de crédito, o un usuario con discapacidad motora no puede hacer clic en una diminuta casilla de “Términos y condiciones”, la venta se pierde.

Mejores prácticas de accesibilidad de formularios

• Etiquetas explícitas: Cada campo de formulario debe tener un elemento <label> visible asociado mediante el atributo for. Nunca dependas solo del texto de marcador de posición como etiqueta — el texto de marcador de posición desaparece cuando el usuario empieza a escribir, sin dejar ninguna etiqueta visible.
• Identificación de errores: Cuando el envío de un formulario falla la validación, los errores deben identificarse claramente en texto (no solo con color), asociarse con el campo específico y anunciarse a los lectores de pantalla usando las regiones aria-describedby o aria-live.
• Propósito de la entrada: Usa el atributo autocomplete en campos como nombre, correo, dirección y número de tarjeta de crédito. Esto ayuda a los navegadores y las tecnologías de asistencia a autocompletar los formularios correctamente, reduciendo los errores de entrada y el tiempo.
• Objetivos táctiles generosos: WCAG 2.2 requiere un tamaño de objetivo mínimo de 24×24 píxeles CSS. Para los botones de pago y los controles de formulario, apunta a al menos 44×44 píxeles para acomodar a los usuarios con discapacidad motora.
• Indicadores de progreso: Los pagos de varios pasos deberían indicar el paso actual y el número total de pasos, tanto visual como programáticamente (usando aria-current="step").

Métodos de pago accesibles

Ofrecer múltiples opciones de pago — tarjeta de crédito, PayPal, Apple Pay, Google Pay — mejora la accesibilidad porque algunos métodos requieren menos entradas de formulario. Las carteras digitales son particularmente beneficiosas para los usuarios con discapacidad motora, ya que reducen la cantidad de entrada manual de datos requerida. LaunchMyStore admite todos los principales proveedores de pago con componentes de pago accesibles integrados.

Accesibilidad del contenido de video y subtítulos

Los videos de producto aumentan las tasas de conversión hasta en un 80% (Wyzowl, 2024), pero sin subtítulos y transcripciones, este contenido excluye a 466 millones de personas con pérdida auditiva incapacitante (OMS, 2024).

• Subtítulos cerrados: Todos los videos pregrabados deben tener subtítulos sincronizados (WCAG 1.2.2). Los subtítulos autogenerados tienen tasas de error del 10 al 15%, así que revísalos siempre.
• Transcripciones: Proporciona una transcripción de texto completo debajo de cada video para los usuarios sordos y los motores de búsqueda.
• Descripciones de audio: Proporciona narración para los videos donde el contenido visual transmite información que no está en la pista de audio (WCAG 1.2.5).
• Reproductores de video accesibles: Asegúrate de que el reproductor sea navegable por teclado con controles etiquetados con ARIA.

Herramientas de prueba y metodología de auditoría

Las herramientas automatizadas detectan aproximadamente del 30 al 40% de los problemas de accesibilidad (Government Digital Service, 2024). El 60–70% restante requiere pruebas manuales. Una auditoría efectiva combina ambos enfoques.

Herramientas de prueba automatizadas

• axe DevTools (Deque): La extensión de navegador estándar de la industria que prueba contra los criterios de WCAG 2.1 y 2.2.
• WAVE (WebAIM): Una herramienta visual que superpone los errores de accesibilidad y la información estructural directamente en tu página.
• Google Lighthouse: Integrada en Chrome DevTools con una puntuación de accesibilidad de 0 a 100.
• Pa11y: Una herramienta de línea de comandos para la integración en pipelines de CI/CD y el monitoreo continuo.

Protocolo de prueba manual

• Navegación solo por teclado: Completa todo el recorrido de compra usando solo el teclado. Verifica la visibilidad del foco y que no existan trampas de teclado.
• Prueba de lector de pantalla: Usa NVDA (gratis, Windows) o VoiceOver (macOS/iOS) para verificar que los encabezados, las etiquetas y el contenido dinámico se anuncian correctamente.
• Prueba de zoom: Haz zoom al 200% y verifica que ningún contenido se corte o se solape (WCAG 1.4.4).
• Simulación de color: Usa la extensión NoCoffee para simular la deficiencia de visión de color y verificar que toda la información sigue siendo comprensible.

Requisitos legales: ADA, EAA y regulaciones globales

En EE. UU., la ADA ha sido interpretada por los tribunales para cubrir los sitios web como “lugares de alojamiento público”. El DOJ finalizó una regla en abril de 2024 que exige que los sitios web gubernamentales cumplan con WCAG 2.1 Nivel AA — un punto de referencia que los tribunales del sector privado toman cada vez más como base.

En la UE, la Ley Europea de Accesibilidad (EAA) entra plenamente en vigor el 28 de junio de 2025, exigiendo que todos los servicios de ecommerce sean accesibles — independientemente de dónde esté ubicado el negocio. Otras jurisdicciones incluyen Canadá, el Reino Unido, Australia y Japón. La accesibilidad está pasando de ser una mejor práctica a un requisito legal.

Conclusión: la accesibilidad es buen diseño — y buen negocio

Hacer que tu tienda de ecommerce sea accesible es una de las inversiones de mayor ROI que puedes hacer. Amplías tu mercado direccionable en más de mil millones de clientes potenciales, mejoras la experiencia de compra para todos, fortaleces tu rendimiento SEO y proteges tu negocio de costosas acciones legales. Las herramientas y técnicas descritas en esta guía — desde la navegación por teclado y la optimización para lectores de pantalla hasta el cumplimiento del contraste de color y los flujos de pago accesibles — son prácticas, implementables y cada vez más innegociables.

Empieza con una auditoría automatizada usando axe DevTools o WAVE para entender tu línea base actual. Prioriza arreglar los errores más comunes: texto alternativo ausente, contraste de color insuficiente, etiquetas de formulario inaccesibles y fallos de navegación por teclado. Luego pasa a las pruebas manuales con lectores de pantalla y usuarios reales. Si estás lanzando una nueva tienda, elige una plataforma como LaunchMyStore que construye la accesibilidad en su núcleo, ahorrándote el coste y la complejidad de readaptarla después.

La accesibilidad no es un proyecto único — es un compromiso continuo con el diseño inclusivo. Cada mejora que haces elimina una barrera para alguien que quiere ser tu cliente. En 2025 y más allá, las tiendas que adopten la accesibilidad no solo cumplirán con la ley — superarán a sus competidores.