Inicio / Biblioteca / Glosario / Landmarks
← Volver al glosario

Landmarks

Regiones semánticas de una página web identificadas por elementos HTML5 o ARIA que permiten a las tecnologías de asistencia navegar rápidamente entre secciones principales del contenido.

Landmarks

Definición Técnica

Los landmarks (puntos de referencia o regiones) son áreas semánticas identificables de una página web que permiten a las tecnologías de asistencia navegar rápidamente entre las secciones principales del contenido. Se definen mediante elementos HTML5 semánticos o atributos ARIA role.

Landmarks Principales

HTML5 Semántico

<header role="banner">...</header>
<nav role="navigation">...</nav>
<main role="main">...</main>
<aside role="complementary">...</aside>
<footer role="contentinfo">...</footer>

Roles ARIA

  • banner: Encabezado del sitio (generalmente header)
  • navigation: Menú de navegación (nav)
  • main: Contenido principal único (main)
  • complementary: Contenido complementario (aside)
  • contentinfo: Información sobre el contenido (footer)
  • search: Búsqueda
  • form: Formulario (si tiene propósito principal)
  • region: Región con nombre

Uso Correcto

<!-- ✅ Correcto: Landmarks bien estructurados -->
<body>
  <header role="banner">
    <nav role="navigation" aria-label="Navegación principal">
      <!-- Menú -->
    </nav>
  </header>
  
  <main role="main">
    <article>
      <h1>Título</h1>
      <p>Contenido...</p>
    </article>
  </main>
  
  <aside role="complementary" aria-label="Barra lateral">
    <!-- Contenido relacionado -->
  </aside>
  
  <footer role="contentinfo">
    <p>Copyright 2024</p>
  </footer>
</body>

Navegación con Lectores de Pantalla

Los usuarios de lectores de pantalla pueden:

  • Listar landmarks: Ver todas las regiones disponibles
  • Saltar entre landmarks: Navegar rápidamente
  • Entender estructura: Comprender organización de la página

Comandos NVDA

  • D: Saltar al siguiente landmark
  • Shift+D: Saltar al landmark anterior
  • Insert+Ctrl+Semicolon: Listar todos los landmarks

Errores Comunes

❌ Evitar

<!-- ❌ Incorrecto: Múltiples main -->
<main>Contenido 1</main>
<main>Contenido 2</main>

<!-- ❌ Incorrecto: Landmark sin etiqueta -->
<nav><!-- Sin aria-label --></nav>

<!-- ❌ Incorrecto: Anidar landmarks incorrectamente -->
<main>
  <main><!-- No anidar main --></main>
</main>

Referencias

Términos Relacionados

  • Semántica HTML
  • ARIA
  • Navegación por teclado
  • Lector de pantalla