Aprende a implementar los landmarks ARIA (main, nav, header, footer, aside) para mejorar la accesibilidad web. Guía práctica con ejemplos de código, skip links y orden de tabulación lógico para lectores de pantalla NVDA, JAWS y VoiceOver.
¿Qué son los landmarks ARIA y por qué los necesitas?
Imagina que entras en un supermercado donde no hay carteles indicando dónde están las frutas, la carne o la panadería. Simplemente caminas entre pasillos idénticos sin saber dónde estás. Eso es exactamente lo que experimenta una persona que usa un lector de pantalla cuando tu web no tiene landmarks ARIA. Navegas a ciegas, sin referencias, sin estructura.
Los landmarks ARIA son regiones semánticas que dividen tu página web en bloques con significado: la navegación principal, el contenido central, la cabecera, el pie de página y las barras laterales. Son como los carteles del supermercado: le dicen a las tecnologías de asistencia «aquí está el menú», «aquí empieza el contenido importante», «esto es información complementaria».
Personalmente, creo que los landmarks son una de las mejoras de accesibilidad con mayor impacto y menor esfuerzo. No necesitas rediseñar nada, no cambias el aspecto visual de tu web. Solo añades estructura semántica que hace la vida enormemente más fácil a las personas que dependen de lectores de pantalla como NVDA, JAWS o VoiceOver.
Los cinco landmarks fundamentales que toda web necesita
La especificación WAI-ARIA del W3C define varios roles de landmark, pero hay cinco que forman la columna vertebral de cualquier sitio web bien estructurado. Veámoslos en detalle:
1. main: el corazón de tu contenido
El landmark main identifica el contenido principal de la página. Solo debe haber uno por página, y es donde el lector de pantalla espera encontrar lo que realmente importa. Si usas la etiqueta HTML5 <main>, el navegador asigna automáticamente el role=»main». No necesitas duplicarlo.
¿Alguna vez has buscado algo en una web y has tenido que pasar por el menú, el logo, las redes sociales y tres banners antes de llegar al contenido? Para alguien con NVDA, esa experiencia se multiplica por diez. Con un landmark main bien colocado, el usuario pulsa una tecla y salta directamente al contenido.
2. nav: tu sistema de navegación
El landmark nav marca los bloques de navegación. Puedes tener varios en una página (navegación principal, navegación secundaria, migas de pan), pero cada uno debe tener una etiqueta aria-label o aria-labelledby que lo diferencie. La etiqueta HTML5 <nav> lleva el role=»navigation» implícito.
Un error común que veo en auditorías de accesibilidad es tener tres elementos <nav> sin etiqueta alguna. El usuario de JAWS escucha «navegación, navegación, navegación» sin saber cuál es cuál. Añadir aria-label=»Navegación principal» y aria-label=»Migas de pan» resuelve el problema en segundos.
3. header: la cabecera que orienta
El landmark header, cuando es hijo directo del body, se convierte en el banner del sitio. Aquí va tu logotipo, el nombre del sitio y típicamente la navegación principal. En HTML5, el elemento <header> dentro del body actúa como role=»banner».
Ojo: un <header> dentro de un <article> o una <section> no genera un landmark banner. Solo lo hace cuando es hijo directo del body o de un elemento sin rol semántico. Esto confunde a muchos desarrolladores en la remediación de accesibilidad web.
4. footer: información de cierre
El landmark footer, como hijo directo del body, se mapea al role=»contentinfo». Aquí colocas información de copyright, enlaces legales, datos de contacto y políticas de privacidad. Al igual que el header, solo genera landmark cuando está al nivel superior del documento.
Según datos de WebAIM en su informe de accesibilidad de 2025, el 68 % de los sitios web tienen un <footer> correctamente posicionado, pero solo el 41 % añade etiquetas descriptivas cuando hay múltiples footers. La diferencia entre un footer correcto y uno accesible está en los detalles.
5. aside: contenido complementario
El landmark aside marca contenido relacionado pero no esencial: barras laterales, widgets, publicidad, artículos relacionados. En HTML5, <aside> se mapea automáticamente a role=»complementary». Es importante que este contenido tenga sentido fuera del flujo principal.
¿Te has preguntado por qué algunos blogs accesibles colocan la barra lateral después del contenido principal en el DOM, aunque visualmente aparece al lado? Es una estrategia deliberada para que el orden de tabulación lógico lleve primero al contenido importante y luego al complementario.
Tabla de correspondencia HTML5 y roles ARIA
| Elemento HTML5 | Role ARIA implícito | Landmark | ¿Cuántos por página? |
|---|---|---|---|
| <main> | main | Sí | Exactamente 1 |
| <nav> | navigation | Sí | Varios (con aria-label) |
| <header> (hijo de body) | banner | Sí | 1 (nivel superior) |
| <footer> (hijo de body) | contentinfo | Sí | 1 (nivel superior) |
| <aside> | complementary | Sí | Varios (con aria-label) |
| <section> | region (con nombre) | Condicional | Varios |
| <form> | form (con nombre) | Condicional | Varios |
El skip link: accesibilidad con una sola tecla
El skip link (o enlace para saltar al contenido) es un mecanismo que permite a los usuarios de teclado y lectores de pantalla saltarse la navegación repetitiva e ir directamente al contenido principal. La WCAG 2.2 lo recoge en el criterio de éxito 2.4.1 «Evitar bloques» con nivel A.
La implementación es sencilla: un enlace al principio del documento que apunta al id del <main>. Normalmente se oculta visualmente y solo aparece cuando recibe el foco por tabulación. Esto beneficia no solo a personas ciegas, sino también a quienes navegan exclusivamente con teclado por discapacidades motrices.
Personalmente, considero el skip link como la prueba de fuego de la accesibilidad básica. Si tu web no lo tiene, probablemente hay muchas otras cosas que faltan. Es tan fundamental como el cinturón de seguridad en un coche: simple, barato y salva vidas (digitales).
Estructura de encabezados y landmarks: el dúo perfecto
Los landmarks y la estructura de encabezados para accesibilidad son dos caras de la misma moneda. Los landmarks dividen la página en regiones funcionales; los encabezados (h1-h6) crean una jerarquía de contenido dentro de esas regiones. Juntos, ofrecen dos sistemas de navegación complementarios.
Un usuario de NVDA puede listar todos los landmarks con la tecla D o abrir el diálogo de elementos con Insert+F7. También puede navegar por encabezados con la tecla H. Tener ambos sistemas bien implementados es como ofrecer tanto un índice como un mapa en un libro: cada persona elige la forma que le resulta más cómoda.
El W3C recomienda que cada landmark tenga al menos un encabezado que lo describa. Así, si el usuario navega por encabezados, encuentra la misma estructura que si navega por landmarks. Esta redundancia no es un defecto; es una característica de diseño accesible.
Orden de tabulación lógico: cuando el Tab tiene sentido
El orden de tabulación lógico es la secuencia en que los elementos interactivos reciben el foco cuando pulsas la tecla Tab. Debe seguir un flujo natural: de arriba abajo, de izquierda a derecha (en idiomas LTR), siguiendo la estructura visual de la página. Los landmarks ayudan a organizar este flujo.
Un error frecuente en la remediación de accesibilidad web es usar tabindex con valores positivos para «arreglar» el orden de tabulación. Esto crea un caos total. La solución correcta es organizar el HTML en el mismo orden en que debe tabularse. Si tu DOM sigue una estructura lógica con landmarks bien ubicados, el orden de tabulación se resuelve solo.
La WCAG 2.2 aborda esto en el criterio 2.4.3 «Orden del foco» (nivel A). Si el orden de tabulación no sigue una secuencia lógica, cualquier usuario de teclado se perderá, y un lector de pantalla presentará la información en un orden confuso.
Errores comunes al implementar landmarks ARIA
En mis auditorías de accesibilidad, encuentro estos errores una y otra vez:
- Múltiples <main> en la misma página: solo debe haber uno visible a la vez.
- Landmarks sin etiqueta: cuando hay varios <nav> o <aside>, cada uno necesita aria-label.
- Roles ARIA redundantes: escribir <nav role=»navigation»> es redundante. El role ya está implícito.
- Header y footer dentro de secciones tratados como landmarks: solo generan landmark a nivel superior.
- Olvidar el skip link: el mecanismo más sencillo y más olvidado.
- Contenido fuera de landmarks: todo el contenido visible debe estar dentro de algún landmark.
Según la encuesta de WebAIM Million de 2025, el 23 % de las páginas de inicio analizadas carecían de un landmark main identificable, y el 45 % tenía landmarks mal etiquetados. La buena noticia es que estos errores son fáciles de corregir.
Cómo verificar los landmarks con lectores de pantalla
Verificar landmarks no requiere herramientas sofisticadas. Aquí te explico cómo hacerlo con los tres lectores de pantalla más utilizados:
| Lector de pantalla | Listar landmarks | Navegar entre landmarks | Plataforma |
|---|---|---|---|
| NVDA | Insert + F7 > Landmarks | Tecla D / Shift + D | Windows |
| JAWS | Insert + Ctrl + R | Tecla R / Shift + R (modo rápido) | Windows |
| VoiceOver | Rotor (VO + U) > Landmarks | VO + Cmd + { / } | macOS / iOS |
Además, extensiones de navegador como Landmarks de Matthew Tylee Atkinson (disponible para Chrome y Firefox) te muestran los landmarks visualmente superpuestos en la página. Es una herramienta gratuita y extremadamente útil para desarrollo y testing.
Preguntas frecuentes
Todo lo que necesitas saber.
01
Las etiquetas semánticas de HTML5 (,
02
Técnicamente puedes, pero solo uno debe ser visible y accesible a la vez. En aplicaciones de una sola página (SPA), puedes tener varios ocultos y mostrar solo el correspondiente a la vista actual. Si hay más de uno visible, los lectores de pantalla se confunden y la experiencia se degrada significativamente.
04
Directamente no, pero indirectamente sí. Los motores de búsqueda como Google utilizan la estructura semántica para entender el contenido de la página. Un bien definido ayuda a Googlebot a identificar el contenido principal frente a la navegación o los widgets laterales. Además, una web accesible mejora la experiencia de usuario, reduce la tasa de rebote y aumenta el tiempo de permanencia, factores que Google sí tiene en cuenta en el ranking.
05
Frameworks como Bootstrap o Tailwind CSS no rompen landmarks por sí mismos, pero los patrones de diseño que promueven (divs anidados, componentes sin semántica) pueden hacer que los landmarks queden enterrados o ausentes. La solución es auditar la estructura final del HTML renderizado, no el código fuente del componente. Herramientas como la extensión Landmarks o el árbol de accesibilidad de las DevTools de Chrome te muestran la realidad que perciben los lectores de pantalla.
06
El orden de tabulación sigue el orden del DOM, no la posición visual creada por CSS. Si tu
