main
Il landmark del contenuto principale — il contenuto primario della pagina, esclusi intestazioni, navigazione e footer ripetuti. L'elemento <main> porta questo ruolo automaticamente. Esattamente un main per pagina.
Quando usarlo
Si utilizzi l’elemento <main>. È il landmark più importante della pagina — gli utenti di screen reader saltano solitamente a main per prima cosa, per bypassare la navigazione e le intestazioni.
role="main" su un <div> è appropriato solo quando non è possibile usare <main> (principalmente per vincoli imposti da un CMS). Entrambe le forme devono rispettare la stessa regola: esattamente un main per pagina. La presenza di più main compromette l’affordance «salta al contenuto principale», e molti screen reader espongono solo il primo.
Il landmark main deve contenere tutto ciò che è unico per la pagina corrente, e non deve contenere l’intestazione del sito, la navigazione primaria o il footer. Questi elementi vanno inseriti come elementi <header>, <nav> e <footer> fratelli, non all’interno di <main>.
Quando aggiungere un’etichetta
Un singolo main non ha bisogno di un’etichetta — gli screen reader lo annunciano come «main». Si aggiunga aria-label solo se la pagina ha più main (il che non dovrebbe accadere) o se si vuole distinguere l’area del contenuto principale di una SPA da quella precedente per qualche ragione.
Il link «Salta al contenuto principale» deve puntare a <main id="main"> (o all’id assegnato) tramite <a href="#main"> in cima alla pagina — questa è la tecnica di bypass dei blocchi prevista dal WCAG 2.4.1.
Errori comuni
- Due elementi
<main>nella stessa pagina. La causa più frequente: una SPA che incorpora il<main>di una nuova vista senza rimuovere quello precedente. - Pagina priva di
<main>. Gli utenti di screen reader non possono saltare l’intestazione. <main>inserito all’interno di<header>o<footer>. La gerarchia dei landmark è errata.- Navigazione globale del sito inserita all’interno di
<main>. Poiché si ripete tra le pagine, va collocata in<header>/<nav>, non nel contenuto unico della pagina. - Link «Salta al contenuto principale» che punta a un id inesistente.
Esempio
<body>
<a href="#main" class="visually-hidden focus-visible">Salta al contenuto principale</a>
<header>…</header>
<main id="main">
<h1>Perché un solo landmark main per pagina</h1>
<p>…</p>
</main>
<footer>…</footer>
</body>