Criterios de las WCAG 2.2, reglas y revisiones manuales

Localizar los contenidos pregrabados solo de audio (pódcast, clip de sonido) y solo de vídeo (clip de producto sin sonido, animación sin audio). Superado: junto a cada uno hay un enlace directo a una transcripción o a una alternativa equivalente en texto o en audio. No aplicable si la tienda no tiene este tipo de contenidos.

Reproducir cada vídeo pregrabado que contenga voz (demostraciones de producto, vídeos de marca, vídeos incrustados de YouTube o Vimeo). Superado: hay subtítulos disponibles mediante un control CC, un <track kind="captions"> o subtítulos abiertos, y son exactos. Los subtítulos generados automáticamente y sin revisar no superan la comprobación.

Para cada vídeo pregrabado cuyas imágenes transmiten información que no está en el audio (texto en pantalla, manejo del producto, pasos que se muestran pero no se dicen). Superado: se ofrece una versión con audiodescripción o una alternativa textual completa (una transcripción que describe lo que se ve).

Solo para vídeo en directo con audio (eventos de compra en directo, lanzamientos retransmitidos). Superado: se ofrecen subtítulos en tiempo real durante la emisión. No aplicable en tiendas sin vídeo en directo.

Para vídeo pregrabado con imágenes informativas que la banda sonora no cubre. Superado: existe una pista de audiodescripción o una versión del vídeo con audiodescripción. Una alternativa textual por sí sola satisface el criterio 1.2.3, pero no este.

Leer la página de arriba abajo con el lector de pantalla (teclas de flecha o modo de exploración) y compararla con el orden visual. Superado: el título del producto, el precio, las opciones de variante y «Añadir al carrito» aparecen en un orden lógico; las cuadrículas reordenadas con CSS, las barras laterales y los megamenús no desordenan el orden de lectura. Lector de pantalla: Windows: NVDA (gratuito, nvaccess.org) + Chrome. Mac: VoiceOver (Cmd+F5) + Safari.

Buscar en las instrucciones y las indicaciones referencias que dependan solo de la forma, el color, el tamaño, la posición o el sonido: «haz clic en el botón verde», «el campo de la derecha», «mira el recuadro de abajo», «espera a oír el pitido». Superado: cada una de esas instrucciones nombra también el control o da una pista textual.

En un móvil o una tableta (o con la emulación de dispositivos de las herramientas para desarrolladores), abrir la página de inicio, una página de producto, el carrito y el primer paso del proceso de pago, y girar entre vertical y horizontal en cada una. Superado: el contenido y los controles siguen disponibles y se pueden usar en ambas orientaciones, y nada pide al visitante que gire el dispositivo. Solo puede bloquear la orientación el contenido que necesite una concreta para funcionar, algo poco habitual en una tienda.

Revisar cada lugar donde el color transmite significado: la muestra de la variante seleccionada (necesita un borde, una marca de verificación o texto, no solo un cambio de color), los errores de formulario (icono o texto, no solo un borde rojo), los enlaces dentro del texto (subrayado, o un contraste de 3:1 más una señal al pasar el ratón o al recibir el foco) y los indicadores de existencias (un punto verde o rojo necesita texto). Superado: cada significado se transmite también sin color.

Ampliar al 400 % y revisar los banners principales, los distintivos promocionales, los gráficos de «Rebajas» y los mosaicos de categorías. Todo texto que se vuelva borroso es una imagen de texto. Superado: el texto es texto real (salvo logotipos y marcas) o la imagen es esencial (p. ej., una etiqueta impresa que aparece en una foto de producto). Si la tienda genera facturas o recibos en PDF, abrir uno: debe estar basado en texto (el texto se puede seleccionar), no ser una imagen escaneada.

Ampliar al 400 % (Ctrl y + hasta llegar al 400 %, o un viewport de unos 320 px de ancho en las herramientas para desarrolladores). Superado: no hace falta desplazarse en horizontal para leer el contenido (las tablas de datos quedan exentas); el menú, los precios y «Añadir al carrito» siguen presentes y se pueden usar; nada se superpone ni desaparece; las etiquetas de los formularios siguen junto a sus campos. La comprobación automática vs-reflow solo detecta el desplazamiento horizontal.

Activar cada contenido emergente que aparece al pasar el ratón o al recibir el foco: descripciones emergentes, megamenús, guías de tallas, vistas previas del minicarrito, vista rápida de producto. Superado: se puede cerrar con Esc sin mover el puntero, el puntero puede moverse sobre el contenido emergente sin que se cierre, y este sigue abierto hasta que se cierra o hasta que el puntero o el foco salen de él.

