Attention, cette version d'AcceDe Web est obsolète,
pour consulter la dernière version, se rendre sur www.accede-web.com/notices/ !

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

Ressources

Recommandations associées

notices/html-css/identifier-les-principales-zones-de-la-page-avec-l-attribut-role.txt · Dernière modification: Le 31/07/2014 à 12:12 par Johan Ramon (Atalan)
 

Projet coordonné par Atalan.

En partenariat avec :

Et le soutien de :