Landmark

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?