Cuando un proceso de checkout no es accesible, las personas con discapacidad no pueden completar una compra. Esto supone una pérdida directa de ingresos y un riesgo legal que crece cada año.
Los sitios de comercio electrónico se encuentran entre los productos digitales más auditados en accesibilidad y entre los que más fallan. Este artículo recoge los problemas más comunes y te da un camino claro para resolverlos.
Por qué importa la accesibilidad en eCommerce
Las personas con discapacidad y sus entornos familiares representan un poder de compra anual estimado de 490 000 millones de dólares solo en Estados Unidos. Un sitio inaccesible aleja a una parte significativa de ese mercado.
La presión legal también está aumentando. La ADA, la Ley Europea de Accesibilidad y leyes similares en muchas jurisdicciones se aplican al comercio en línea. Las demandas contra sitios de eCommerce inaccesibles son cada vez más frecuentes.
La apuesta es alta por ambos lados: tus usuarios y tu negocio.
Los fallos de accesibilidad más comunes en eCommerce
1. Imágenes de producto sin texto alternativo útil
El problema: las imágenes no tienen texto alternativo o usan un genérico como «imagen de producto».
Los usuarios de lector de pantalla dependen del texto alternativo para saber cómo es un producto. El nombre del producto, por sí solo, no basta. Quien busca un sofá necesita conocer el color, el material y el estilo a partir de la descripción de la imagen.
La solución: escribe textos alternativos que den a las personas usuarias de lector de pantalla la misma información que un usuario vidente obtiene al ver la imagen. Para productos con varias imágenes, cada una debería describir un aspecto distinto: la vista frontal, el detalle, la foto de uso.
2. Accesibilidad rota en los formularios del checkout
El problema: los campos del formulario no tienen etiquetas, el placeholder sustituye a la etiqueta, los mensajes de error son vagos o los errores se indican únicamente con un borde rojo.
Los formularios de checkout son complejos. Los usuarios de lector de pantalla necesitan etiquetas explícitas en cada campo. Cuando algo falla, deben saber exactamente qué campo ha fallado y por qué.
La solución: cada campo necesita una etiqueta visible conectada mediante <label for>. Los mensajes de error deben ser específicos. Los errores deben anunciarse a los lectores de pantalla con aria-live o aria-describedby, e indicarse visualmente con algo más que el color.
3. Filtros de producto inaccesibles por teclado
El problema: los menús desplegables personalizados, los sliders de rango y los componentes multi-selección solo funcionan con ratón.
El descubrimiento de productos depende del filtrado. Una persona usuaria de teclado que no puede filtrar resultados accede a una experiencia de compra fundamentalmente degradada.
La solución: construye todas las interacciones de filtrado sobre componentes accesibles por teclado. Los sliders personalizados deben responder a las flechas con incrementos claros. Los desplegables de filtros deben seguir los patrones ARIA de disclosure o listbox.
4. Carruseles y galerías de imágenes que atrapan el foco
El problema: los carruseles de imágenes de producto no se pueden navegar con el teclado, o atrapan el foco sin una salida clara.
Las personas usuarias se quedan atascadas o no consiguen acceder a todas las imágenes de la galería.
La solución: los controles de anterior y siguiente deben ser botones enfocables con teclado. Las diapositivas individuales no deben atrapar el foco. Cada imagen del carrusel necesita un texto alternativo descriptivo.
5. Botones de «Añadir al carrito» sin contexto de producto
El problema: una página de listado de productos tiene varios botones de «Añadir al carrito» con nombres idénticos. Un usuario de lector de pantalla que navegue por botones escucha una lista de controles idénticos sin saber a qué producto corresponde cada uno.
La solución: usa aria-label para distinguir cada botón, por ejemplo: aria-label="Añadir Zapatillas Azules Talla 42 al carrito". O usa aria-describedby para asociar el botón con el nombre visible del producto.
6. Cambios de stock y precio invisibles para los lectores de pantalla
El problema: «Sin stock» se muestra solo como una etiqueta visual o un botón en gris. Los cambios dinámicos de precio se actualizan visualmente pero nunca se anuncian.
La solución: comunica el estado en el código, no solo visualmente. Los botones agotados deben ir como disabled con aria-disabled="true" o con su nombre accesible actualizado. Los cambios dinámicos de precio deberían usar regiones ARIA live para que los lectores de pantalla anuncien la actualización.
7. Sesiones que caducan sin aviso
El problema: las sesiones de checkout caducan sin aviso, descartando el carrito y todos los datos del formulario. Para las personas que escriben despacio o usan lector de pantalla, completar un formulario lleva mucho más tiempo.
Aquí entra en juego el criterio WCAG 2.2.1. Las sesiones deben permitir al menos 20 horas, avisar al usuario antes de caducar con una opción para extenderlas, o permitir volver a autenticarse sin perder los datos.
La solución: añade un aviso antes de que caduque la sesión con una opción clara para ampliarla.
8. Páginas de confirmación de pedido que dependen solo del diseño visual
El problema: la página de confirmación comunica el éxito mediante iconos, banners de color y jerarquía visual, pero nada se confirma de forma programática.
Una persona usuaria de lector de pantalla puede no saber que su pedido se ha completado.
La solución: el título de la página debería confirmar el pedido. El encabezado principal de confirmación debería ser un H1. Los detalles del pedido deberían presentarse en una tabla o lista accesible.
Un enfoque por prioridades para arreglar la accesibilidad de tu eCommerce
No hace falta arreglarlo todo a la vez. Trabaja en tu sitio por orden de impacto en el recorrido del usuario:
- Flujo de checkout: la inaccesibilidad aquí impide directamente completar la compra.
- Páginas de detalle de producto: textos alternativos, botones de añadir al carrito y selección de variantes.
- Búsqueda y filtrado: acceso por teclado al descubrimiento de productos.
- Páginas de listado de productos: etiquetado de botones y textos alternativos a escala.
- Gestión de cuenta y pedidos: formularios y tablas del historial de pedidos.
Empieza por arriba. Cada mejora que hagas en el checkout tiene un impacto inmediato y medible para quienes intentan comprarte.
Conclusión
La mayoría de los fallos de accesibilidad en eCommerce tienen solución. Requieren atención deliberada a las etiquetas de formularios, las interacciones por teclado, los textos alternativos y los anuncios en vivo, pero ninguno está fuera del alcance de un equipo que sepa qué buscar.
El mayor riesgo es no saber qué está roto. Las herramientas automatizadas detectan cerca del 30 % de los problemas de accesibilidad. El resto requiere pruebas manuales con lectores de pantalla reales y navegación solo con teclado.
Hazte una auditoría de accesibilidad para tu eCommerce
¿No sabes en qué punto está tu sitio? Reserva una consulta gratuita de accesibilidad y descubre exactamente qué está bloqueando a tus clientes.
Uxaria audita sitios de eCommerce de forma manual, con lectores de pantalla reales, en múltiples navegadores y dispositivos. Obtienes un informe priorizado que indica al equipo qué corregir primero, y te acompañamos en cada solución.
Sin escaneos automatizados. Sin checklists genéricas. Solo una imagen clara del estado de tu sitio y qué hacer a continuación.