banner
Point de repère d'en-tête du site — contient généralement le logo, la navigation principale et la recherche. L'élément <header> de niveau supérieur porte ce rôle automatiquement. Un seul banner par page.
Quand l’utiliser
Utilisez <header> en tant qu’enfant direct de <body> (ou de <html> dans un fragment de niveau supérieur). Lorsque <header> est au niveau supérieur, le navigateur l’expose automatiquement comme point de repère banner. Lorsque <header> est imbriqué dans <article>, <section>, <main> ou <aside>, il n’est qu’un groupe générique, pas un point de repère.
role="banner" sur un <div> est approprié uniquement si vous ne pouvez pas utiliser <header> — par exemple dans un CMS qui supprime les balises de points de repère.
Il ne doit pas y avoir plus d’un banner par page. Si vous avez un second en-tête qui n’est pas le banner du site (un en-tête de section, un en-tête de fil de commentaires), utilisez un <header> imbriqué dans sa section, pas au niveau supérieur.
Quand ajouter un libellé
Si votre page comporte plusieurs points de repère du même type (rare pour banner, courant pour navigation), ajoutez aria-label pour les distinguer. Un banner unique n’a pas besoin de libellé — les lecteurs d’écran l’annoncent comme « banner ».
Erreurs courantes
- Plusieurs éléments
<header>en haut de la page, chacun promu en point de repère banner. Les utilisateurs de lecteurs d’écran voient deux entrées « banner » dans le menu des points de repère et ne peuvent pas distinguer le vrai en-tête. role="banner"sur un<header>imbriqué dans<main>ou<article>. Le rôle remplace le comportement non-point-de-repère par défaut et pollue la navigation par points de repère.- Logo du site placé en dehors du
<header>, donc en dehors du point de repère banner. - Navigation collante rendue comme un
<div role="banner">distinct en plus du<header>d’origine — deux banners. - Banner avec un contenu vide (juste des bordures décoratives) — le point de repère apparaît toujours dans la navigation des lecteurs d’écran mais ne contient rien.
Exemple
<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>