Herramienta gratis · Accesibilidad

Verificador de accesibilidad web

Ingresa tu dirección y probamos esa página y hasta cuatro páginas clave en un navegador real con las reglas de WCAG 2.2 de nivel A y AA. Cada barrera incluye el elemento, la página, una captura de pantalla y una explicación de a quién afecta.

Gratis. Prueba hasta cinco páginas clave en alrededor de un minuto.

Qué revisa esta herramienta

  • Cinco páginas que representan tu sitio

    La página que ingresas y hasta cuatro páginas elegidas entre sus enlaces según el tipo de sitio. En una tienda, eso significa una colección, un producto, el carrito y una página de contenido; en otros sitios, páginas como precios, contacto, un artículo o servicios. Las plantillas se repiten, así que una sola página de producto suele mostrar los problemas de todas.

  • Reglas WCAG sobre la página renderizada

    Cada página se carga en Chromium a 1366 × 900 y axe-core, el motor de reglas de código abierto de Deque, ejecuta sus reglas de WCAG 2.0, 2.1 y 2.2 de nivel A y AA después de que corren los scripts de la página. Así detecta problemas que un tema o una app solo generan cuando la página ya se armó en el navegador.

  • Impacto y criterios de conformidad

    Cada regla que falla muestra su impacto (crítico, grave, moderado o menor), los criterios de conformidad de WCAG a los que corresponde y a cuántos elementos y páginas afecta.

  • El elemento que falla, resaltado

    El HTML de un elemento de ejemplo y una captura de pantalla de la página con ese elemento resaltado, para que tú o tu desarrollador puedan encontrarlo en la plantilla sin tener que adivinar.

  • Elementos que debe decidir una persona

    Cuando axe-core encuentra algo que no puede resolver, como un texto sobre una imagen de fondo cuyo contraste no puede medir, el elemento aparece como “Requiere revisión”. Nunca se cuenta como una falla.

  • Una prueba con el teclado

    En la primera página presionamos Tab 40 veces y registramos a dónde va el foco: si se mueve, si queda atrapado en un ciclo (a menudo dentro de un banner de cookies), si la primera parada es un enlace para saltar al contenido y qué elementos enfocados no muestran ningún indicador de foco visible. Esta última verificación es heurística, por eso se muestra como “Requiere revisión”.

Qué no puede revisar

  • Escuchar lo que anuncia un lector de pantalla. El software puede confirmar que un botón tiene nombre, pero no que ese nombre tenga sentido al leerse en voz alta.
  • Juzgar los subtítulos, las transcripciones o la audiodescripción de videos y audios.
  • Evaluar los criterios cognitivos y de contenido, como si las instrucciones son claras o si los mensajes de error ayudan a las personas a corregir el problema.
  • Probar páginas protegidas con inicio de sesión, contraseña o protección contra bots, ni completar un proceso de pago.
  • Decirte si tu sitio es conforme con WCAG o si cumple alguna ley. Las reglas automatizadas encuentran una parte de los problemas; para el resto se necesitan personas.

Por qué es importante

Las barreras de accesibilidad suelen ser pequeños errores de plantilla con grandes efectos. Un botón de carrito que solo tiene un ícono y no tiene nombre accesible se anuncia simplemente como “botón”, así que una persona que usa lector de pantalla no puede saber qué hace. El texto gris sobre blanco que no alcanza la relación de contraste de 4.5:1 es difícil de leer para muchas personas con baja visión, y para cualquiera que use el celular bajo el sol intenso.

Como el mismo encabezado, la misma tarjeta de producto y el mismo pie de página aparecen en todas las páginas, una sola corrección en una plantilla puede eliminar cientos de fallas a la vez. Por eso los resultados se agrupan por regla, con el número de elementos y de páginas, en lugar de listar cada caso como un problema aparte.

La accesibilidad también tiene un aspecto legal en muchos países. Un análisis no puede decirte si una ley te aplica ni si la cumples. Lo que te da es una lista fechada de barreras reales en tus propias páginas, que en cualquier caso es el punto de partida práctico.

Cómo interpretar los resultados

Crítico
La barrera puede impedir por completo que algunas personas usen el elemento, por ejemplo un campo de formulario sin etiqueta o un botón sin nombre. Corrige estos primero.
Grave
La barrera hace que una tarea sea mucho más difícil para algunas personas, como un texto de cuerpo que no alcanza la relación de contraste.
Moderado
La barrera causa dificultad o confusión, pero normalmente las personas pueden sortearla.
Menor
Un problema o una molestia pequeña. Aun así, vale la pena corregirlo la próxima vez que edites esa plantilla.
Criterios de conformidad de WCAG
Los números junto a una regla, como 1.1.1 o 1.4.3, son los criterios que evalúa. Una regla sin ningún criterio indicado es una buena práctica, no un requisito de WCAG.
Elementos y páginas
Cuántos elementos no pasaron la regla y en cuántas de las páginas probadas. Una regla que falla en todas las páginas suele estar en una parte compartida, como el encabezado, el menú o el pie de página.
Requiere revisión
axe-core encontró algo que no pudo decidir. Revisa el elemento tú mismo: puede cumplir o fallar. Estos elementos no se cuentan como fallas.
Trampa de foco
Tab siguió recorriendo una y otra vez los mismos pocos elementos. Si pertenecen a un banner de cookies, es posible que quienes usan el teclado no puedan llegar al resto de la página.
El foco no se mueve (Focus doesn’t move)
Al presionar Tab, nunca se enfocó nada. Es posible que los enlaces y los botones estén hechos con elementos div o span, o que un script esté interceptando la tecla.
Enlace para saltar al contenido
Si la primera parada de Tab es un enlace “Saltar al contenido”. Sin él, quienes usan el teclado tienen que recorrer todo el encabezado en cada página. Las regiones (landmarks) y los encabezados también pueden cumplir el criterio 2.4.1 Evitar bloques de WCAG.
Sin indicador de foco visible
Elementos enfocados en los que no vimos contorno (outline), sombra (box shadow) ni subrayado. Otro estilo, como un cambio de color, puede ser visible de todos modos, así que recórrelos tú con Tab para confirmarlo.

