Comprobador de accesibilidad
Respuesta breve
Comprueba la página renderizada con las reglas WCAG 2.1 A y AA que se pueden verificar automáticamente, incluido el contraste de color. Cada problema enlaza su criterio WCAG y el requisito de la Ley Europea de Accesibilidad.
Lo que no hace: Las reglas automáticas solo encuentran parte de los problemas WCAG: el uso con teclado, el significado, los subtítulos y muchos otros criterios necesitan a una persona, así que el resultado nunca es un veredicto de conformidad, y puede faltar el contenido que construyen los scripts.
Comprueba la página renderizada frente a las reglas de nivel A y AA de WCAG 2.1 que el software puede verificar.
Página en prueba
Qué hace
Renderiza la página en tu navegador y la comprueba contra las reglas de Nivel A y AA de WCAG 2.1 que el software puede verificar: el contraste de color del texto renderizado, los nombres de botones, enlaces y campos de formulario, los textos alternativos de las imágenes, los encabezados y puntos de referencia, el uso de ARIA y el idioma de la página, entre otras. Cada incidencia se clasifica por impacto, muestra los elementos afectados y qué corregir, y enlaza con el criterio de conformidad de WCAG y el requisito del Anexo I de la Ley Europea de Accesibilidad (Directiva 2019/882) con el que se relaciona. Las comprobaciones que requieren una persona se enumeran por separado.
Por qué importa
La Ley Europea de Accesibilidad es aplicable desde el 28 de junio de 2025 a muchos productos y servicios digitales que se venden en la UE, y cada estado miembro establece y aplica sus propias sanciones. Más allá de la ley, los problemas de accesibilidad excluyen a visitantes reales. Una comprobación automatizada es la forma más rápida de encontrar los fallos evidentes antes de una revisión manual.
Cómo funciona
-
Introduce la URL de una página, o pega el HTML de la página
-
RankProof obtiene el HTML; tu navegador lo renderiza con los estilos e imágenes propios del sitio, sin ejecutar los scripts de la página
-
Un motor de reglas de código abierto comprueba la página renderizada contra las reglas WCAG 2.1 A y AA
-
Las incidencias se devuelven por impacto, con los elementos afectados, qué corregir y las referencias a WCAG y a la EAA
Ejemplo de entrada y salida
url: https://rankproof.eu
Análisis de accesibilidad (reglas WCAG 2.1 A y AA): No hay problemas que las reglas automáticas puedan detectar Reglas superadas: 22 · Pendientes de revisión manual: 1 Necesita revisión manual contraste de color · WCAG 1.4.3 · EAA I.2.c
Cómo leer el resultado
- Resumen (ningún problema en rankproof.eu en el ejemplo)
- El número de problemas y de elementos de la página afectados, o una línea que dice que las reglas automáticas no encontraron nada. En el ejemplo, el análisis no encontró ningún problema en rankproof.eu. No es un veredicto de cumplimiento: las reglas cubren solo una parte de WCAG 2.1 AA.
- Impacto: crítico, grave, moderado, leve
- Cada problema lleva la valoración de impacto del propio motor de reglas, y los más graves aparecen primero. Los críticos y graves suelen bloquear o frenar mucho a algunos usuarios —un botón sin nombre, un texto demasiado tenue—, así que empieza por ellos.
- Elementos afectados
- Bajo cada problema, los elementos que fallaron, mostrados como HTML, con lo que hay que cambiar. Un problema suele afectar a muchos elementos de la misma plantilla, así que una sola corrección puede resolverlos todos.
- Referencias WCAG y EAA
- Cada problema enlaza el criterio de conformidad de WCAG 2.1 que comprueba y el punto de nuestra lista de comprobación del Acta Europea de Accesibilidad al que pertenece, que indica la parte de la Directiva de la que procede; para el contraste de color, WCAG 1.4.3 y EAA I.2.c.
- Reglas superadas (22)
- Cuántas reglas se aplicaron a esta página sin encontrar nada. El número cambia de una página a otra: una página sin formulario no ejecuta las reglas de formularios.
- Necesita revisión manual (1)
- Casos que las reglas no pudieron decidir solas, por ejemplo texto sobre una imagen. En el ejemplo es el contraste de color (WCAG 1.4.3): para un texto el motor no pudo determinar el fondo, así que ese par hay que comprobarlo a ojo o con el comprobador de contraste.
- Vista previa
- La página tal como tu navegador la mostró para el análisis, sin ejecutar sus scripts. Si está casi vacía, probablemente se construye con JavaScript y la herramienta lo indica: pega entonces el HTML ya renderizado.
Quién lo usa
-
Propietario de negocio en la UE
Realiza una comprobación de referencia ahora que la EAA es aplicable, y averigua qué fallos de WCAG corregir primero.
-
Consultor de accesibilidad
Obtén una primera revisión rápida de la página de un cliente, con las incidencias agrupadas por impacto y vinculadas a los requisitos de la EAA, antes de la revisión manual.
-
Desarrollador web
Vuelve a ejecutar la comprobación en las páginas de preproducción antes de cada lanzamiento para detectar regresiones de accesibilidad antes de que lleguen a producción.
Problemas frecuentes y cómo solucionarlos
-
Imágenes sin alternativa textual (WCAG 1.1.1)
Da a las imágenes informativas un alt que diga qué muestran o qué hacen, y a las decorativas alt="". Una imagen dentro de un enlace o botón necesita un alt que nombre el destino o la acción.
<img src="/signups.png" alt="Bar chart: sign-ups doubled from March to June"> <img src="/divider.svg" alt=""> -
Texto con poco contraste (WCAG 1.4.3)
Oscurece el texto o aclara el fondo hasta que el texto normal llegue a 4,5:1 y el grande a 3:1. Cambia el color en tu tema y no en elementos sueltos, para que todos los componentes lo sigan.
:root { --text: #1f2937; /* 14.7:1 on #ffffff */ --text-muted: #595959; /* 7.0:1 on #ffffff */ } -
Campos de formulario sin etiqueta (WCAG 1.3.1, 4.1.2)
Asocia un <label> visible a cada campo con for e id. Un placeholder no es una etiqueta: desaparece en cuanto se escribe.
<label for="email">Email address</label> <input id="email" name="email" type="email" autocomplete="email"> -
Botones y enlaces sin nombre (WCAG 4.1.2, 2.4.4)
Un botón que solo tiene un icono necesita una alternativa textual: texto visible, alt en su imagen o un aria-label. El texto de un enlace debe decir adónde lleva, no «haz clic aquí».
<button type="button" aria-label="Close menu"> <svg aria-hidden="true" focusable="false">…</svg> </button> -
Sin idioma de página (WCAG 3.1.1)
Define lang en el elemento <html> con el idioma de la página, para que los lectores de pantalla pronuncien bien, y lang en cualquier fragmento en otro idioma.
<html lang="en"> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> -
Lo que las reglas no pueden comprobar
Usa solo el teclado para llegar a cada control y manejarlo, comprueba que el foco se ve, que los vídeos tienen subtítulos y que los mensajes de error dicen cómo corregir el dato. La lista de comprobaciones manuales de la página de requisitos de la EAA las reúne.
Preguntas frecuentes
- ¿Qué es WCAG 2.1?
- Las Pautas de Accesibilidad para el Contenido Web 2.1 (WCAG 2.1) son el estándar del W3C para la accesibilidad web. En la UE, la norma armonizada EN 301 549 v3.2.1 aplica el Nivel AA de WCAG 2.1 al contenido web, razón por la cual este comprobador utiliza las reglas de Nivel A y AA de la versión 2.1.
- ¿Qué es la Ley Europea de Accesibilidad?
- La Directiva (UE) 2019/882 establece requisitos de accesibilidad para muchos productos y servicios que se venden en la UE, incluidos el comercio electrónico, la banca y los libros electrónicos. Es aplicable desde el 28 de junio de 2025.
- ¿Qué se le escapa a la comprobación automatizada?
- Mucho. Las reglas automatizadas solo detectan parte de los problemas: si el texto alternativo tiene sentido, si el orden de lectura es coherente, si los subtítulos son precisos. El informe enumera los elementos que requieren una persona, y la página de requisitos de la EAA tiene una lista de comprobaciones manuales. Considera el escaneo como el primer paso, y después haz pruebas con un teclado y un lector de pantalla.
- ¿Comprueba el contraste de color?
- Sí, para el texto sobre fondos sólidos en la página renderizada. El texto sobre imágenes o degradados no se puede medir automáticamente y se marca como pendiente de comprobación manual. Para un único par de colores, usa el Comprobador de Contraste de Color.
- ¿Funciona en sitios creados con JavaScript?
- Solo en parte. Los scripts de la página no se ejecutan, por lo que el contenido que JavaScript añade después de la carga no aparece en el escaneo. El informe te avisa cuando una página se renderiza con casi ningún texto.
- ¿Cuál es la diferencia entre WCAG 2.1 y 2.2?
- WCAG 2.2 añade nueve criterios de conformidad a la versión 2.1 y elimina uno (4.1.1 Procesamiento). Los nuevos criterios de Nivel AA incluyen Foco No Oculto (2.4.11), Movimientos de Arrastre (2.5.7), Tamaño del Objetivo (2.5.8) y Autenticación Accesible (3.3.8). El contenido web de la UE se mide contra WCAG 2.1 AA a través de la norma EN 301 549 v3.2.1.
Fuentes
La documentación en la que se basan esta herramienta y las explicaciones de esta página.
- Web Content Accessibility Guidelines (WCAG) 2.1 — W3C
- EN 301 549 V3.2.1: Accessibility requirements for ICT products and services — ETSI
- Directive (EU) 2019/882 (European Accessibility Act) — EUR-Lex
- Easy Checks – A First Review of Web Accessibility — W3C Web Accessibility Initiative
- Selecting Web Accessibility Evaluation Tools — W3C Web Accessibility Initiative