Verificador de Accesibilidad
Analiza fragmentos de HTML en busca de problemas comunes de accesibilidad WCAG con sugerencias prácticas de corrección
Entrada HTML
Qué Comprobamos
Texto Alternativo de Imagen
Comprueba que todos los elementos <img> tengan atributos alt para que los lectores de pantalla puedan describir las imágenes a los usuarios.
Etiquetas de Formulario
Verifica que todas las entradas de formulario tengan etiquetas asociadas mediante <label for>, aria-label o aria-labelledby.
Jerarquía de Encabezados
Garantiza que los encabezados sigan un orden lógico (h1, h2, h3...) sin saltar niveles.
Texto de Enlace
Detecta enlaces vacíos y texto de enlace genérico como 'haz clic aquí' que no son significativos para los usuarios de lectores de pantalla.
Atributo de Idioma
Comprueba si existe el atributo lang en el elemento <html>, lo que ayuda a los lectores de pantalla a usar la pronunciación correcta.
ARIA y Elementos Interactivos
Verifica que los elementos interactivos tengan los roles adecuados y etiquetas ARIA para el soporte de tecnologías de asistencia.
Verificador de Accesibilidad
Analiza fragmentos de HTML en busca de problemas comunes de accesibilidad WCAG con sugerencias prácticas de corrección
Características
- Parse pasted HTML locally with DOMParser and check for common WCAG issues
- 12+ rule categories: alt text, form labels, heading hierarchy, empty links, ARIA usage, tabindex misuse, autoplay
- No network calls — paste HTML, get instant feedback
- NOT a full WCAG audit — for that use axe-core, Lighthouse, or a dedicated tool
- Useful for quick sanity-checks during development
Cómo usar
- Pega tu código HTML en el área de entrada o carga uno de los fragmentos de muestra para ver la herramienta en acción.
- Haz clic en 'Comprobar Accesibilidad' para analizar tu HTML en busca de problemas WCAG comunes en más de 12 reglas de accesibilidad.
- Revisa los resultados agrupados por gravedad, lee las sugerencias de corrección y actualiza tu HTML para resolver los problemas encontrados.
Consejos y buenas prácticas
- Paste the HTML source (View Source / Inspect → Outer HTML) — the checker doesn't fetch URLs (CORS would block that anyway).
- For a complete audit, use axe-core in your test suite or Lighthouse in DevTools — those check ~30 more rules including dynamic ones.
- Heading hierarchy: each level should follow the previous (h1 → h2 → h3); skipping levels is flagged.
- Alt text rule allows `alt=""` for purely decorative images — only missing/duplicate alt is flagged.
- Form labels: every input should have an associated label (via `for` attribute) or `aria-label`. Placeholder-only is flagged.
Preguntas frecuentes
¿Qué problemas de accesibilidad comprueba esta herramienta?
Esta herramienta comprueba más de 12 problemas comunes de accesibilidad WCAG, incluyendo: atributos alt ausentes en imágenes, entradas de formulario sin etiquetas asociadas, infracciones de jerarquía de encabezados (niveles saltados), enlaces vacíos y texto de enlace genérico, atributo lang ausente en el elemento HTML, elementos interactivos sin roles ni etiquetas ARIA, botones vacíos, elementos HTML obsoletos, valores positivos de tabindex que alteran el orden de tabulación, elementos multimedia con autoplay y títulos de documento ausentes. Cada problema está asociado a criterios de éxito WCAG específicos.
¿Sustituye esto a una auditoría WCAG completa?
No, esta herramienta comprueba problemas comunes a nivel de HTML que pueden detectarse analizando el marcado. Una auditoría WCAG 2.1 o 2.2 completa requiere pruebas con tecnologías de asistencia reales como lectores de pantalla, verificación de ratios de contraste de color, comprobación de navegación por teclado, pruebas de actualizaciones de contenido dinámico y evaluación de la accesibilidad cognitiva. Esta herramienta es un excelente primer paso para detectar los problemas más comunes antes de realizar una auditoría manual completa.
¿Cuál es la diferencia entre errores y advertencias?
Los errores indican infracciones definitivas de accesibilidad que afectarán a los usuarios de tecnologías de asistencia. Por ejemplo, un atributo alt ausente en una imagen es un error porque los lectores de pantalla no pueden describir la imagen. Las advertencias indican problemas potenciales que pueden o no ser un problema según el contexto. Por ejemplo, un atributo alt vacío es una advertencia porque es correcto para imágenes decorativas pero incorrecto para imágenes informativas. Los aprobados confirman que una comprobación específica se ha cumplido.
¿Puedo comprobar la URL de un sitio web en vivo en lugar de pegar HTML?
Esta herramienta está diseñada para comprobar fragmentos de HTML que pegues directamente. Para probar sitios web en vivo, tendrías que ver el código fuente de la página o usar las herramientas de desarrollo del navegador para copiar el HTML y pegarlo aquí. Para pruebas de sitios web en vivo, considera extensiones de navegador como axe DevTools o Lighthouse, que pueden inspeccionar el DOM renderizado, incluido el contenido generado dinámicamente.
¿Por qué es tan importante el atributo lang en el elemento HTML?
El atributo lang indica a los lectores de pantalla y a otras tecnologías de asistencia en qué idioma está escrito el contenido. Sin él, un lector de pantalla podría intentar leer texto en inglés usando reglas de pronunciación francesa, haciendo que el contenido sea incomprensible. También afecta a cómo los navegadores gestionan la división silábica, la corrección ortográfica y otras funciones dependientes del idioma. Establecer lang es una de las mejoras de accesibilidad más sencillas pero de mayor impacto que puedes hacer.
¿Se envía mi código HTML a algún servidor para su análisis?
No, todo el análisis sucede íntegramente en tu navegador mediante JavaScript. Tu código HTML nunca sale de tu dispositivo. La herramienta analiza el HTML usando la API DOMParser integrada del navegador y ejecuta todas las comprobaciones de accesibilidad localmente. Esto hace que sea seguro usarla con código propietario, proyectos internos o cualquier HTML que contenga contenido confidencial.