Les principales zones de la page doivent être identifiées à l’aide de l’attribut ARIA role
.
Cet attribut peut prendre plusieurs valeurs pour délimiter des zones, parmi lesquelles :
role=“banner”
pour délimiter une zone de contenu qui identifie le site, comme une bannière avec un logo, un slogan et/ou un champ de recherche.role=“search”
pour délimiter une zone destinée à la recherche, comme un formulaire de recherche.role=“navigation”
pour délimiter les menus ou les éléments de navigation principaux.role=“main”
pour délimiter la zone de contenu principal de la page.
L’attribut role
peut être ajouté sur n’importe quelle balise HTML comme <div>
, <form>
, <nav>
, etc.
Une page ne doit contenir qu’un seul role=“main”
.
role=“search”
dans role=“banner”
, par exemple.role=“navigation”
: inutile d’identifier chaque système de pagination ou chaque lien, seuls les menus principaux doivent être identifiés.
Exemple de placement de rôles ARIA dans une page web.
À noter que role=“navigation”
a été ajouté sur le menu principal ainsi que sur le menu secondaire.