Herramienta gratis · Accesibilidad

Comprueba la accesibilidad de tu web

Introduce tu dirección y probaremos 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 aproximadamente un minuto.

Qué comprueba esta herramienta

  • Cinco páginas que representan tu sitio

    La página que introduces 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 página de producto suele mostrar los problemas de todas las demás.

  • Reglas WCAG en 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 se hayan ejecutado los scripts de la página. Así detecta problemas que un tema o una app solo generan cuando la página ya se ha construido en el navegador.

  • Impacto y criterios de conformidad

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

  • El elemento que falla, marcado

    El HTML de un elemento de ejemplo y una captura de pantalla de la página con ese elemento marcado, para que tú o tu desarrollador podáis 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 un fallo.

  • Una prueba con teclado

    En la primera página pulsamos Tab 40 veces y registramos adónde va el foco: si llega a moverse, si se queda atrapado en un bucle (a menudo dentro de un banner de cookies), si la primera parada es un enlace para saltar al contenido y qué elementos con el foco no muestran ningún indicador de foco visible. Esta última comprobación es heurística, así que se muestra como «Requiere revisión».

Qué no puede comprobar

  • 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.
  • Valorar los subtítulos, las transcripciones o la audiodescripción de los vídeos y los 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 lo que ha fallado.
  • Probar páginas protegidas por un inicio de sesión, una contraseña o una protección contra bots, ni recorrer un proceso de pago.
  • Decirte si tu sitio es conforme con WCAG o si cumple alguna ley. Las reglas automatizadas detectan una parte de los problemas; el resto requiere la revisión de 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 icono y carece de nombre accesible se anuncia simplemente como «botón», así que quien usa un lector de pantalla no puede saber para qué sirve. 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 móvil a pleno sol.

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 fallos a la vez. Por eso los resultados se agrupan por regla, con el número de elementos y de páginas, en lugar de mostrar cada caso como un problema distinto.

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

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 del cuerpo que no alcanza la relación de contraste.
Moderado
La barrera causa dificultades o confusión, pero normalmente se puede sortear.
Leve
Un problema o una molestia menor. Aun así, merece 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 comprueba. 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 superaron 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 tú mismo el elemento: puede cumplir o fallar. Estos elementos no se cuentan como fallos.
Trampa de foco
Tab seguía recorriendo una y otra vez los mismos pocos elementos. Si pertenecen a un banner de cookies, es posible que los usuarios de teclado no puedan llegar al resto de la página.
El foco no se mueve (Focus doesn’t move)
Al pulsar Tab, ningún elemento recibió el foco. Puede 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, los usuarios de 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 con el foco en los que no vimos ningún contorno, sombra ni subrayado. Otro estilo, como un cambio de color, puede seguir siendo visible, así que recórrelos tú con Tab para confirmarlo.

Cómo corregir los problemas más habituales

  • 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, en lugar de hacerlo elemento por elemento, y después vuelve a revisar el texto de marcador de posición, los estados al pasar el ratón y el texto sobre imágenes.

  • Imágenes sin texto alternativo

    Da 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 añade 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

    Vincula 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 campos de suscripción a la newsletter y los buscadores del encabezado son los culpables habituales.

  • Botones y enlaces sin nombre accesible

    Los controles con icono del carrito, la búsqueda, el menú o los perfiles en redes sociales a menudo solo contienen un SVG. Añade texto visible o un aria-label que diga lo que hace el control («Abrir carrito», no «icono») y añade aria-hidden="true" al propio SVG.

  • Un banner de cookies que atrapa el foco

    Asegúrate de que se puede llegar con Tab a cada botón del banner y usarlo con Enter o con la barra espaciadora, de que al cerrar el banner el foco vuelve a la página y de que un banner que no bloquea la página no retiene 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. Sustitúyelo por un estilo visible, como :focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }.

Preguntas sobre esta herramienta

¿Este validador de accesibilidad es gratis?

Sí. No hace falta registrarse; solo confirmas que el sitio es tuyo o que lo gestionas. El Informe de Accesibilidad de pago añade hasta 20 páginas más de tu sitemap, un recorrido solo con teclado, una comprobación de reajuste 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 comprobar un validador automático?

Solo una parte. Una regla puede comprobar que una imagen tiene texto alternativo, pero no que ese texto describa la imagen, y que un campo tiene una 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 con un lector de pantalla.

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

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

¿Puedo comprobar un entorno de pruebas (staging) o páginas protegidas por un inicio de sesión?

No se pueden probar las páginas protegidas por un inicio de sesión, una contraseña o una protección contra bots. Si tu protección contra bots bloquea el análisis, permite el agente de usuario FixReportsScanner o prueba una copia pública del entorno de pruebas.

He corregido un problema. ¿Por qué el resultado sigue 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 vacía la caché de la página o de la CDN antes de volver a probar.

Fuentes

Herramientas relacionadas

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

Sobre el Informe de Accesibilidad