jquery.app
Espanol
EnglishDeutschFrancaisEspanol日本語Nederlands

Herramientas HTML

Gratis Comprobador de landmarks HTML

Pega HTML y verifica elementos landmark ARIA para navegación con lector de pantalla.

Cargando herramienta...

Qué es Comprobador de landmarks HTML?

Los landmarks ARIA son elementos HTML que definen regiones de la página. Los lectores de pantalla utilizan los landmarks para que los usuarios puedan saltar entre secciones. Los landmarks comunes incluyen header, main, nav, footer, aside y form. La ausencia de landmarks dificulta la navegación para los usuarios de tecnologías de asistencia.

Respuesta rápida

Pegue su HTML para verificar qué elementos landmark ARIA están presentes y cuáles faltan. Los lectores de pantalla usan los landmarks para ayudar a los usuarios de teclado y tecnologías de asistencia a navegar entre las regiones de la página.

Last updated: 2026-06-11

Limitaciones

  • La herramienta solo escanea nombres de elementos. No verifica si los landmarks tienen nombres accesibles proporcionados mediante aria-label, aria-labelledby o encabezados visibles.
  • El verificador no valida asignaciones de roles ARIA. Un elemento con un atributo role puede anular o eliminar el rol de landmark implicito.
  • Pegar HTML parcial puede omitir elementos landmark fuera del contenido pegado. Pegue el HTML completo de la pagina para una auditoria completa.

Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub

Cómo usar esta herramienta

  1. Pegue su código HTML en el área de entrada.
  2. La herramienta escanea en busca de elementos landmark y muestra cuáles están presentes.
  3. Revise los resultados que muestran qué landmarks faltan en su página.
  4. Agregue los elementos landmark faltantes para mejorar la accesibilidad de la página.

Para qué puedes usarla

  • Auditar una plantilla de página estática para detectar elementos landmark faltantes antes de publicar.
  • Verificar que cada página de un sitio tenga un elemento main para la navegación con lectores de pantalla.
  • Confirmar que los bloques de navegación usen el elemento nav en lugar de div genéricos.

Casos de uso

Ejemplos prácticos

Ejemplo

Falta el landmark main

Una auditoría de plantilla revela que falta el elemento main. El verificador lo señala como un landmark requerido y explica que los lectores de pantalla dependen de main para saltar al contenido de la página.

Ejemplo

Navegación con div detectada

Un diseño de blog tiene elementos header y footer, pero usa un div para la navegación. El verificador sugiere reemplazar el div con un elemento nav para una mejor estructura de landmarks.

Errores comunes

  • Usar múltiples elementos main en una misma página, lo cual no es estándar y confunde la navegación del lector de pantalla.
  • Envolver todo en un elemento nav en lugar de usarlo solo para la navegación real del sitio.
  • Usar elementos section sin nombres accesibles, lo que los hace menos útiles como landmarks ARIA.

Verificación

  1. Cargue la pagina auditada en un navegador y use un lector de pantalla o una extension para navegar por landmarks y confirmar que las regiones esperadas estan presentes.
  2. Ejecute la pagina en una herramienta formal de pruebas de accesibilidad como axe DevTools o WAVE para verificar los resultados de la auditoria de landmarks.

FAQ

Preguntas sobre Comprobador de landmarks HTML

Cuantos elementos main debe tener una pagina?

Un elemento main visible por pagina. No es estandar tener multiples elementos main y confunde la navegacion del lector de pantalla.

Son los elementos semanticos de HTML5 lo mismo que los landmarks ARIA?

Si. Elementos como header, main, nav, footer, aside y form tienen roles ARIA implicitos. Usar estos elementos semanticos crea landmarks automaticamente.

Necesito etiquetas en los elementos section?

Un elemento section sin un nombre accesible no se registra como landmark en el arbol de accesibilidad. Agregue un atributo aria-label o aria-labelledby a los elementos section que representen regiones distintas de la pagina.

Cual es la diferencia entre los elementos article y section?

Article representa contenido autonomo que tiene sentido por si mismo fuera de la pagina (una entrada de blog, una noticia, una tarjeta de producto). Section es una agrupacion tematica de contenido que requiere contexto del resto de la pagina y tipicamente tiene un encabezado. Use article para contenido independiente y section para dividir una pagina en areas tematicas.

Herramientas relacionadas

Más herramientas html

Prueba también

Prueba también