¿Qué su los landmarks HTML?
Los landmarks su elementos HTML semánticos que identifican las regiones principales de una página: la cabecera, la navegación, el contenido principal, el contenido complementario y el pie de página. Son la versión moderna y accesible de los antiguos <div id="header">, <div id="content">, etc.
Los landmarks principales son: <header> (cabecera), <nav> (navegación), <main> (contenido principal), <aside> (contenido complementario), <footer> (pie de página) y <section>
/
<article> para regiones de contenido.
¿Por qué su importantes para la accesibilidad?
Los usuarios de lectores de pantalla podemos navegar entre landmarks con una sola tecla. En lugar de tabular por todos los elementos de la página uno por uno, pueden saltar directamente al contenido principal, al menú de navegación o al pie de página. Sin landmarks, tienen que recorrer toda la página secuencialmente cada vez.
El criterio que axe-core comprueba principalmente es que exista al menos un elemento <main> en la página. Sin él, no hay manera de identificar programáticamente donde es el contenido principal.
La estructura de landmarks recomendada
<header>
Logo, nombre del lugar, navegación principal
<nav aria-label="Navegació principal">
<ul>…elementos del menú…</ul>
</nav>
</header>
<main>
Contenido principal de la página
(único por página)
</main>
<aside>
Contenido complementario
(sidebar, widgets relacionados)
</aside>
<footer>
Pie de página, links, copyright
</footer>
Reglas importantes
Un solo elemento <main>
Tiene que haber exactamente un elemento <main> por página. Si en tenso dos, axe-core detecta un error. El <main> tiene que contener el contenido específico de aquella página, no el header ni el footer.
Múltiplos<nav> con etiquetas
Puedes tener múltiples elementos <nav> (menú principal, menú secundario, breadcrumbs), pero cada uno tiene que tener un aria-label que les diferencie:
<nav aria-label="Navegació principal">...<nav aria-label="Breadcrumb">...<nav aria-label="Navegació del peu de pàgina">...
Landmarks en WordPress y Divi
La mayoría de temas WordPress modernos ya usan elementos semánticos correctamente. Divi genera un <header> y un <footer> adecuados. El contenido de la página se envuelve en el <main> del template.
Los problemas aparecen cuando el tema usa <div> en lugar de elementos semánticos, o cuando el contenido principal no tiene el elemento <main>. Con la herramienta de autoevaluación de webaccessible.cat puedes verificar si tu página tiene la estructura de landmarks correcta.
Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.