Desconectar o ignorar el ratón; usar solo Tab, Shift+Tab, Enter, la barra espaciadora, las flechas y Esc. Recorrer con Tab la página de inicio de arriba abajo. Abrir y cerrar cada menú, menú hamburguesa y desplegable (Enter o la barra espaciadora abren, Esc cierra). Abrir una página de producto, elegir una variante (talla o color) y añadirla al carrito. Abrir el carrito, cambiar una cantidad y eliminar un artículo. Superado: todo se puede alcanzar y manejar, y en todo momento se sabe dónde se está.

Abrir cada ventana modal y emergente (boletín, banner de cookies, guía de tallas, vista rápida, inicio de sesión). Superado: el foco pasa a su interior, Esc la cierra y el foco vuelve a donde estaba. Fallo grave si se puede llegar con Tab a la página que queda detrás de la ventana modal. En el propio banner de cookies, tanto rechazar como aceptar se pueden alcanzar y accionar solo con el teclado, y nada deja el foco atrapado dentro.

Con el foco en el cuerpo de la página (no en un campo), pulsar letras sueltas y signos de puntuación como /, s, k, ?. Superado: no hay ningún atajo de un solo carácter activo; o se puede desactivar o reasignar; o solo funciona mientras el control correspondiente tiene el foco.

Observar durante 10 segundos cada vídeo con reproducción automática, banner animado, GIF, cuenta atrás y efecto al pasar el ratón. Superado: nada destella más de tres veces por segundo y ninguna zona grande parpadea. Confirmar también que cualquier carrusel que avance solo se puede pausar.

Durante el recorrido con el teclado, observar adónde va el foco. Superado: el orden de tabulación sigue la disposición visual; al cerrar un menú o una ventana modal, el foco vuelve al elemento desde el que se abrió; tras actualizar el carrito, usar la búsqueda instantánea o cambiar de diapositiva en un carrusel, el foco se queda donde se dejó y no desaparece al principio de la página.

Confirmar que hay al menos dos formas de llegar a cualquier página: la búsqueda del sitio más el menú de navegación, un mapa del sitio, las migas de pan o los enlaces a productos relacionados. Hacer una búsqueda y abrir un resultado. Superado: funcionan dos vías independientes. Las páginas que son pasos de un proceso (el proceso de pago) quedan exentas.

Leer la lista de encabezados (tecla H del lector de pantalla o el esquema del navegador) y las etiquetas de los formularios. Superado: los encabezados describen su sección (el h1 de la página de producto es el nombre del producto, los encabezados de las páginas de categoría nombran la categoría, sin «Sección 1» ni textos de relleno) y las etiquetas describen la finalidad del campo («Correo electrónico», no «Campo» ni «Introducir»). Lector de pantalla: Windows: NVDA (gratuito, nvaccess.org) + Chrome. Mac: VoiceOver (Cmd+F5) + Safari.

Repetir el recorrido con el teclado y buscar el anillo de foco. Superado: cada elemento enfocado muestra un indicador visible (contorno, anillo, subrayado o un cambio de color claro), de modo que siempre se puede señalar la pantalla y decir «el foco está aquí» sin adivinar, y el indicador se distingue de su fondo incluso con los ojos entornados. La comprobación automática vs-focus-visible no puede valorar lo visible que es el cambio.

Buscar gestos multipunto o basados en trazados: pellizcar para ampliar las imágenes de producto, deslizar los carruseles, deslizar para eliminar en el carrito, arrastrar para desplazar las galerías. Superado: cada uno tiene una alternativa con un solo puntero (botones de zoom, controles de anterior y siguiente, un botón de eliminar).

Pulsar el botón del ratón sobre controles del tipo «Añadir al carrito», «Eliminar» y «Realizar pedido», apartar el puntero del control y soltar. Superado: no ocurre nada (las acciones se ejecutan al soltar) o la acción se puede deshacer.

Con el lector de pantalla, desplazarse a los botones y enlaces que muestran texto visible («Añadir al carrito», «Tramitar pedido», «Aplicar código»). Superado: el nombre anunciado contiene el texto visible; un aria-label como «Comprar ahora» sobre un texto visible «Añadir al carrito» no supera la comprobación. Lector de pantalla: Windows: NVDA (gratuito, nvaccess.org) + Chrome. Mac: VoiceOver (Cmd+F5) + Safari.

Buscar funciones que dependan del movimiento del dispositivo: agitar para deshacer, inclinar para girar un producto, vistas previas de realidad aumentada controladas por movimiento. Superado: un control en pantalla hace lo mismo y la activación por movimiento se puede desactivar. No aplicable en la mayoría de las tiendas.

Buscar fragmentos en un idioma distinto del de la página: eslóganes o nombres de producto en inglés en una tienda alemana o danesa, términos en inglés en las páginas legales, un selector de idioma que muestra cada idioma con su propio nombre. Superado: esos fragmentos llevan un atributo lang (comprobarlo en las herramientas para desarrolladores) y, si hay un selector de idioma, el cambio se anuncia y funciona. Los nombres propios y los préstamos sueltos quedan exentos.

