Lista de comprobación WCAG 2.2 AA para tiendas online

Lista WCAG 2.2 AA para tiendas Shopify y WooCommerce por tipo de página: texto alternativo, contraste, etiquetas, teclado, foco, tamaño táctil y novedades.

Equipo editorial de FixReports12 min de lectura

Una lista de comprobación WCAG 2.2 AA para una tienda online empieza por los fallos que aparecen en la mayoría de las plantillas de tienda: falta de texto alternativo, texto con poco contraste, enlaces y botones sin nombre accesible, campos de formulario sin etiqueta, trampas de teclado y foco invisible. WCAG 2.2 añade además comprobaciones AA que afectan mucho a las tiendas: elementos con el foco ocultos bajo barras fijas (2.4.11), objetivos táctiles de menos de 24 por 24 píxeles CSS (2.5.8) e inicios de sesión que obligan a recordar o volver a escribir datos (3.3.8). Prueba cada tipo de página (inicio, colección, producto, carrito) con el teclado y con una herramienta automática, y luego corrige las plantillas del tema para que todas las páginas hereden la corrección.

Puntos clave

  • WCAG 2.2 se convirtió en Recomendación del W3C el 5 de octubre de 2023. La edición vigente está fechada el 12 de diciembre de 2024 y se aprobó como ISO/IEC 40500:2025 (se abre en una pestaña nueva).
  • En el WebAIM Million 2026 (se abre en una pestaña nueva) (datos de febrero de 2026), el 95.9% del millón de páginas de inicio más populares tenía fallos de WCAG 2 detectables.
  • Los seis fallos más comunes fueron texto con poco contraste (83.9% de las páginas), falta de texto alternativo (53.1%), falta de etiquetas de formulario (51%), enlaces vacíos (46.3%), botones vacíos (30.6%) y falta del idioma de la página (13.5%).
  • Las 42 516 páginas de inicio de Shopify de esa muestra tenían una media de 75.1 errores detectados, frente a 56.1 en el conjunto de las páginas.
  • WCAG 2.2 añade cuatro criterios AA (2.4.11, 2.5.7, 2.5.8, 3.3.8) y dos de nivel A (3.2.6, 3.3.7), y elimina el 4.1.1 Procesamiento.

¿Qué cambió en WCAG 2.2 para las tiendas online?

WCAG 2.2 añadió nueve criterios de conformidad, seis de ellos de nivel A o AA, y eliminó el 4.1.1 Procesamiento por obsoleto (W3C WAI (se abre en una pestaña nueva)).

Criterio nuevoNivelQué significa en una tienda
2.4.11 Foco no oculto (mínimo)AAUn enlace o botón con el foco no debe quedar completamente oculto por un encabezado fijo, una barra fija de «Añadir al carrito», un banner de cookies o un widget de chat
2.5.7 Movimientos de arrastreAATodo lo que requiera arrastrar, como un control deslizante de rango de precios, necesita una alternativa con un solo toque
2.5.8 Tamaño del objetivo (mínimo)AALos objetivos de clic y de toque miden al menos 24 por 24 píxeles CSS, o están separados de forma que un círculo de 24 px alrededor de cada uno no toque a los vecinos
3.2.6 Ayuda coherenteALos enlaces de ayuda, los datos de contacto o el chat aparecen en el mismo orden relativo en todas las páginas
3.3.7 Entrada redundanteANo pidas la misma información dos veces en un mismo proceso; rellénala automáticamente o deja que la persona la seleccione
3.3.8 Autenticación accesible (mínima)AAEl inicio de sesión no debe depender de memorizar o transcribir, salvo que haya una alternativa o una ayuda, como poder pegar o usar gestores de contraseñas

Los otros tres (2.4.12, 2.4.13 y 3.3.9) son de nivel AAA. Como 2.2 conserva todos los criterios de 2.1 excepto el 4.1.1, cumplir 2.2 AA también cubre 2.1 AA.

¿Qué criterios de WCAG fallan con más frecuencia en las plantillas de tienda?

Se repiten los mismos cada año: contraste, texto alternativo, etiquetas de formulario y nombres de enlaces y botones, además de problemas de teclado y de foco que las herramientas automáticas solo detectan en parte.

