Accesibilidad en tiendas online: checklist para cumplir la Ley 11/2023

Por qué importa en una tienda online

En España hay 4,38 millones de personas con discapacidad, según la encuesta EDAD 2020 del INE, y la población envejece: cada vez más clientes navegan con zoom, con lector de pantalla o solo con el teclado.

En una tienda, una barrera no es un detalle: es una venta perdida. Si alguien no puede elegir la talla, añadir al carrito o escribir su dirección, compra en otra web. Y muchas mejoras de accesibilidad, como formularios claros o buen contraste, facilitan la compra a todo el mundo.

Usa este checklist para una primera revisión. Cada punto indica el criterio de WCAG 2.1 relacionado.

1. Navegación y búsqueda

• Hay un enlace «Saltar al contenido» al principio de la página.WCAG 2.4.1
• El menú principal y los submenús se abren y se recorren con teclado.WCAG 2.1.1
• El foco de teclado se ve siempre, también sobre fondos de color.WCAG 2.4.7
• El buscador tiene una etiqueta, no solo un icono de lupa.WCAG 3.3.2, 4.1.2
• Cada página tiene un título único y descriptivo.WCAG 2.4.2
• Los encabezados (H1, H2…) reflejan la estructura del contenido.WCAG 1.3.1

2. Listados y filtros

• Al aplicar un filtro, se anuncia el número de resultados sin mover el foco.WCAG 4.1.3
• Los filtros de color muestran también el nombre del color.WCAG 1.4.1
• Cada producto tiene un enlace con su nombre, no varios «Ver más».WCAG 2.4.4
• La paginación o el botón «Cargar más» funcionan con teclado y no hacen perder la posición.WCAG 2.1.1, 2.4.3
• Las etiquetas de «Oferta» o «Agotado» tienen contraste suficiente.WCAG 1.4.3

3. Ficha de producto

• Las fotos tienen un texto alternativo que describe lo que aportan.WCAG 1.1.1
• La galería y el zoom se manejan con teclado, y los carruseles automáticos se pueden pausar.WCAG 2.1.1, 2.2.2
• Los selectores de talla, color o cantidad tienen nombre y anuncian la opción elegida.WCAG 4.1.2
• El precio, los descuentos y el stock están en texto, no dentro de una imagen.WCAG 1.4.5
• Los vídeos tienen subtítulos, y lo que solo se ve también se cuenta.WCAG 1.2.2, 1.2.5
• Al añadir al carrito, un mensaje lo confirma y el lector de pantalla lo anuncia.WCAG 4.1.3

4. Carrito

• Los botones de cantidad o eliminar dicen a qué producto afectan: «Eliminar zapatilla de running».WCAG 2.4.6, 4.1.2
• Los cambios en el total o en los gastos de envío se anuncian.WCAG 4.1.3
• El minicarrito se cierra con Escape y devuelve el foco al botón que lo abrió.WCAG 2.1.2, 2.4.3
• Si la sesión va a caducar, se avisa antes y se puede ampliar el tiempo.WCAG 2.2.1

5. Checkout y pago

• Cada campo tiene una etiqueta visible, no solo un texto de ejemplo que desaparece al escribir.WCAG 3.3.2
• Los campos de nombre, email, dirección y teléfono admiten autocompletado.WCAG 1.3.5
• Los errores se explican con texto junto al campo y dicen cómo corregirlos.WCAG 3.3.1, 3.3.3
• Antes de pagar se puede revisar y corregir el pedido.WCAG 3.3.4
• El paso actual del proceso se indica con texto, no solo con color.WCAG 1.4.1
• El formulario de la pasarela de pago funciona con teclado y lector de pantalla.WCAG 2.1.1, 4.1.2

Revisa el proceso completo solo con el teclado, de la ficha al «Pedido confirmado». Es el último paso, y cualquier barrera ahí cuesta directamente el pedido. Si ya trabajas con WCAG 2.2, comprueba también que no pides dos veces el mismo dato, como la dirección de facturación cuando coincide con la de envío (3.3.7).

Shopify, WooCommerce y PrestaShop

Ninguna plataforma garantiza por sí sola una tienda accesible. El resultado depende sobre todo de tres cosas:

• El tema o plantilla. Es el origen de la mayoría de los problemas, y también el mejor sitio para corregirlos: un arreglo en la plantilla de ficha de producto se aplica a todo el catálogo.
• Las apps y plugins. Reseñas, chats, ventanas de descuento o banners de cookies añaden código que puede romper la navegación con teclado. Pruébalos antes de instalarlos.
• El contenido. Textos alternativos, descripciones y vídeos los pone tu equipo, y ninguna plataforma los escribe bien por ti.

Desconfía de las apps que prometen «accesibilidad con una línea de código». Añaden un menú de ajustes encima de la tienda, pero no corrigen el HTML de base: un botón que no funciona con teclado sigue sin funcionar.

Después del checklist

Este checklist detecta lo más evidente, pero no sustituye a una auditoría completa contra los 50 criterios de WCAG 2.1 AA. Los siguientes pasos recomendables son:

1. Audita las plantillas principales y el proceso de compra completo.
2. Corrige primero lo que impide comprar.
3. Vuelve a revisar tras cada cambio de tema, plugin o diseño.
4. Publica la información de accesibilidad de tu tienda, como pide la Ley 11/2023.

Con la auditoría gratuita de Standit tienes en 2 minutos la lista de problemas de tu tienda, ordenados por impacto y con fixes concretos para Shopify, WooCommerce y PrestaShop.

Preguntas frecuentes