Què son els landmarks HTML?
Els landmarks son elements HTML semàntics que identifiquen les regions principals d’una pàgina: la capçalera, la navegació, el contingut principal, el contingut complementari i el peu de pàgina. Son la versió moderna i accessible dels antics <div id="header">, <div id="content">, etc.
Els landmarks principals son: <header> (capçalera), <nav> (navegació), <main> (contingut principal), <aside> (contingut complementari), <footer> (peu de pàgina) i <section> / <article> per a regions de contingut.
Per què son importants per a l’accessibilitat?
Els usuaris de lectors de pantalla podem navegar entre landmarks amb una sola tecla. En lloc de tabular per tots els elements de la pàgina un per un, poden saltar directament al contingut principal, al menú de navegació o al peu de pàgina. Sense landmarks, han de recórrer tota la pàgina seqüencialment cada cop.
El criteri que axe-core comprova principalment és que existeixi almenys un element <main> a la pàgina. Sense ell, no hi ha manera d’identificar programàticament on és el contingut principal.
L’estructura de landmarks recomanada
<header>
Logo, nom del lloc, navegació principal
<nav aria-label="Navegació principal">
<ul>…elements del menú…</ul>
</nav>
</header>
<main>
Contingut principal de la pàgina
(únic per pàgina)
</main>
<aside>
Contingut complementari
(sidebar, widgets relacionats)
</aside>
<footer>
Peu de pàgina, links, copyright
</footer>
Regles importants
Un sol element <main>
Ha d’haver-hi exactament un element <main> per pàgina. Si en tens dos, axe-core detecta un error. El <main> ha de contenir el contingut específic d’aquella pàgina, no el header ni el footer.
Múltiples <nav> amb etiquetes
Pots tenir múltiples elements <nav> (menú principal, menú secundari, breadcrumbs), però cada un ha de tenir un aria-label que els diferenciï:
<nav aria-label="Navegació principal">...<nav aria-label="Breadcrumb">...<nav aria-label="Navegació del peu de pàgina">...
Landmarks a WordPress i Divi
La majoria de temes WordPress moderns ja usen elements semàntics correctament. Divi genera un <header> i un <footer> adequats. El contingut de la pàgina s’embolcalla en el <main> del template.
Els problemes apareixen quan el tema usa <div> en lloc d’elements semàntics, o quan el contingut principal no té l’element <main>. Amb l’eina d’autoevaluació de webaccessible.cat pots verificar si la teva pàgina té l’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.