Verificador de accesibilidad HTML
Pega HTML o abre un archivo y compruébalo con WCAG 2.2. La página se renderiza en un entorno aislado privado y se analiza con el motor axe-core (o con un conjunto de reglas integrado sin conexión), mostrando cada problema con su impacto, el elemento exacto y cómo corregirlo.
Última actualización:
Cómo usar Verificador de accesibilidad HTML
- Pega tu HTML en el editor o haz clic en Abrir archivo para cargar un archivo .html. Para empezar se carga un ejemplo con errores comunes.
- Elige el estándar: WCAG 2.2 AA es al que se refieren la mayoría de las leyes y políticas. Marca Buenas prácticas para recibir consejos adicionales.
- Haz clic en Verificar accesibilidad. El HTML se renderiza en un entorno aislado (sin scripts) y se analiza.
- Revisa los problemas, ordenados de crítico a leve. Cada uno muestra el elemento, por qué falla y cómo corregirlo. Haz clic en Mostrar para resaltarlo en la vista previa.
- Corrige y vuelve a verificar hasta que la lista quede vacía; luego copia o descarga el informe.
Los criterios WCAG que más se incumplen en HTML
WCAG (Pautas de Accesibilidad para el Contenido Web) es el estándar del W3C en el que se basan leyes y políticas como las directrices de la ADA en EE. UU., la Sección 508 y la Ley Europea de Accesibilidad. La versión 2.2 tiene 86 criterios de conformidad en tres niveles: A (mínimo), AA (el objetivo legal habitual) y AAA (mejorado). La tabla recoge las comprobaciones automáticas que detectan más problemas reales.
| Criterio | Nivel | Qué exige | Fallo típico |
|---|---|---|---|
| 1.1.1 Contenido no textual | A | Alternativas textuales para imágenes y botones de imagen | <img> sin alt; botón de icono sin nombre |
| 1.3.1 Información y relaciones | A | La estructura está en el marcado, no solo en lo visual | <div> directamente dentro de <ul>; etiquetas no asociadas a los campos |
| 1.3.5 Identificar el propósito de la entrada | AA | Los campos de datos personales usan valores de autocomplete válidos | autocomplete="date-range" (no es un token real) |
| 1.4.3 Contraste (mínimo) | AA | 4.5:1 para texto, 3:1 para texto grande | Texto gris claro sobre blanco |
| 2.4.2 Titulado de páginas | A | Un <title> descriptivo | Título ausente o "Untitled" |
| 2.4.4 Propósito de los enlaces | A | El propósito del enlace queda claro por su texto o contexto | Enlaces vacíos, enlaces solo con icono |
| 2.5.8 Tamaño del objetivo (mínimo) | AA | Objetivos de clic/toque de al menos 24 × 24 px o bien espaciados | Botones de cerrar diminutos |
| 3.1.1 Idioma de la página | A | lang en el elemento <html> | <html> sin lang |
| 4.1.2 Nombre, función, valor | A | Los controles exponen un nombre y una función válida | Campos sin etiqueta, valores de role no válidos |
Cómo se calcula el contraste de color
La luminancia relativa de cada color se calcula a partir de sus canales sRGB: cada canal se divide entre 255, se linealiza (los valores hasta 0.04045 se dividen entre 12.92 y los demás usan ((v + 0.055) / 1.055)2.4) y se combinan como L = 0.2126 R + 0.7152 G + 0.0722 B. La relación de contraste es (Llighter + 0.05) / (Ldarker + 0.05), de 1:1 (sin contraste) a 21:1 (negro sobre blanco). Este verificador lee el color de texto calculado y recorre la página hacia arriba para encontrar el fondo, mezclando las capas semitransparentes. El texto sobre imágenes o degradados aparece en revisión manual porque el fondo no se puede medir de forma fiable.
Lo que las pruebas automáticas no pueden decirte
- Calidad del texto alternativo: una herramienta puede ver que existe
alt, pero no si describe bien la imagen. - Uso con teclado: recorre la página con el tabulador. Todos los controles deben ser accesibles, en un orden lógico, con un indicador de foco visible y sin trampas.
- Salida del lector de pantalla: prueba NVDA o JAWS en Windows, VoiceOver en Mac y iPhone, o TalkBack en Android.
- Zoom y reflujo: amplía al 200% y al 400% y comprueba que nada quede cortado o superpuesto.
- Multimedia: comprueba que los subtítulos sean precisos y que los videos tengan audiodescripción cuando sea necesario.
- Contenido dinámico: aquí se eliminan los scripts, así que prueba los menús, los diálogos y los mensajes de error en la página real.
Preguntas frecuentes
¿Qué comprueba este verificador de accesibilidad HTML?
Renderiza tu HTML y lo comprueba con criterios de conformidad de WCAG 2.2 como las alternativas textuales para imágenes (1.1.1), información y relaciones (1.3.1), contraste (1.4.3), títulos de página (2.4.2), propósito de los enlaces (2.4.4), idioma de la página (3.1.1) y nombre, función, valor (4.1.2), además de buenas prácticas opcionales como el orden de los encabezados y las regiones.
¿Superar esta verificación significa que mi página es totalmente accesible?
No. Las herramientas automáticas pueden detectar de forma fiable aproximadamente entre un tercio y la mitad de los problemas de accesibilidad. Aspectos como un texto alternativo significativo, un orden de lectura lógico, las trampas de teclado, la visibilidad del foco y la calidad de los subtítulos siguen necesitando una revisión manual con teclado y lector de pantalla.
¿Qué es axe-core?
axe-core es un motor de pruebas de accesibilidad de código abierto muy utilizado, mantenido por Deque Systems. Esta herramienta lo carga desde un CDN público y lo ejecuta dentro de un marco aislado. Si no se puede cargar, se usa en su lugar un conjunto de reglas integrado que cubre los fallos WCAG más comunes, y el informe indica qué motor se ejecutó.
¿Qué significan los niveles de impacto?
Los problemas críticos bloquean por completo a algunos usuarios (por ejemplo, un campo de formulario sin etiqueta o un botón de imagen sin nombre). Los graves causan grandes dificultades, los moderados causan algunas dificultades y los leves son molestias o carencias de buenas prácticas. Corrige primero los críticos y los graves.
¿Se sube mi HTML?
No. El HTML se renderiza en un iframe de esta página, sin scripts ni controladores de eventos, y todas las comprobaciones se ejecutan en tu navegador. Las imágenes o las hojas de estilo enlazadas con URL completas las carga el navegador como en cualquier página web.
¿Por qué faltan mis elementos generados con JavaScript?
Por seguridad, los scripts se eliminan antes de renderizar, así que el contenido creado con JavaScript no aparece. Pega en su lugar el HTML renderizado: en las herramientas para desarrolladores de tu navegador, haz clic derecho en el elemento <html> y copia su outer HTML.
¿Qué relación de contraste exige WCAG?
El nivel AA exige al menos 4.5:1 para texto normal y 3:1 para texto grande (24px, o 18.66px en negrita, y mayores). El nivel AAA exige 7:1 y 4.5:1. La relación es (L1 + 0.05) / (L2 + 0.05), donde L1 y L2 son las luminancias relativas del color más claro y del más oscuro.
¿Se prueban todas las herramientas de FreeToolCabin para comprobar su calidad y precisión?
Sí. Cada herramienta del sitio pasa pruebas automáticas en navegadores reales para comprobar que el resultado es correcto y que no hay errores. Si encuentras un fallo o tienes una sugerencia, escríbenos a [email protected] y lo revisaremos.