Pourquoi l'attribut roll a-t-il été ajouté?

L'attribut role est utilisé dans ARIA (Applications Internet Riches Accessibles) pour définir explicitement le type d'interface utilisateur d'un élément. Cela aide les technologies d'assistance, comme les lecteurs d'écran, à comprendre la fonction de l'élément et à transmettre cette information aux utilisateurs ayant des limitations. Il complète la sémantique HTML, notamment pour les éléments dépourvus de sémantique intégrée ou lorsque la sémantique standard n'est pas suffisante.

Par exemple :

Un élément div avec le rôle button sera perçu par un lecteur d'écran comme un bouton, même s'il n'a pas de comportement ou de sémantique HTML de bouton.

<div role="button" tabindex="0" aria-pressed="false">
  Clique-moi
</div>

Le rôle navigation sur un élément nav (bien que nav ait déjà une sémantique de navigation intégrée) peut améliorer son interprétation dans certains cas.

<nav role="navigation">
  <ul>
    <li><a href="/">Accueil</a></li>
  </ul>
</nav>

Certains widgets complexes créés à partir d'éléments non sémantiques reçoivent leurs rôles pour une représentation correcte :

<div role="tablist">
  <button role="tab" aria-selected="true" aria-controls="panel-1" id="tab-1">Onglet 1</button>
  <button role="tab" aria-selected="false" aria-controls="panel-2" id="tab-2">Onglet 2</button>
</div>
<div id="panel-1" role="tabpanel" aria-labelledby="tab-1">
  Contenu de l'onglet 1.
</div>
<div id="panel-2" role="tabpanel" aria-labelledby="tab-2" hidden>
  Contenu de l'onglet 2.
</div>

L'attribut role classe les éléments selon leur fonction et leur objectif, assurant une interaction plus précise et utile pour les utilisateurs utilisant des technologies d'assistance. Il est important de l'utiliser avec d'autres attributs ARIA (par exemple, aria-label, aria-expanded, aria-hidden) qui transmettent l'état et les propriétés des éléments.

Il faut se rappeler :

La priorité est toujours donnée à la sémantique native HTML5. Si un élément HTML approprié existe, utilisez-le plutôt que de simuler son comportement avec role et d'autres attributs ARIA. Par exemple, utilisez <button> au lieu de <div role="button">.
Changer le rôle d'un élément ne modifie pas son comportement intégré. Par exemple, role="button" sur un div ne le rend pas focusable ou activable avec Space ou Enter sans JavaScript supplémentaire.