205 – L’attribut sémantique role

Le HTML5 permet l’utilisation de l’attribut role pour un apport d’informations complémentaires. Ce module traite de la gestion du contenu des pages pour les personnes handicapées. Certains éléments HTML5 ont un role implicite, par exemple l’élément <nav> a comme role implicite navigation.

Voici les principales valeurs de l’attribut role :

  • main : définit le contenu principal d’un document.
  • secondary : définit une partie secondaire du document.
  • navigation : définit la barre de navigation du document.
  • banner : située classiquement en haut de page, la bannière contient habituellement le logo et le slogan de l’entreprise.
  • contentinfo : indique que l’élément contient des informations à propos du contenu de la page : auteurs, copyrights, mentions légales…
  • definition : représente la définition d’un élément.
  • note : correspond usuellement à une note entre parenthèses ou de bas de page.
  • seealso : indique que l’élément contient des informations en relation avec le contenu principal de la page.
  • search : contient le formulaire de recherche d’une page.

Voici un exemple simple d’utilisation :

<div id="recherche" role="search"> 
...
</div>

Un autre :

<header id="banniere" role="banner"> 
...
</header>

Pour plus d’informations concernant l’Accessible Rich Internet Applications (WAI-ARIA), consultez ce lien : http://www.w3.org/TR/wai-aria/