E ` ` — conta come landmark?

Solo quando ha un nome accessibile (aria-label o aria-labelledby). Un nudo è solo una regione generica. Se la sezione non deve apparire nel menu dei landmark, usa .

Landmark ARIA - Docs di MetricSpot

Q: Mi servono `role="banner"` e `role="contentinfo"` su ` ` e ` `?

No. Quando e sono figli diretti di , i browser li espongono automaticamente come banner e contentinfo. Aggiungere il ruolo è ridondante e può confondere alcuni screen reader più vecchi.

Cosa verifica questo controllo

Analizza l’HTML renderizzato in cerca di regioni landmark: gli elementi di sezionamento <main>, <nav>, <header>, <footer>, <aside>, <form>, <section> (con un nome accessibile) e i loro equivalenti ARIA (role="main", role="navigation", ecc.). Il controllo fallisce se non c’è un <main> (o role="main") nella pagina.

Perché è importante

Gli screen reader espongono un menu di landmark — JAWS usa R, NVDA usa D, VoiceOver usa il rotor. Un utente arriva sulla tua pagina e preme un tasto per saltare al contenuto principale, ignorando l’header e la navigazione globale.

Senza landmark, quella scorciatoia non esiste. L’utente deve scorrere ogni link nell’header, ogni banner promozionale, ogni dropdown di login, ogni selettore di lingua prima di raggiungere l’articolo per cui è venuto. Su un tipico sito marketing sono 30-60 elementi di audio prima della prima frase utile.

I landmark sono anche il modo in cui si soddisfa il criterio di successo WCAG 2.1 1.3.1 (Info e Relazioni) per la struttura di pagina, e come gli audit dell’European Accessibility Act si aspettano che le regioni navigabili siano esposte a livello programmatico.

Come sistemarlo

Il minimo: avvolgi il contenuto principale in <main>. Aggiungi <nav> attorno alla navigazione principale, <header> per l’intestazione del sito, <footer> per il piè di pagina.

HTML:

<body>
  <header>
    <nav aria-label="Primary">...</nav>
  </header>
  <main>
    <h1>Page title</h1>
    <article>...</article>
    <aside aria-label="Related articles">...</aside>
  </main>
  <footer>...</footer>
</body>

Regole che fanno inciampare:

Un solo <main> per pagina. Più elementi <main> rompono la mappa dei landmark.
Più regioni <nav> hanno bisogno di nomi accessibili così uno screen reader può distinguerle. Usa aria-label="Primary", aria-label="Breadcrumb", aria-label="Footer" — non lasciarle senza nome.
<header> e <footer> contano come landmark banner/contentinfo solo quando sono figli diretti di <body>. Dentro un <article> sono solo contenuto di sezionamento, non landmark.
Non aggiungere ridondantemente role="main" a <main>. L’elemento nativo espone già il ruolo.

Next.js (App Router):

// app/layout.tsx
export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        <header><SiteNav /></header>
        <main>{children}</main>
        <footer><SiteFooter /></footer>
      </body>
    </html>
  );
}

Astro:

---
// src/layouts/Base.astro
---
<html lang="en">
  <body>
    <header><Nav /></header>
    <main><slot /></main>
    <footer><Footer /></footer>
  </body>
</html>

WordPress: i moderni block theme avvolgono automaticamente il contenuto del post in <main>; i temi classici hanno bisogno di <?php wp_body_open(); ?> seguito dal tuo wrapper <main> in header.php e </main> prima di get_footer().

Se non puoi modificare il markup (CMS chiuso, widget embedded), aggiungi role="main" al div wrapper esistente — stesso effetto per le tecnologie assistive, meno ideale per i parser.

Abbinalo a Dichiarare la lingua della pagina e Etichette dei campi form — i tre insieme coprono la maggior parte dei frutti accessibili a portata di mano.

Domande frequenti

Mi servono `role="banner"` e `role="contentinfo"` su `<header>` e `<footer>`?

No. Quando <header> e <footer> sono figli diretti di <body>, i browser li espongono automaticamente come banner e contentinfo. Aggiungere il ruolo è ridondante e può confondere alcuni screen reader più vecchi.

E `<section>` — conta come landmark?

Solo quando ha un nome accessibile (aria-label o aria-labelledby). Un <section> nudo è solo una regione generica. Se la sezione non deve apparire nel menu dei landmark, usa <div>.

Aggiungere landmark influisce sulla SEO?

Indirettamente. Google non assegna posizionamento in base ai landmark, ma usa l’outline HTML5 (specialmente <main> e <article>) per identificare il contenuto principale rispetto al chrome. Una struttura di landmark più pulita correla con un’estrazione più pulita nelle AI Overviews e nei featured snippet.