banner
Il landmark di intestazione a livello di sito — contiene tipicamente il logo, la navigazione principale e la ricerca. L'elemento <header> di primo livello porta questo ruolo automaticamente. È consentito un solo banner per pagina.
Quando utilizzarlo
Utilizzare <header> come figlio diretto di <body> (o di <html> in un frammento di primo livello). Quando <header> si trova al livello superiore, il browser lo espone automaticamente come landmark banner. Quando <header> è annidato all’interno di <article>, <section>, <main> o <aside>, si comporta come un semplice gruppo generico, non come un landmark.
role="banner" su un <div> è appropriato soltanto quando non è possibile utilizzare <header> — ad esempio all’interno di un CMS che rimuove i tag landmark.
Non deve essere presente più di un banner per pagina. Se si dispone di una seconda intestazione che non costituisce il banner del sito (un’intestazione di sezione, un’intestazione di un thread di commenti), occorre utilizzare un <header> semplice annidato all’interno della propria sezione, non al livello superiore.
Quando assegnargli un’etichetta
Se la pagina contiene più landmark dello stesso tipo (raro per il banner, comune per la navigazione), aggiungere aria-label per distinguerli. Un singolo banner non necessita di un’etichetta — gli screen reader lo annunciano come «banner».
Errori comuni
- Più elementi
<header>in cima alla pagina, ciascuno promosso a landmark banner. Gli utenti di screen reader vedono due voci «banner» nel menu dei landmark e non riescono a distinguere quale sia l’intestazione reale. role="banner"su un<header>annidato all’interno di<main>o<article>. Il ruolo sovrascrive il comportamento predefinito di non-landmark e inquina la navigazione per landmark.- Il logo del sito posizionato al di fuori del
<header>, dunque al di fuori del landmark banner. - La navigazione fissa resa come
<div role="banner">separato accanto all’<header>originale — due banner. - Banner con contenuto vuoto (solo bordi decorativi) — il landmark appare comunque nella navigazione degli screen reader, ma non contiene nulla.
Esempio
<body>
<header>
<a href="/" aria-label="Disability World home">
<img src="/logo.svg" alt="">
</a>
<nav aria-label="Primary">
<a href="/toolkit/">Toolkit</a>
<a href="/library/">Library</a>
</nav>
</header>
<main>…</main>
</body>