Curso HTML 10.5 Landmarks semánticos y su importancia para accesibilidad

10.5 Landmarks semánticos y su importancia para accesibilidad

Los landmarks semánticos son elementos HTML que identifican regiones o zonas clave dentro de una página web.
Su finalidad principal es mejorar la navegación y la experiencia de usuarios que emplean tecnologías de asistencia,
como lectores de pantalla o navegadores por teclado. Gracias a ellos, estos usuarios pueden moverse rápidamente
entre secciones relevantes sin necesidad de recorrer secuencialmente todo el DOM.

1. ¿Qué son los landmarks semánticos?

Un landmark es un contenedor que cumple una función o rol concreto en la estructura de la página.
Ejemplos de landmarks semánticos nativos en HTML5:

• <header>: Encabezado global o de sección.
• <nav>: Zona de navegación principal o secundaria.
• <main>: Contenido principal único de la página.
• <article>: Contenido autónomo, como una entrada de blog.
• <section>: Agrupación temática genérica.
• <aside>: Contenido lateral o complementario.
• <footer>: Pie de página global o de sección.

2. Beneficios para la accesibilidad

• Navegación acelerada: los usuarios pueden saltar directamente a un landmark
  (por ejemplo, “ir a contenido principal”).
• Contexto claro: un lector de pantalla anuncia el tipo de región,
  ayudando a entender la función de cada bloque.
• Compatibilidad ARIA: las especificaciones ARIA reconocen estos landmarks para
  enriquecer la semántica cuando no sea posible usar etiquetas nativas.

3. Tabla de landmarks y su función

4. Ejemplo básico de uso de landmarks

Demostración de una estructura sencilla con landmarks y un enlace para saltar al contenido.

Saltar al contenido principal



  
Mi sitio accesible
  
Bienvenido a mi sitio web con landmarks semánticos







  

    
Artículo destacado
    
Texto del artículo...
  

  

    
Sección de noticias
    
Contenido de noticias...
  







  

5. Landmark con roles ARIA (fallback)

Para navegadores antiguos o cuando no se puede usar la etiqueta nativa, se asigna un role.

  
Mi sitio con ARIA







  
Contenido principal accesible

  

6. Buenas prácticas y consideraciones

• Usar <main> sólo una vez por documento.
• Proveer aria-label o aria-labelledby para aclarar secciones cuando el contexto no sea obvio.
• Mantener una jerarquía semántica adecuada: no anidar <article> dentro de otro artículo si no es independiente.
• Asegurarse de que los landmarks no queden ocultos por estilos que los saquen del flujo del documento.
• Comprobar con herramientas de evaluación de accesibilidad que los landmarks son detectados correctamente.

7. Conclusión

Incorporar landmarks semánticos mejora notablemente la usabilidad para personas con discapacidad visual o
movilidad reducida. Facilita la comprensión global de la estructura y permite una navegación rápida
y eficiente. Adoptar estas etiquetas y roles ARIA es un paso clave en la creación de experiencias web inclusivas.