Le rôlebanner sert à définir un en-tête global du site, qui comprend généralement un logo, le nom de l'entreprise, une fonction de recherche et éventuellement la navigation globale ou un slogan. Il est généralement situé en haut de la page.

Par défaut, l'élément HTML<header> a une signification identique à celle du repèrebanner, sauf s'il est un descendant de<aside>,<article>,<main>,<nav> ou<section>, auquel cas<header> expose un rôlegeneric et non l'équivalent de la bannière du site.

Description

Un rôle de repèrebanner remplace le rôle ARIA implicite de l'élément conteneur sur lequel il est appliqué. Il doit être réservé au contenu répétitif au niveau du site qui se trouve généralement en haut de chaque page.

La bannière comprend généralement des éléments tels qu'un logo ou une identité d'entreprise, ou éventuellement un outil de recherche spécifique au site, et est généralement ce que votre équipe marketing appellerait l'en-tête ou la bannière supérieure du site. Si la technique de l'élémentheader n'est pas utilisée pour cette bannière, une déclaration derole="banner" doit être utilisée pour définir un repère de bannière pour les technologies d'assistance.

Les technologies d'assistance peuvent identifier l'élémentheader d'une page comme labanner s'il est un descendant de l'élémentbody, et non imbriqué dans une sous-sectionarticle,aside,main,nav ousection.

Chaque page peut avoir un repèrebanner, mais chaque page ne devrait généralement être limitée qu'à un seul élément avec le rôle de bannière. Dans le cas d'une page contenant des rôlesdocument et/ouapplication imbriqués, chaque rôledocument ouapplication imbriqué peut également avoir un repèrebanner. Si une page inclut plus d'un repèrebanner, chacun doit avoir un nom accessible unique.

Rôles ARIA associés, états et propriétés

Aucun.

Interactions au clavier

Aucune.

Fonctionnalités JavaScript nécessaires

Aucune.

Exemples

Voici une fausse bannière avec un lien de saut vers la navigation, un logo, un titre et un sous-titre. Comme il s'agit de l'en-tête principal du site, nous avons ajouté le rôle de repèrebanner à l'élément conteneur.

<div role="banner">  <a href="#main"    >Passer au contenu principal</a  >  <img src="images/w3c.png" alt="Logo W3C" />  <h1>Repères ARIA</h1>  <p>Identification des sous-sections de la page pour une navigation facile</p>  <nav>…</nav></div>

Nous aurions également pu écrire ce qui précède avec l'élément HTMLheader :

<header>  <a href="#main"    >Passer au contenu principal</a  >  <img src="images/w3c.png" alt="Logo W3C" />  <h1>Repères ARIA</h1>  <p>Identification des sous-sections de la page pour une navigation facile</p>  <nav>…</nav></header>

Bonnes pratiques

L'utilisation de l'élément HTML<header> communique automatiquement que l'élément a le rôle debanner. Si possible, privilégiez l'utilisation de l'élément sémantique<header> plutôt que le rôlebanner.

Il est préférable d'utiliser l'élémentheader et de s'assurer qu'il n'est pas un descendant d'une sous-section de la page. Cependant, il arrive parfois que vous n'ayez pas accès au HTML sous-jacent. Dans ce cas, vous pouvez ajouter le rôle debanner à l'élément de la page qui doit être exposé comme unebanner avec JavaScript. Identifier la bannière de la page de cette manière contribuera à améliorer l'accessibilité du site.

Spécifications

Voir aussi

• L'élément HTML<header>
• Exemple de repères WC3^(angl.)