CriterioQué falla en las tiendasCómo corregirlo
1.1.1 Contenido no textual (A)Imágenes de producto sin texto alternativo o con el nombre del archivo como texto alternativo; imágenes enlazadas sin textoDescribe el producto que se muestra (color, estilo, ángulo). Usa alt="" solo para la decoración. Los temas de Shopify deberían generar image.alt
1.4.3 Contraste (mínimo) (AA)Texto gris claro en el cuerpo, texto de marcador de posición (placeholder), distintivos de oferta, texto sobre imágenes principales (hero)4.5:1 para texto normal, 3:1 para texto grande (unos 24 px, o 18.5 px en negrita) (W3C (se abre en una pestaña nueva))
2.4.4 Propósito de los enlaces (A), 4.1.2 Nombre, función, valor (A)Enlaces de carrito, búsqueda y redes sociales con solo un icono; flechas de carrusel; botones de cierre «X» sin nombreDa a cada control un texto visible o un aria-label, como «Carrito, 2 artículos»
1.3.1 Información y relaciones (A), 3.3.2 Etiquetas o instrucciones (A)Campos de newsletter y de búsqueda con solo texto de marcador de posición; campos de cantidad sin etiquetaUsa un <label for> que coincida con el id del campo; agrupa las muestras que funcionan como botones de opción en un fieldset con un legend
2.1.1 Teclado (A), 2.1.2 Sin trampas para el foco del teclado (A)Menús que solo funcionan al pasar el ratón, muestras creadas con elementos div, ventanas emergentes que no se pueden cerrar con el tecladoUsa elementos button y a reales; la tecla Escape cierra las capas superpuestas y devuelve el foco
2.4.7 Foco visible (AA)outline: none en el CSS del temaAñade un estilo :focus-visible que destaque sobre el fondo

WebAIM también descubrió que una de cada cuatro imágenes enlazadas no tenía texto alternativo, y que el 45% de las imágenes sin texto alternativo eran enlaces (WebAIM (se abre en una pestaña nueva)). En una cuadrícula de colección, eso suele corresponder al enlace de la imagen del producto.

¿Qué debes revisar en la página de inicio?

Revisa el encabezado, la imagen principal y todo lo que aparezca de forma emergente, porque es lo primero que encuentra cualquier visitante.

  • Enlace para saltar al contenido. Un enlace «Saltar al contenido» como primer elemento que puede recibir el foco (2.4.1 Evitar bloques, A).
  • Iconos del encabezado. Los iconos de búsqueda, cuenta y carrito tienen nombres accesibles, y el nombre del carrito incluye el número de artículos.
  • Menú. Se abre con Enter o con la barra espaciadora, se llega a los subelementos con Tab, se cierra con Escape y no depende de pasar el ratón por encima (2.1.1). Los requisitos de la Theme Store (se abre en una pestaña nueva) de Shopify indican que todas las partes de una página, incluidos los menús desplegables, deben ser accesibles con el teclado.
  • Carrusel principal. Si las diapositivas avanzan solas durante más de cinco segundos, ofrece un control para pausarlas (2.2.2 Poner en pausa, detener, ocultar, A).
  • Barra de anuncios y texto sobre imágenes. Mide el contraste; los colores de marca a menudo no alcanzan 4.5:1.
  • Ventanas emergentes y banners de cookies. Mueve el foco a la ventana emergente, etiqueta el campo de email, permite cerrarla con Escape y asegúrate de que un banner fijo nunca tape por completo el elemento con el foco (2.4.11). El W3C menciona la propiedad CSS scroll-padding como una forma de evitar que las barras fijas tapen los elementos con el foco (W3C (se abre en una pestaña nueva)).
  • Idioma de la página. El elemento html tiene un atributo lang correcto (3.1.1 Idioma de la página, A).

¿Qué debes revisar en las páginas de colección?

