enum Valeurs : alert,alertdialog,application,article,banner,button,cell,checkbox,columnheader,combobox,complementary,contentinfo,definition,dialog,directory,document,feed,figure,form,grid,gridcell,group,heading,img,link,list,listbox,listitem,log,main,marquee,math,menu,menubar,menuitem,menuitemcheckbox,menuitemradio,navigation,none,note,option,presentation,progressbar,radio,radiogroup,region,row,rowgroup,rowheader,scrollbar,search,searchbox,separator,slider,spinbutton,status,switch,tab,table,tablist,tabpanel,term,textbox,timer,toolbar,tooltip,tree,treegrid,treeitem

role

Définit le rôle sémantique ARIA d'un élément, permettant aux technologies d'assistance de le présenter et de l'annoncer correctement aux utilisateurs.

Description

L’attribut role (WAI-ARIA) remplace ou complète la sémantique native d’un élément HTML pour les technologies d’assistance (lecteurs d’écran). Il doit être utilisé en dernier recours — préférer toujours les éléments HTML sémantiques natifs qui portent implicitement leur rôle ARIA.

Syntaxe

<div role="alert">Erreur : champ requis manquant.</div>
<ul role="listbox">…</ul>

Exemples

Barre de progression personnalisée :

<div role="progressbar"
     aria-valuenow="65"
     aria-valuemin="0"
     aria-valuemax="100"
     aria-label="Progression du téléchargement">
  <div style="width: 65%; background: #36c">65%</div>
</div>

Widget onglets :

<div role="tablist" aria-label="Sections du formulaire">
  <button role="tab" aria-selected="true" aria-controls="panneau-1" id="onglet-1">
    Informations
  </button>
  <button role="tab" aria-selected="false" aria-controls="panneau-2" id="onglet-2">
    Paiement
  </button>
</div>
<div role="tabpanel" id="panneau-1" aria-labelledby="onglet-1">…</div>
<div role="tabpanel" id="panneau-2" aria-labelledby="onglet-2" hidden>…</div>

Notes

Règle d’or ARIA : “La première règle d’ARIA est de ne pas utiliser ARIA” — toujours préférer un élément HTML natif qui a déjà le bon rôle. <button> est mieux que <div role="button">. <nav> est mieux que <div role="navigation">.

role="presentation" et role="none" : supprime la sémantique d’un élément pour les AT — utile pour les éléments de mise en page (tableaux CSS, <ul> sans liste sémantique).

Rôles composites : certains rôles requièrent des enfants avec des rôles spécifiques (tablist → tab, listbox → option). Ne pas mélanger les rôles de façon incohérente.