Landmark

Aree semantiche (banner, navigation, main, complementary, contentinfo) per orientamento e salto rapido.

Definizione — Le landmark (o Regioni ARIA) suddividono una pagina in aree funzionali riconoscibili da tecnologie assistive e scorciatoie dei lettori di schermo. L’obiettivo è permettere agli utenti di saltare rapidamente tra navigazione, contenuto principale, contenuti complementari e informazioni di chiusura, migliorando orientamento e produttività.

Elementi nativi & ruoli più comuni

<header> (ruolo implicito: banner se è intestazione generale della pagina).
<nav> → navigation (etichettare se ce ne sono più di uno).
<main> → main (uno per pagina; target ideale per lo skip link).
<aside> → complementary (contenuti correlati, non principali).
<footer> (ruolo implicito: contentinfo se è a livello di pagina).
<form> con aria-labelledby → form (se ha funzione autonoma), role="search" per la ricerca.
<section> con aria-labelledby → region (solo se realmente utile all’indice delle regioni).

Buone pratiche

HTML semantico prima: gli elementi nativi hanno già i ruoli corretti. Aggiungi role=… solo quando non esiste un tag appropriato.
Un solo main e un solo banner/contentinfo per pagina. Evita annidare main.
Etichetta le istanze multiple: per navigazioni o aside plurali usa aria-label/aria-labelledby (es. “Navigazione principale”, “Navigazione secondaria”).
Skip link: fornisci “Salta al contenuto” che porta all’id del <main>.

Esempio di marcatura

<header>…</header>

<nav aria-label="Navigazione principale">…</nav>

<main id="contenuto">
  <h1>Titolo pagina</h1>
  <article>…</article>
</main>

<aside aria-label="Approfondimenti">…</aside>

<footer>© Ente · Contatti · Accessibilità</footer>

Errori comuni

Usare ruoli ARIA al posto di tag nativi (es. role="navigation" su un div invece di <nav>).
Più di un main o banner, o footer interno marcato come contentinfo a metà pagina.
Region sovra-eticchettate: ogni section con role="region" produce rumore nei menu dei lettori di schermo.

Checklist rapida

È presente uno skip link che porta al <main>?
Le landmark sono minime e significative (navigation, main, complementary, contentinfo, search)?
Le istanze multiple sono etichettate in modo univoco?