¿Qué son los landmarks?
Los landmarks o “regiones” son las grandes secciones semánticas de una página web. HTML5 los define con elementos como <header>, <nav>, <main>, <aside> y <footer>. También tienen 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 y el footer abajo.
Para quien usa un lector de pantalla, los landmarks son el principal mecanismo de orientación. Con un atajo (la tecla D en NVDA) salta al landmark siguiente. También puede listar todos los landmarks de la página (Insert + F7) o ir directo al <main> y saltarse 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 existe un elemento HTML5 nativo, úsalo en lugar del rol ARIA. Recurre a role="..." solo si el HTML5 no aplica, por ejemplo en componentes legacy.
Reglas de uso
- Solo un
<main>por página (criterio implícito de WCAG 1.3.1). - Cada
<nav>necesitaaria-labelsi hay más de uno. Por ejemplo:aria-label="Principal",aria-label="Servicios"yaria-label="Empresa". - Cada
<section>con landmark necesita un encabezado dentro, o unaria-labelledbyque apunte a uno. - No anides landmarks del mismo tipo sin necesidad.
- Todo el contenido debe ir 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 estos mismos elementos semánticos para construir el grafo de la página. Un sitio con landmarks bien marcados mejora dos cosas a la vez:
- Accesibilidad (WCAG 2.4.1 Bloques evitables y 1.3.1 Información y relaciones).
- SEO. Google entiende mejor qué es contenido principal y qué es navegación, lo que afecta a los snippets y al passage indexing.
Cómo lo aplicamos en smedialab.es
Cada plantilla del sitio (home, servicio, ubicación, proyecto, tecnología, accesibilidad) tiene exactamente cinco landmarks: <header>, <nav aria-label="Principal">, <main id="main-content">, y dentro del <footer> dos navegaciones más (<nav aria-label="Servicios"> y <nav aria-label="Empresa">).
El skip-link “Saltar al contenido” del Layout apunta a #main-content. Así el usuario evita navegar la cabecera completa.