Recorrer con Tab toda la página, incluidos los campos de búsqueda, los desplegables y el banner de cookies. Superado: el simple hecho de enfocar un elemento nunca abre un menú, envía un formulario, mueve el foco a otro sitio ni lleva a otra página.

Con el teclado, cambiar desplegables, botones de opción y casillas de verificación: variante (recorrer las opciones con las flechas), país, método de envío, cantidad, orden. Superado: cambiar un valor no envía el formulario ni navega automáticamente sin aviso; si la página se actualiza, se avisa al usuario de antemano o el cambio se activa con un botón. Los selectores de variante que navegan al pulsar una flecha son un fallo habitual en las tiendas.

Comparar la página de inicio, una de categoría, una de producto, el carrito y el proceso de pago. Superado: la cabecera, la navegación principal, la búsqueda, las migas de pan y el pie de página aparecen en el mismo orden relativo en todas las páginas (el proceso de pago puede reducir la navegación, pero no reordenar lo que queda). Incluir la página 404 y la página de un producto agotado: ambas siguen siendo navegables y llevan la imagen de marca de la tienda. La comprobación automática vs-consistent-help solo cubre la posición del enlace de ayuda.

Comprobar que la misma función tiene el mismo nombre en todas partes: «Añadir a la cesta» frente a «Añadir al carrito», el nombre del icono del carrito, el botón de búsqueda, «Lista de deseos» frente a «Favoritos», el enlace a la cuenta. Superado: las funciones idénticas tienen nombres e iconos idénticos en todas las plantillas.

Con el lector de pantalla en el proceso de pago (y en el inicio de sesión y el registro), enviar un formulario vacío y otro con un correo electrónico y un código postal no válidos. Superado: los errores se anuncian cuando aparecen, identifican qué campo es incorrecto y dicen qué falla. Lector de pantalla: Windows: NVDA (gratuito, nvaccess.org) + Chrome. Mac: VoiceOver (Cmd+F5) + Safari.

Con el lector de pantalla, recorrer con Tab cada campo del proceso de pago, de dirección, de inicio de sesión y del boletín. Superado: cada campo anuncia su etiqueta; los campos obligatorios se identifican como obligatorios (no solo con el color ni con un asterisco sin explicar); las indicaciones de formato (fecha, código postal, teléfono) se dan antes de introducir los datos. Lector de pantalla: Windows: NVDA (gratuito, nvaccess.org) + Chrome. Mac: VoiceOver (Cmd+F5) + Safari.

Introducir un correo electrónico mal formado, un código postal con un formato incorrecto y una fecha de caducidad de tarjeta ya vencida. Superado: cada mensaje de error sugiere cómo corregirlo («Introduce un código postal como 28001», «El correo electrónico debe contener @»), no solo «Entrada no válida», salvo que una sugerencia comprometa la seguridad.

Recorrer el proceso de pago hasta el último paso sin pagar. Superado: antes de realizar el pedido hay un paso de revisión que muestra los artículos, las cantidades, los totales, las direcciones y el método de pago, todo se puede cambiar y la acción final está claramente rotulada (p. ej., «Comprar ahora»). Comprobar también que eliminar la cuenta o una dirección pide confirmación.

Lector de pantalla en todo el recorrido de compra, empezando por la búsqueda del sitio. Superado: el campo de búsqueda anuncia su finalidad y los resultados se anuncian, de modo que se puede llegar a un producto; las muestras de variante anuncian su nombre y si están seleccionadas, los selectores de cantidad y los acordeones anuncian su rol y su estado, el carrito anuncia en orden su contenido, las cantidades y el total, y los campos de tarjeta en iframe (Stripe y similares) anuncian cuál es el número de tarjeta, la fecha de caducidad y el CVC. Debe poder comprarse la talla y el color correctos sin mirar la pantalla. Lector de pantalla: Windows: NVDA (gratuito, nvaccess.org) + Chrome. Mac: VoiceOver (Cmd+F5) + Safari.

Con el lector de pantalla, provocar cambios de estado sin mover el foco: «añadido al carrito», número de artículos del carrito, número de resultados de búsqueda y de filtros, cambio de precio o de existencias al seleccionar una variante, cupón aplicado, formulario guardado y, por último, la confirmación del pedido. Superado: cada uno se anuncia (región dinámica) sin mover el foco; el cliente tiene que saber que ha comprado. La comprobación automática vs-live-updates solo cubre la página de producto. Lector de pantalla: Windows: NVDA (gratuito, nvaccess.org) + Chrome. Mac: VoiceOver (Cmd+F5) + Safari.