¿Qué son los landmarks?
Los landmarks o “regiones” son las grandes secciones semánticas de una página web. Están definidos en HTML5 mediante elementos como <header>, <nav>, <main>, <aside> y <footer>, y por sus equivalentes ARIA (role="banner", role="navigation", role="main", role="complementary", role="contentinfo").
Para una persona vidente, los landmarks son obvios: el header está arriba, el menú al lado, el contenido en el centro, el footer abajo. Para una persona usuaria de lector de pantalla, los landmarks son el principal mecanismo de orientación: con un atajo (en NVDA, la tecla D) puede saltar al landmark siguiente, listar todos los landmarks de la página (Insert + F7) o ir directamente al <main> saltándose la cabecera repetida.
Mapeo HTML5 ↔ ARIA
| HTML5 | Rol ARIA equivalente | Significado |
|---|---|---|
<header> (top-level) | role="banner" | Cabecera de la página entera |
<nav> | role="navigation" | Bloque de navegación |
<main> | role="main" | Contenido principal único |
<aside> | role="complementary" | Contenido relacionado pero secundario |
<footer> (top-level) | role="contentinfo" | Pie de página |
<section> con aria-labelledby | role="region" | Sección genérica con título |
<form> con aria-label | role="form" | Formulario etiquetado |
<search> (HTML5 reciente) | role="search" | Bloque de búsqueda |
Cuando hay un elemento HTML5 nativo, debe usarse en lugar del rol ARIA. Solo recurrir a role="..." si el HTML5 no aplica (p. ej. en componentes legacy).
Reglas de uso
- Solo un
<main>por página (criterio implícito de WCAG 1.3.1). - Cada
<nav>debe teneraria-labelsi hay más de uno (p. ej.aria-label="Principal"yaria-label="Servicios"yaria-label="Empresa"). - Cada
<section>con landmark debe tener un encabezado dentro oaria-labelledbyapuntando a uno. - No anidar landmarks del mismo tipo sin necesidad.
- Todo contenido debe estar dentro de un landmark: lo que queda fuera no aparece en la lista de regiones del lector de pantalla.
Beneficio cruzado en SEO
Los crawlers de Google interpretan los mismos elementos semánticos para construir el grafo de la página. Un sitio con landmarks bien marcados mejora simultáneamente:
- Accesibilidad (WCAG 2.4.1 Bloques evitables y 1.3.1 Información y relaciones).
- SEO (Google entiende mejor qué es contenido principal vs. navegación, lo que afecta a snippets y a passage indexing).
Cómo lo aplicamos en smedialab.es
Cada plantilla tipo del sitio (home, servicio, ubicación, proyecto, tecnología, accesibilidad) tiene exactamente cinco landmarks: <header>, <nav aria-label="Principal">, <main id="main-content">, <nav aria-label="Servicios"> y <nav aria-label="Empresa"> dentro del <footer>, y <footer>. El skip-link “Saltar al contenido” del Layout apunta a #main-content para evitar tener que navegar la cabecera completa.