Las páginas de colección suelen fallar en las tarjetas de producto, los filtros y las muestras.

  • Tarjetas de producto. El enlace de la imagen tiene texto alternativo, o la imagen está oculta para las tecnologías de apoyo y el enlace del título lleva el nombre.
  • Filtros. Cada casilla de verificación tiene una etiqueta y cada grupo tiene un encabezado o una leyenda. El panel de filtros se abre, funciona y se cierra con el teclado. Anuncia el número actualizado de resultados como mensaje de estado (4.1.3 Mensajes de estado, AA).
  • Controles deslizantes de precio. Añade campos numéricos de mínimo y máximo para que el filtro funcione sin arrastrar (2.5.7) y sin ratón (2.1.1).
  • Muestras de color. Cada muestra tiene un nombre en texto, y «agotado» no se indica solo con el color (1.4.1 Uso del color, A). Las muestras miden 24 por 24 píxeles CSS o cumplen la regla de separación (2.5.8).
  • Ordenación y paginación. El desplegable de ordenación tiene una etiqueta; los enlaces de página y los botones «Cargar más» cumplen el tamaño del objetivo.

¿Qué debes revisar en las páginas de producto?

La página de producto sostiene la decisión de compra, así que prueba todos los controles entre las fotos y el botón «Añadir al carrito».

  • Galería. Cada imagen tiene texto alternativo, las miniaturas son botones con nombres como «Mostrar imagen 2» y las flechas funcionan sin arrastrar (2.5.7).
  • Selectores de variantes. Las opciones de talla y color están en un grupo con etiqueta (1.3.1), la opción seleccionada se expone a los lectores de pantalla (4.1.2) y las tallas no disponibles se indican con texto.
  • Cantidad. El campo tiene una etiqueta, y los botones de menos y más tienen nombre y cumplen el 2.5.8. La Theme Store de Shopify exige ahora objetivos táctiles de al menos 24 por 24 píxeles CSS, y sus prácticas recomendadas de accesibilidad (se abre en una pestaña nueva) recomiendan 44 por 44 para los controles principales.
  • Añadir al carrito. Los mensajes de éxito y de error se anuncian (4.1.3). La demanda de la FTC contra un proveedor de overlays citaba un sitio en el que un lector de pantalla no anunciaba que se había añadido un artículo al carrito, y en el que un gráfico de valoración de 5 estrellas se leía en voz alta como un botón «anterior» (demanda de la FTC (se abre en una pestaña nueva)).
  • Valoraciones, pestañas y acordeones. Las valoraciones tienen texto como «4.5 de 5 estrellas». Los acordeones indican si están desplegados.
  • Barra fija de «Añadir al carrito». No debe tapar por completo el elemento con el foco cuando un usuario de teclado recorre la página con Tab (2.4.11).
  • Vídeo. Los vídeos de producto con voz tienen subtítulos (1.2.2 Subtítulos (grabados), A).

¿Qué debes revisar en el carrito y en el inicio de sesión?

El carrito es la última página que la mayoría de los temas controla por completo, así que pruébalo hasta llegar al botón de pago y luego comprueba que el inicio de sesión en la cuenta no dependa de la memoria ni de volver a escribir datos.

  • Carrito lateral. El foco pasa al panel, se mantiene dentro mientras está abierto y vuelve al botón del carrito cuando Escape lo cierra, como describen las prácticas recomendadas de Shopify.
  • Líneas de pedido. Cada campo de cantidad está etiquetado con el nombre del producto, y cada botón de eliminar indica qué elimina, como «Eliminar Camisa de lino, talla M».
  • Campos de descuento y de nota. Tienen etiqueta, y los errores se describen con texto (3.3.1 Identificación de errores, A).
  • Botón de pago. Se puede llegar a él con Tab, el foco es visible y no queda oculto detrás de elementos fijos.
  • Inicio de sesión (3.3.8). Las cuentas de cliente de Shopify usan por defecto el inicio de sesión sin contraseña con un código de un solo uso (se abre en una pestaña nueva). El W3C indica que los códigos deben poder pegarse o rellenarse automáticamente, y que bloquear la función de pegar o los gestores de contraseñas incumple el criterio; los CAPTCHA de reconocimiento de objetos se permiten en el nivel AA, pero los CAPTCHA de rompecabezas o de cálculos necesitan otro método (W3C (se abre en una pestaña nueva)).

