1.1.1. Identifier les principales zones de la page avec l'attribut role

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.

Attention

Une page ne doit contenir qu’un seul role=“main”.

Remarques

Il est tout à fait possible d’imbriquer plusieurs rôles ARIA : role=“search” dans role=“banner”, par exemple.
Il est recommandé de ne pas charger la page en attributs role=“navigation” : inutile d’identifier chaque système de pagination ou chaque lien, seuls les menus principaux doivent être identifiés.

Exemples

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.

Quelques outils pratiques

Sous Firefox, la barre d’outil Web Developer permet d’afficher les rôles ARIA présents dans une page (Information > Afficher les rôles ARIA) : https://addons.mozilla.org/fr/firefox/addon/web-developer/.

Ressources

La liste des rôles ARIA délimitant des zones (landmark roles) est disponible à cette adresse : http://www.w3.org/TR/wai-aria/roles#landmark_roles.

Recommandations associées

Recommandation suivante : 1.1.2. Mettre en place une hiérarchie de titres logique et exhaustive avec les balises <h1> à <h6>