Lista de verificación WCAG 2.2 AA para tiendas en línea

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

Equipo editorial de FixReports12 min de lectura

Una lista de verificación WCAG 2.2 AA para una tienda en línea empieza por los errores 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. Después, WCAG 2.2 agrega verificaciones de nivel AA que afectan mucho a las tiendas: elementos con foco que quedan ocultos bajo barras fijas (2.4.11), objetivos táctiles de menos de 24 × 24 píxeles CSS (2.5.8) e inicios de sesión que obligan a recordar o volver a escribir información (3.3.8). Prueba cada tipo de página (inicio, colección, producto, carrito) con el teclado y con un verificador automático, 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 tiene fecha del 12 de diciembre de 2024 y fue aprobada 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% de las páginas de inicio del millón de sitios principales tenía errores de WCAG 2 detectables.
  • Los seis errores más comunes fueron texto con poco contraste (83.9% de las páginas), falta de texto alternativo (53.1%), falta de etiquetas en formularios (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 tuvieron en promedio 75.1 errores detectados, frente a 56.1 en el total de páginas.
  • WCAG 2.2 agrega cuatro criterios AA (2.4.11, 2.5.7, 2.5.8, 3.3.8) y dos criterios de nivel A (3.2.6, 3.3.7), y elimina 4.1.1 Parsing.

¿Qué cambió en WCAG 2.2 para las tiendas en línea?

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

Criterio nuevoNivelQué significa en una tienda
2.4.11 Focus Not Obscured (Minimum)AAUn enlace o botón con foco no debe quedar totalmente oculto por un encabezado fijo, una barra fija de “Agregar al carrito”, un banner de cookies o un widget de chat
2.5.7 Dragging MovementsAATodo lo que requiera arrastrar, como un control deslizante de rango de precios, necesita una alternativa que funcione con un solo toque
2.5.8 Target Size (Minimum)AALos objetivos de clic y de toque miden al menos 24 × 24 píxeles CSS, o están separados de modo que un círculo de 24 px alrededor de cada uno no toque a sus vecinos
3.2.6 Consistent HelpALos enlaces de ayuda, los datos de contacto o el chat aparecen en el mismo orden relativo en todas las páginas
3.3.7 Redundant EntryANo pidas la misma información dos veces en un mismo proceso; complétala automáticamente o deja que la persona la seleccione
3.3.8 Accessible Authentication (Minimum)AAEl inicio de sesión no debe depender de memorizar ni de transcribir, salvo que exista una alternativa o una ayuda, como poder pegar y usar administradores 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 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?

Cada año aparecen los mismos pocos: 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 Non-text Content (A)Imágenes de producto sin texto alternativo o con el nombre del archivo como texto alternativo; imágenes con enlace sin textoDescribe el producto que se muestra (color, estilo, ángulo). Usa alt="" solo para elementos decorativos. Los temas de Shopify deben mostrar image.alt
1.4.3 Contrast (Minimum) (AA)Texto de cuerpo en gris claro, texto de marcador de posición (placeholder), etiquetas de oferta, texto sobre las imágenes del banner principal4.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 Link Purpose (A), 4.1.2 Name, Role, Value (A)Enlaces de carrito, búsqueda y redes sociales que solo son íconos; flechas de carrusel; botones “X” de cierre sin nombreDale a cada control un texto visible o un aria-label, como “Carrito, 2 artículos”
1.3.1 Info and Relationships (A), 3.3.2 Labels or Instructions (A)Campos de suscripción al boletín y de búsqueda que solo tienen texto de marcador de posición; campos de cantidad sin etiquetaUsa un <label for> que coincida con el id del campo; agrupa las muestras de opción tipo radio en un fieldset con una legend
2.1.1 Keyboard (A), 2.1.2 No Keyboard Trap (A)Menús que solo funcionan al pasar el mouse, muestras de color hechas con 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 Focus Visible (AA)outline: none en el CSS del temaAgrega un estilo :focus-visible que resalte sobre el fondo

WebAIM también encontró que una de cada cuatro imágenes con enlace 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 la cuadrícula de una colección, eso suele ser el enlace de la imagen del producto.

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

Revisa el encabezado, el banner principal y todo lo que aparezca como ventana emergente, porque es lo primero que encuentra cada visitante.

  • Enlace para saltar al contenido. Un enlace “Saltar al contenido” como primer elemento que puede recibir el foco (2.4.1 Bypass Blocks, A).
  • Íconos del encabezado. Los íconos de búsqueda, cuenta y carrito tienen nombres accesibles, y el nombre del carrito incluye la cantidad de artículos.
  • Menú. Se abre con Enter o con la barra espaciadora, los subelementos se alcanzan con Tab, se cierra con Escape y no depende de pasar el mouse 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 se mueven automáticamente durante más de cinco segundos, ofrece un control para pausarlas (2.2.2 Pause, Stop, Hide, A).
  • Barra de anuncios y texto sobre imágenes. Mide el contraste; los colores de marca muchas veces no alcanzan 4.5:1.
  • Ventanas emergentes y banners de cookies. Mueve el foco a la ventana emergente, ponle una etiqueta al campo de correo electrónico, permite cerrarla con Escape y asegúrate de que un banner fijo nunca cubra por completo el elemento con 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 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 Language of Page, 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 de color.

  • Tarjetas de producto. El enlace de la imagen tiene texto alternativo, o la imagen está oculta para las tecnologías de asistencia 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 la cantidad actualizada de resultados como mensaje de estado (4.1.3 Status Messages, AA).
  • Controles deslizantes de precio. Agrega campos numéricos de precio mínimo y máximo para que el filtro funcione sin arrastrar (2.5.7) y sin mouse (2.1.1).
  • Muestras de color. Cada muestra tiene un nombre en texto, y “agotado” no se indica solo con color (1.4.1 Use of Color, A). Las muestras cumplen los 24 × 24 píxeles CSS o la regla de separación (2.5.8).
  • Ordenamiento y paginación. El menú desplegable para ordenar tiene una etiqueta; los enlaces de página y los botones “Cargar más” cumplen el tamaño mínimo de objetivo.

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

En la página de producto se toma la decisión de compra, así que prueba cada control entre las fotos y el botón “Agregar 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 comunica 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 2.5.8. La Theme Store de Shopify ahora exige objetivos táctiles de al menos 24 × 24 píxeles CSS, y sus prácticas recomendadas de accesibilidad (se abre en una pestaña nueva) recomiendan 44 × 44 para los controles principales.
  • Agregar al carrito. Los mensajes de éxito y de error se anuncian (4.1.3). La demanda de la FTC contra un proveedor de overlays de accesibilidad citó un sitio en el que un lector de pantalla no anunciaba que se había agregado un artículo al carrito, y en el que un gráfico de calificación de 5 estrellas se leía en voz alta como un botón “previous” (demanda de la FTC (se abre en una pestaña nueva)).
  • Calificaciones, pestañas y acordeones. Las calificaciones tienen un texto como “4.5 de 5 estrellas”. Los acordeones indican si están expandidos.
  • Barra fija de “Agregar al carrito”. No debe cubrir por completo el elemento con foco mientras un usuario de teclado recorre la página con Tab (2.4.11).
  • Video. Los videos de producto con voz tienen subtítulos (1.2.2 Captions (Prerecorded), 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 checkout y luego verifica que el inicio de sesión en la cuenta no dependa de la memoria ni de volver a escribir datos.

  • Panel lateral del carrito. El foco pasa al panel, permanece ahí mientras está abierto y vuelve al botón del carrito cuando se cierra con Escape, como describen las prácticas recomendadas de Shopify.
  • Artículos del carrito. Cada campo de cantidad está etiquetado con el nombre del producto y cada botón para eliminar dice qué elimina, como “Eliminar Camisa de lino, talla M”.
  • Campos de descuento y de notas. Tienen etiqueta y los errores se describen con texto (3.3.1 Error Identification, A).
  • Botón de checkout. Se puede alcanzar con Tab, muestra el foco de forma visible y no queda oculto detrás de elementos fijos.
  • Inicio de sesión (3.3.8). Las cuentas de cliente de Shopify usan de forma predeterminada 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 completarse automáticamente, y que bloquear la función de pegar o los administradores de contraseñas incumple el criterio; los CAPTCHA de reconocimiento de objetos se permiten en el nivel AA, pero los CAPTCHA de acertijos o de operaciones matemáticas necesitan otro método (W3C (se abre en una pestaña nueva)).

Aquí importan las diferencias entre plataformas. En Shopify, checkout.liquid ya no es compatible (se abre en una pestaña nueva) con los pasos de información, envío y pago, así que la mayor parte del marcado del checkout es de Shopify y no de tu tema; prueba las apps y las personalizaciones de checkout que agregues. En WooCommerce, el checkout es una página de tu sitio de WordPress. WooCommerce afirma que su front end principal es sustancialmente conforme con 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 romper esa conformidad (WooCommerce (se abre en una pestaña nueva)).

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

Combina un análisis automático con una compra hecha solo con el teclado y una revisión breve con un 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 promedio de accesibilidad en Lighthouse de al menos 90 en las páginas de inicio, colección y producto. Eso es un mínimo, no 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 mediante el menú o la búsqueda, filtra, elige una variante, agrégala al carrito, abre el carrito y llega al botón de checkout sin usar el mouse.
  3. Revisió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 al agregar al carrito.
  4. Vuelve a probar después de cada cambio. Las actualizaciones del tema y las apps nuevas pueden deshacer 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 prueba hasta 25 páginas, agrega el paso 2 como una prueba de compra solo con teclado hasta el botón de checkout, entrega el código antes y después de la corrección, e incluye una lista de verificació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

¿WCAG 2.2 es obligatorio por ley para las tiendas en línea de Estados Unidos?

El Departamento de Justicia de Estados Unidos no tiene ninguna regulación de la ADA (ley estadounidense) que fije un estándar web para empresas privadas, y su guía de 2022 sobre accesibilidad web (se abre en una pestaña nueva) menciona WCAG como una orientación útil. Las cartas de reclamación (demand letters) suelen citar WCAG 2.1 o 2.2 AA, así que consulta con un abogado sobre tus obligaciones específicas.

¿Cumplir WCAG 2.2 AA también cumple WCAG 2.1 AA?

Sí, en la práctica. WCAG 2.2 conserva todos los criterios de conformidad de WCAG 2.1 excepto 4.1.1 Parsing, que el W3C eliminó por obsoleto.

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

Según 2.5.8, los objetivos deben medir al menos 24 × 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. Quedan exentos los enlaces dentro de oraciones, los controles del navegador sin estilos, las presentaciones esenciales 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 errores, y WebAIM señala que la ausencia de errores detectados no significa que una página sea accesible o conforme.

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

No por sí mismo. Un campo de contraseña cumple cuando las personas pueden pegar texto en él y usar un administrador de contraseñas; lo que incumple el criterio es bloquear la función de pegar o el autocompletado.

¿Cada cuánto debo volver a probar mi tienda?

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

Fuentes

Todas las guías