Las diferencias entre plataformas importan aquí. En Shopify, checkout.liquid ya no se admite (se abre en una pestaña nueva) en los pasos de información, envío y pago, así que la mayor parte del marcado de la finalización de compra es de Shopify y no de tu tema; prueba las apps y las personalizaciones del checkout que añadas. En WooCommerce, la finalización de compra es una página de tu sitio WordPress. WooCommerce afirma que su front end principal cumple sustancialmente WCAG 2.2 AA (declaración actualizada por última vez el 1 de abril de 2025), pero tu tema y tus plugins aún pueden estropearlo (WooCommerce (se abre en una pestaña nueva)).

¿Cómo probar una tienda con esta lista de comprobación?

Combina un análisis automático con una compra solo con teclado y una comprobación breve con lector de pantalla, en cada tipo de página.

  1. Análisis automático. Herramientas como axe, WAVE o Lighthouse detectan problemas de contraste, texto alternativo, etiquetas y enlaces vacíos. La Theme Store de Shopify pide una puntuación media de accesibilidad en Lighthouse de al menos 90 en las páginas de inicio, colección y producto. Eso es un mínimo, no la conformidad: el W3C indica que las herramientas no pueden determinar la accesibilidad por sí solas (se abre en una pestaña nueva).
  2. Compra solo con teclado. Desde la página de inicio, llega a un producto a través del menú o de la búsqueda, filtra, elige una variante, añádela al carrito, abre el carrito y llega al botón de pago sin ratón.
  3. Comprobación puntual con lector de pantalla. Con VoiceOver o NVDA, escucha el nombre del producto, el precio, el estado de la variante y la confirmación de que se ha añadido al carrito.
  4. Vuelve a probar después de los cambios. Las actualizaciones del tema y las apps nuevas pueden deshacer las correcciones.

Nuestro análisis gratuito cubre el paso 1 en una página de inicio, una de colección, una de producto, el carrito y una página de contenido, en Chromium real con axe-core. El Informe de Accesibilidad analiza hasta 25 páginas, añade el paso 2 con una prueba de compra solo con teclado hasta el botón de pago, incluye el código de antes y después y una lista de comprobación para el paso 3, que requiere una persona con un lector de pantalla. Ninguno de los dos garantiza el cumplimiento de la ADA ni de WCAG.

Preguntas frecuentes

¿Es WCAG 2.2 obligatorio por ley para las tiendas online de EE. UU.?

El Departamento de Justicia no tiene ningún reglamento de la ADA que fije un estándar web para las empresas privadas, y su guía sobre accesibilidad web de 2022 (se abre en una pestaña nueva) presenta WCAG como una orientación útil. Las cartas de reclamación suelen citar WCAG 2.1 o 2.2 AA, así que habla con un abogado sobre tus obligaciones concretas.

¿Cumplir WCAG 2.2 AA también supone cumplir WCAG 2.1 AA?

Sí, a efectos prácticos. WCAG 2.2 conserva todos los criterios de conformidad de WCAG 2.1 excepto el 4.1.1 Procesamiento, que el W3C eliminó por obsoleto.

¿Cuál es el tamaño mínimo del objetivo en WCAG 2.2?

Según el 2.5.8, los objetivos deben medir al menos 24 por 24 píxeles CSS, salvo que un círculo de 24 px centrado en cada objetivo más pequeño no toque otros objetivos ni sus círculos. Están exentos los enlaces dentro de frases, los controles del navegador sin estilo, los casos en que la presentación es esencial y los objetivos que cuentan con un control equivalente que sí cumple.

¿Una puntuación de accesibilidad de 100 en Lighthouse significa que mi tienda es conforme?

No. Las herramientas automáticas solo detectan algunos fallos, y WebAIM señala que no detectar errores no significa que una página sea accesible o conforme.

¿Un inicio de sesión con contraseña incumple el 3.3.8?

No por sí solo. Un campo de contraseña cumple cuando se puede pegar en él y usar un gestor de contraseñas; lo que incumple el criterio es bloquear la función de pegar o el autocompletado.

¿Con qué frecuencia debo volver a probar mi tienda?

Vuelve a probarla después de cada actualización del tema, cada app nueva o cada cambio importante de plantilla, y revisa con regularidad el recorrido de compra, ya que las apps pueden insertar marcado nuevo sin previo aviso.

Fuentes

Todas las guías