Cómo corregir los problemas más comunes

  • Texto que no alcanza la relación de contraste

    El texto normal necesita al menos 4.5:1 respecto a su fondo, y el texto grande (unos 24 px, o unos 18.7 px en negrita) necesita 3:1. Cambia el color en la configuración del tema o en los tokens de diseño, no elemento por elemento, y luego vuelve a revisar el texto de marcador de posición (placeholder), los estados al pasar el mouse (hover) y el texto sobre imágenes.

  • Imágenes sin texto alternativo

    Dale a cada imagen con significado un atributo alt que diga lo que muestra o lo que hace, como el nombre y el color del producto. Las imágenes decorativas llevan un alt vacío (alt="") para que los lectores de pantalla las omitan. En Shopify, el texto alternativo se agrega desde la imagen, en la sección Multimedia del producto; en WordPress, en el campo Texto alternativo de la Biblioteca de medios.

  • Campos de formulario sin etiqueta

    Asocia una etiqueta a cada campo con <label for> que coincida con el id del campo, o usa aria-label cuando no haya texto visible. No uses el texto de marcador de posición como única etiqueta: desaparece en cuanto alguien empieza a escribir. Los formularios de suscripción al boletín y los buscadores del encabezado son los culpables habituales.

  • Botones y enlaces sin nombre accesible

    Los controles con ícono del carrito, la búsqueda, el menú o los perfiles en redes sociales a menudo solo contienen un SVG. Agrega texto visible o un aria-label que diga qué hace el control (“Abrir carrito”, no “ícono”) y agrega aria-hidden="true" al propio SVG.

  • Un banner de cookies que atrapa el foco

    Asegúrate de que se pueda llegar a cada botón del banner con Tab y usarlo con Enter o la barra espaciadora, de que al cerrar el banner el foco vuelva a la página y de que un banner que no bloquea la página no retenga el foco en absoluto. Revisa la configuración de tu herramienta de consentimiento y actualízala si el script es antiguo.

  • Contornos de foco eliminados en el CSS

    Busca en tus hojas de estilo outline: none u outline: 0 en enlaces, botones y :focus. Reemplázalo por un estilo visible como :focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }.

Preguntas sobre esta herramienta

¿Este verificador de accesibilidad es gratis?

Sí. No necesitas registrarte; solo confirmas que eres dueño del sitio o que lo administras. El Reporte de Accesibilidad de pago agrega hasta 20 páginas más de tu sitemap, un recorrido solo con teclado, una verificación de reflujo a 320 px, código de antes y después creado a partir de tu marcado que falla, prompts de IA, un PDF y 5 reevaluaciones.

¿Qué parte de WCAG puede probar un verificador automatizado?

Solo una parte. Una regla puede verificar que una imagen tiene texto alternativo, pero no que ese texto describa la imagen, y que un campo tiene etiqueta, pero no que la etiqueta sea clara. Toma los resultados como una lista de problemas seguros y luego prueba el resto con el teclado y un lector de pantalla.

Si el análisis no encuentra nada, ¿mi sitio cumple con la ADA o con WCAG?

No. Ninguna prueba automatizada puede demostrar que un sitio es conforme con WCAG o que cumple la ADA, la Ley Europea de Accesibilidad ni ninguna otra ley. Un resultado limpio significa que las reglas automatizadas no encontraron fallas en las páginas probadas.

¿Puedo verificar un sitio de staging o páginas protegidas con inicio de sesión?

No se pueden probar páginas protegidas con inicio de sesión, contraseña o protección contra bots. Si tu protección contra bots bloquea el análisis, permite el user agent FixReportsScanner o prueba una copia pública de staging.

Corregí un problema. ¿Por qué el resultado se ve igual?

Los resultados de una misma dirección pueden reutilizarse de un análisis hecho en la última hora. Espera a que pase esa hora y borra la caché de la página o de la CDN antes de volver a probar.

Fuentes

Herramientas relacionadas

El Reporte de Accesibilidad ($174, pago único) parte del análisis gratuito completo y agrega más páginas, el cambio que debes hacer para cada hallazgo, un PDF y reevaluaciones para verificar tus correcciones.

Acerca del Reporte de Accesibilidad