Checklist WCAG AA para tiendas online: 15 puntos a comprobar
La siguiente lista recoge los problemas de accesibilidad más frecuentes que vemos en las tiendas online. La mayoría puedes comprobarlos por tu cuenta, sin conocimientos especializados — y una parte los detectará por ti nuestro escáner gratuito. Los puntos están ordenados de más sencillos a más difíciles.
Texto e imágenes
1. Contraste del texto (WCAG 1.4.3)
El texto gris claro sobre fondo blanco es un clásico de las tiendas online — y uno de los errores más frecuentes. El texto normal debe tener un contraste mínimo de 4,5:1; el texto grande (encabezados de más de unos 24 px), 3:1. Revisa especialmente: precios, descripciones de productos, textos del pie de página y mensajes de promociones.
2. Textos alternativos de las fotos de productos (WCAG 1.1.1)
Cada foto de producto necesita un atributo alt con una descripción, p. ej. alt="Mochila urbana negra de 20 l con bolsillo para portátil".
Una persona ciega «recorre» la tienda con un lector de pantalla: sin descripciones, compra a ciegas.
Las imágenes puramente decorativas deben marcarse con un alt="" vacío.
3. Ampliación del texto hasta el 200% (WCAG 1.4.4)
Una persona con baja visión amplía la página en el navegador (Ctrl y +). Comprueba que al 200%
nada se «desarma»: los precios no se salen de la pantalla y los botones «Comprar» siguen visibles.
No bloquees el zoom con los dedos en el móvil (user-scalable=no es una infracción).
Navegación y teclado
4. Toda la compra sin ratón (WCAG 2.1.1)
Aparta el ratón y recorre con la tecla Tab todo el proceso: búsqueda del producto → ficha del producto → carrito → formulario de envío → pago. Si en algún punto te «atascas», el cliente con discapacidad también se atascará.
5. Foco visible (WCAG 2.4.7)
Al avanzar con la tecla Tab, debes ver claramente qué elemento está activo
(contorno, resaltado). Muchas plantillas eliminan el outline «porque queda feo»:
es un error. Puedes darle un estilo bonito, pero no lo elimines.
6. Enlace «Saltar al contenido» (WCAG 2.4.1)
Un usuario de teclado no debería tener que pasar por 30 elementos del menú en cada subpágina. El primer elemento de la página debería permitir saltar directamente al contenido principal.
7. Títulos de página con sentido (WCAG 2.4.2)
Cada subpágina debe tener un <title> único: «Mochilas urbanas – Tienda X»,
y no «Tienda X» en todas partes. El título es lo primero que oye el usuario de un lector de pantalla.
Formularios y proceso de compra
8. Etiquetas de los campos de formulario (WCAG 3.3.2)
Cada campo (nombre, dirección, código postal, correo electrónico) debe tener una etiqueta asociada
(<label>), no solo un placeholder: el placeholder desaparece al escribir
y no es leído correctamente por todos los lectores.
9. Mensajes de error claros (WCAG 3.3.1, 3.3.3)
«Error en el formulario» no es suficiente. Escribe qué está mal y cómo corregirlo: «El código postal debe tener el formato 00000». El error no puede comunicarse solo con color (un marco rojo no le dice nada a una persona ciega).
10. Botones con nombre claro (WCAG 4.1.2)
Un icono de carrito sin ningún texto es, para un lector de pantalla, un «botón» — sin información
sobre lo que hace. Añade aria-label="Añadir al carrito" o texto visible.
Estructura y multimedia
11. Jerarquía de encabezados (WCAG 1.3.1)
Los encabezados son el índice de la página: un <h1>, luego <h2>,
<h3> — sin saltar niveles «porque queda más bonito».
La apariencia se cambia en CSS, no con niveles de encabezado.
12. Idioma de la página (WCAG 3.1.1)
Asegúrate de tener <html lang="es">. Sin eso, el lector de pantalla
leerá la oferta en español con acento inglés: suena cómico, pero es un problema real.
13. Subtítulos y transcripciones para vídeo (WCAG 1.2.2)
¿Un vídeo que presenta un producto? Añade subtítulos. No solo ayuda a las personas con discapacidad auditiva: la mayoría de los usuarios ve los vídeos sin sonido.
14. Tamaño de los elementos táctiles (WCAG 2.5.8)
Los botones y enlaces en el móvil deben medir al menos 24×24 px (recomendado 44×44 px). Una diminuta «×» que cierra un popup o enlaces minúsculos en el pie de página frustran a todo el mundo, no solo a las personas con discapacidad.
15. Declaración de accesibilidad
Informa a los usuarios del estado de accesibilidad de tu sitio y dales un canal para reportar problemas. Genera confianza y demuestra buena voluntad (nuestro generador gratuito de declaraciones está disponible en polaco).
¿Por dónde empezar?
No tienes que arreglarlo todo a la vez. Empieza con un escaneo gratuito, que señalará los puntos de esta lista presentes en tu sitio; después corrige los contrastes y los atributos alt (las reparaciones más frecuentes y más baratas) y, por último, ocúpate del teclado y los formularios. El informe PDF completo de todo el dominio (hasta 20 páginas) cuesta 35 €.
Comprueba los puntos 1–12 automáticamente
Nuestro escáner comprueba la mayoría de los puntos técnicos de esta lista en 60 segundos.