Les rôles ARIA fournissent une signification sémantique au contenu, permettant aux lecteurs d'écran et autres outils de présenter et de prendre en charge l'interaction avec un objet d'une manière cohérente avec les attentes utilisateur·ice·s pour ce type d'objet. Les rôlesARIA peuvent être utilisés pour décrire des éléments qui n'existent pas nativement en HTML ou qui existent mais qui n'ont pas encore une prise en charge complète par les navigateurs.

Par défaut, de nombreux éléments sémantiques en HTML possèdent un rôle ; par exemple,<input type="radio"> a le rôle « radio ». Les éléments non sémantiques en HTML n'ont pas de rôle ;<div> et<span> sans sémantique ajoutée renvoientnull. L'attributrole peut fournir une sémantique.

Les rôles ARIA sont ajoutés aux éléments HTML en utilisantrole="type de rôle", oùtype de rôle est le nom d'un rôle dans la spécification ARIA. Certains rôles exigent l'inclusion d'états ou propriétés ARIA associés ; d'autres ne sont valides qu'en association avec d'autres rôles.

Par exemple,<ul role="tabpanel"> sera annoncé comme un « panneau d'onglets » par les lecteurs d'écran. Cependant, si le panneau d'onglets n'a pas d'onglets imbriqués, l'élément avec le rôletabpanel n'est en fait pas un panneau d'onglets et l'accessibilité est en réalité négativement impactée.

Lesétats et propriétés ARIA associés à chaque rôle sont inclus dans les pages des rôles, chaque attribut disposant également d'une page dédiée.

Types de rôles ARIA

Il existe 6 catégories de rôles ARIA :

1. Rôles dans la structure des documents

Les rôles de structure de document sont utilisés pour fournir une description structurelle d'une section de contenu. La plupart de ces rôles ne devraient plus être utilisés car les navigateurs prennent désormais en charge des éléments HTML sémantiques ayant la même signification. Les rôles sans équivalents HTML, tels que les rôlespresentation,toolbar ettooltip, fournissent des informations sur la structure du document aux technologies d'assistance comme les lecteurs d'écran puisque les balises HTML natives équivalentes ne sont pas disponibles.

• toolbar
• tooltip
• feed
• math
• presentation /none
• note

Pour la plupart des rôles de structure de document, des éléments HTML sémantiques équivalents sont disponibles et pris en charge. Évitez d'utiliser :

• application
• article (utilisez<article>)
• cell (utilisez<td>)
• columnheader (utilisez<th scope="col">)
• definition (utilisez<dfn>)
• directory
• document
• figure (utilisez<figure> à la place)
• group
• heading (utilisezh1 jusqu'àh6)
• img (utilisez<img> ou<picture> à la place)
• list (utilisez soit<ul> soit<ol> à la place)
• listitem (utilisez<li> à la place)
• meter (utilisez<meter> à la place)
• row (utilisez<tr> avec<table>)
• rowgroup (utilisez<thead>,<tfoot> et<tbody>)
• rowheader (utilisez<th scope="row">)
• separator (utilisez<hr> s'il n'a pas le focus)
• table (utilisez<table>)
• term (utilisez<dfn>)

Ceux-ci sont inclus pour complétude, mais dans la plupart des cas ils sont rarement, voire jamais, utiles :

• associationlist
• associationlistitemkey
• associationlistitemvalue
• blockquote
• caption
• code
• deletion
• emphasis
• insertion
• paragraph
• strong
• subscript
• superscript
• time

2. Rôles de widgets

Les rôles de widgets sont utilisés pour définir des schémas interactifs courants. Comme pour les rôles de structure de document, certains rôles de widgets ont la même sémantique que des éléments HTML natifs bien pris en charge, et doivent donc être évités. La différence clé est que les rôles de widgets nécessitent généralement JavaScript pour l'interaction, tandis que les rôles de structure de document n'en nécessitent souvent pas.

• scrollbar
• searchbox
• separator (lorsqu'il peut recevoir le focus)
• slider
• spinbutton
• switch
• tab
• tabpanel
• treeitem

Évitez d'utiliserbutton,checkbox,gridcell,link,menuitem,menuitemcheckbox,menuitemradio,option,progressbar,radio ettextbox, que nous avons inclus pour complétude. Pour la plupart, des équivalents sémantiques avec interactivité accessible sont disponibles et pris en charge. Voir la documentation individuelle de chaque rôle pour plus d'informations.

Rôles de widgets composites

• combobox
• menu
• menubar
• tablist
• tree
• treegrid

Évitez d'utilisergrid,listbox etradiogroup, que nous avons inclus pour complétude. Voir la documentation individuelle pour plus d'informations.

Notez qu'il existe également un rôle de widget (role="widget"), qui est un rôle abstrait et non inclus dans la catégorie des rôles de widgets.

3. Rôles de repères

Les rôles de repères fournissent un moyen d'identifier l'organisation et la structure d'une page web. En classant et étiquetant les sections d'une page, l'information structurelle transmise visuellement par la mise en page est représentée de façon programmatique. Les lecteurs d'écran utilisent les rôles de repères pour fournir une navigation clavier vers les sections importantes d'une page. Utilisez-les avec parcimonie. Trop de rôles de repères créent du « bruit » dans les lecteurs d'écran, ce qui rend difficile la compréhension de la mise en page globale de la page.

• banner (document<header>)
• complementary (<aside>)
• contentinfo (document<footer>)
• form (<form>)
• main (<main>)
• navigation (<nav>)
• region (<section>)
• search (<search>)

4. Rôles de régions dynamiques

Les rôles de régions dynamiques sont utilisés pour définir des éléments dont le contenu sera modifié dynamiquement. Les utilisateur·ice·s voyants peuvent voir les changements dynamiques lorsqu'ils sont visuellement perceptibles. Ces rôles aident les utilisateur·ice·s malvoyant·e·s et non-voyant·e·s à savoir si le contenu a été mis à jour. Les technologies d'assistance, comme les lecteurs d'écran, peuvent être configurées pour annoncer les changements de contenu dynamiques :

• alert
• log
• marquee
• status
• timer

5. Rôles de fenêtre

Les rôles de fenêtre définissent des sous-fenêtres dans la fenêtre du document principal, au sein de la même fenêtre, telles que les boîtes de dialogue modales :

• alertdialog
• dialog

6. Rôles abstraits

Les rôles abstraits sont uniquement destinés à être utilisés par les navigateurs pour aider à organiser et rationaliser un document. Ils ne doivent pas être utilisés par les développeur·euse·s écrivant du code HTML. Le faire ne transmettra aucune information significative aux technologies d'assistance ou aux utilisateur·ice·s.

Évitez d'utilisercommand,composite,input,landmark,range,roletype,section,sectionhead,select,structure,widget etwindow.

Rôles définis sur le MDN

Voici les pages de référence couvrant les rôles WAI-ARIA abordés sur leMDN.

ARIA : rôle alert

Le rôlealert est utilisé pour les informations importantes et généralement urgentes.alert est un type destatus traité comme une région dynamique atomique.

ARIA : rôle alertdialog

Le rôlealertdialog est à utiliser sur les boîtes de dialogue d'alerte modales qui interrompent le flux de travail de l'utilisateur·ice afin de communiquer un message important et nécessitent une réponse.

ARIA : rôle application

Le rôleapplication indique aux technologies d'assistance qu'un élémentet tous ses enfants doivent être traités comme une application de bureau, et qu'aucune technique d'interprétation HTML traditionnelle ne doit être utilisée. Ce rôle ne doit être utilisé que pour définir des applications web très dynamiques et proches d'une application de bureau. La plupart des applications web mobiles et de bureaune sont pas considérées comme des applications dans ce contexte.

ARIA : rôle article

Le rôlearticle indique qu'une section d'une page pourrait tout à fait être autonome sur sa propre page, sur un document ou un site web donné. Il est généralement associé au contenu relatif comme les commentaires, les messages sur un forum, les articles d'un journal ou plus généralement pour des éléments regroupés à plusieurs sur une même page.

ARIA : rôle banner

Le rôlebanner sert à définir un en-tête global du site, qui comprend généralement un logo, le nom de l'entreprise, une fonction de recherche et éventuellement la navigation globale ou un slogan. Il est généralement situé en haut de la page.

ARIA : rôle button

Le rôlebutton est destiné aux éléments cliquables qui déclenchent une réponse lorsqu'ils sont activés par l'utilisateur. Ajouterrole="button" indique au lecteur d'écran que l'élément est un bouton, mais ne fournit aucune fonctionnalité de bouton. Utilisezbutton ouinput avectype="button" à la place.

ARIA : rôle cell

La valeurcell de l'attribut ARIArole identifie un élément comme étant une cellule dans un conteneur tabulaire qui ne contient pas d'informations d'en-tête de colonne ou de ligne. Pour être prise en charge, la cellule doit être imbriquée dans un élément avec le rôlerow.

ARIA : rôle checkbox

Le rôlecheckbox est destiné aux contrôles interactifs cochables. Les éléments contenantrole="checkbox" doivent également inclure l'attributaria-checked afin d'exposer l'état de la case à cocher aux technologies d'assistance.

ARIA : rôle columnheader

Le rôlecolumnheader identifie un élément comme étant une cellule dans une ligne contenant des informations d'en-tête pour une colonne, similaire à l'élément HTML natifth avec une portée de colonne.

ARIA : rôle combobox

Le rôlecombobox identifie un élément comme étant soit uninput, soit unbutton qui contrôle un autre élément, tel qu'unlistbox ou unegrid, qui peut apparaître dynamiquement pour aider l'utilisateur·ice à définir la valeur. Un combobox peut être soit modifiable (permettant la saisie de texte), soit uniquement sélectionnable (permettant uniquement la sélection dans le popup).

ARIA : rôle command

Le rôlecommand définit un widget qui effectue une action mais ne reçoit pas de données d'entrée.

ARIA : rôle comment

Le rôlecomment désigne sémantiquement un commentaire/réaction à un contenu sur la page, ou à un commentaire précédent.

ARIA : rôle complementary

Lerôle de repèrecomplementary est utilisé pour désigner une section de soutien qui se rapporte au contenu principal, mais qui peut se suffire à elle-même lorsqu'elle est séparée. Ces sections sont souvent présentées sous forme de barres latérales ou de boîtes d'appel. Si possible, utilisez l'élément HTML <aside> à la place.

ARIA : rôle composite

Lerôle abstraitcomposite indique un widget qui peut contenir des descendants navigables ou des enfants possédés.

ARIA : rôle contentinfo

Le rôlecontentinfo définit un pied de page, contenant des informations d'identification telles que des informations sur le droit d'auteur, des liens de navigation et des déclarations de confidentialité, que l'on trouve sur chaque document d'un site. Cette section est communément appelée pied de page.

ARIA : rôle definition

Le rôledefinition indique que l'élément est une définition d'un terme ou d'un concept.

ARIA : rôle dialog

Le rôledialog est utilisé pour marquer un dialogue ou une fenêtre d'application basée sur HTML qui sépare le contenu ou l'interface utilisateur du reste de l'application ou de la page web. Les dialogues sont généralement placés au-dessus du reste du contenu de la page à l'aide d'un superposition. Les dialogues peuvent être soit non modaux (il est toujours possible d'interagir avec le contenu en dehors du dialogue) ou modaux (seul le contenu dans le dialogue peut être interagi avec).

ARIA : rôle directory

Le rôledirectory était destiné à une liste de références aux membres d'un groupe, comme une table des matières statique.

ARIA : rôle document

Le rôledocument est destiné au contenu sélectionnable au sein deswidgets ouapplications composites complexes pour lesquels les technologies d'assistance peuvent revenir à un mode de lecture.

ARIA : rôle feed

Le rôlefeed est une liste dynamique et défilante d'articles dans laquelle les articles sont ajoutés ou supprimés de chaque extrémité de la liste au fur et à mesure que l'utilisateur·ice fait défiler. Unfeed permet aux lecteurs d'écran d'utiliser le curseur de lecture en mode de navigation pour à la fois lire et faire défiler un flux de contenu riche qui peut continuer à défiler indéfiniment en chargeant plus de contenu au fur et à mesure que l'utilisateur·ice lit.

ARIA : rôle figure

Le rôlefigure peut être utilisé pour identifier une figure à l'intérieur du contenu de la page lorsque des sémantiques appropriées n'existent pas déjà. Une figure est généralement considérée comme une ou plusieurs images, extraits de code ou autres contenus qui transmettent des informations d'une manière différente de celle d'un flux de texte régulier.

ARIA : rôle form

Le rôleform peut être utilisé pour identifier un groupe d'éléments sur une page qui fournissent une fonctionnalité équivalente à celle d'un formulaire HTML. Le formulaire n'est pas exposé en tant que région de repère à moins qu'il n'ait unnom accessible.

ARIA : rôle generic

Le rôlegeneric crée un élément conteneur sans nom qui n'a pas de signification sémantique en soi.

ARIA : rôle grid

Le rôlegrid est destiné à un widget qui contient une ou plusieurs lignes de cellules. La position de chaque cellule est significative et peut être mise au point à l'aide de l'entrée au clavier.

ARIA : rôle gridcell

Le rôlegridcell est utilisé pour créer une cellule dans unegrille ou unarbre de grille. Il est destiné à imiter la fonctionnalité de l'élément HTMLtd pour le regroupement d'informations de style tableau.

ARIA : rôle group

Le rôlegroup identifie un ensemble d'objets d'interface utilisateur qui n'est pas destiné à être inclus dans un résumé de page ou une table des matières par les technologies d'assistance.

ARIA : rôle heading

Le rôleheading définit cet élément comme un en-tête d'une page ou d'une section, avec l'attributaria-level fournissant une structure supplémentaire.

ARIA : rôle img

Le rôleimg est utilisé pour identifier plusieurs éléments à l'intérieur du contenu de la page qui doivent être considérés comme une seule image. Ces éléments sont des images, des extraits de code, du texte, des emojis ou d'autres contenus qui peuvent être combinés pour transmettre des informations de manière visuelle.

ARIA : rôle input

Le rôle abstraitinput est un type générique de widget qui permet la saisie de l'utilisateur·ice.

ARIA : rôle landmark

Le rôlelandmark est une superclasse abstraite pour les valeurs de rôle ARIA pour les sections de contenu qui sont suffisamment importantes pour que les utilisateur·ice·s souhaitent probablement pouvoir y naviguer directement. Un repère (landmark) est une sous-section importante d'une page.

ARIA : rôle link

Un rôle ARIAlink fournit une référence interactive à une ressource. La ressource cible peut être externe ou locale, c'est-à-dire à l'intérieur ou à l'extérieur de la page ou de l'application active.

ARIA : rôle list

Le rôlelist peut être utilisé pour identifier une liste d'éléments. Il est normalement utilisé en conjonction avec le rôlelistitem, qui est utilisé pour identifier un élément de la liste.

ARIA : rôle listbox

Le rôlelistbox est utilisé pour les listes à partir desquelles un·e utilisateur·ice peut sélectionner un ou plusieurs éléments qui sont statiques et, contrairement aux éléments HTMLselect, peuvent contenir des images.

ARIA : rôle listitem

Le rôlelistitem peut être utilisé pour identifier un élément à l'intérieur d'une liste d'éléments. Il est normalement utilisé en conjonction avec le rôlelist, qui est utilisé pour identifier un conteneur de liste.

ARIA : rôle log

Le rôlelog est utilisé pour identifier un élément qui créeune zone dynamique^(angl.) où de nouvelles informations sont ajoutées dans un ordre significatif et où les anciennes informations peuvent être supprimées.

ARIA : rôle main

Le rôle de repèremain est utilisé pour indiquer le contenu principal d'un document. La zone de contenu principal se compose de contenu qui est directement lié ou qui développe le sujet central d'un document, ou la fonction principale d'une application.

ARIA : rôle mark

Le rôlemark désigne le contenu qui est marqué ou mis en évidence à des fins de référence ou de notation, en raison de la pertinence du contenu dans le contexte environnant.

ARIA : rôle marquee

Le rôlemarquee désigne un type derégion dynamique contenant des informations non essentielles qui changent fréquemment.

ARIA : rôle math

Le rôlemath indique que le contenu représente une expression mathématique.

ARIA : rôle menu

Le rôlemenu est un type de widget composite qui offre une liste de choix à l'utilisateur·ice.

ARIA : rôle menubar

Le rôlemenubar est une présentation demenu qui reste généralement visible et présenté horizontalement.

ARIA : rôle menuitem

Le rôlemenuitem indique que l'élément est une option dans un ensemble de choix contenus par unmenu oumenubar.

ARIA : rôle menuitemcheckbox

Le rôlemenuitemcheckbox est unmenuitem avec un état vérifiable dont les valeurs possibles sonttrue,false oumixed.

ARIA : rôle menuitemradio

Le rôlemenuitemradio est un élément de menu sélectionnable dans un ensemble d'éléments ayant le même rôle, dont un seul peut être sélectionné à la fois.

ARIA : rôle meter

Le rôlemeter sert à identifier un élément utilisé comme indicateur de mesure.

ARIA : rôle navigation

Le rôlenavigation sert à identifier les principaux groupes de liens utilisés pour naviguer dans le contenu d'un site web ou d'une page.

ARIA : rôle none

Le rôlenone est un synonyme du rôlepresentation ; ils suppriment tous deux les sémantiques ARIA implicites d'un élément afin qu'elles ne soient pas exposées à l'arbre d'accessibilité.

ARIA : rôle note

Le rôlenote indique une section dont le contenu est parenthétique ou accessoire par rapport au contenu principal.

ARIA : rôle option

Le rôleoption est utilisé pour les éléments sélectionnables dans unelistbox.

ARIA : rôle presentation

Le rôlepresentation et son synonymenone suppriment les sémantiques ARIA implicites d'un élément afin qu'elles ne soient pas exposées à l'arbre d'accessibilité.

ARIA : rôle progressbar

Le rôleprogressbar définit un élément qui affiche l'état de progression des tâches qui prennent du temps.

ARIA : rôle radio

Le rôleradio fait partie d'un groupe de boutons radio sélectionnables, dans unradiogroup, où un seul bouton radio peut être sélectionné à la fois.

ARIA : rôle radiogroup

Le rôleradiogroup représente un groupe de boutonsradio.

ARIA : rôle range

Le rôle abstraitrange est un type générique de rôle de structure représentant une plage de valeurs.

ARIA : rôle region

Le rôleregion sert à identifier les zones d'un document jugées importantes par l'auteur·ice. Il s'agit d'un repère générique permettant d'aider à la navigation lorsqu'aucun autre rôle de repère n'est approprié.

ARIA : rôle roletype

Le rôle abstraitroletype est la base à partir de laquelle tous les autres rôles ARIA héritent.

ARIA : rôle row

Un élément avecrole="row" représente une ligne de cellules dans une structure tabulaire. Une ligne contient une ou plusieurs cellules, cellules de grille ou en-têtes de colonne, et éventuellement un en-tête de ligne, au sein d'ungrid,table outreegrid et éventuellement dans unrowgroup.

ARIA : rôle rowgroup

Le rôlerowgroup (« groupe de lignes ») regroupe deslignes au sein d'une structure tabulaire. Unrowgroup contient une ou plusieurs lignes composées decellules, decellules de grille, d'en-têtes de colonne ou d'en-têtes de ligne à l'intérieur d'unegrid, d'unetable ou d'untreegrid.

ARIA : rôle rowheader

Le rôlerole="rowheader" désigne unecellule contenant l'information d'en-tête d'uneligne au sein d'une structure tabulaire, comme unegrid, unetable ou untreegrid.

ARIA : rôle scrollbar

Le rôlescrollbar est un objet graphique qui contrôle le défilement du contenu à l'intérieur d'une zone d'affichage.

ARIA : rôle search

Le rôlesearch est utilisé pour identifier la fonctionnalité de recherche ; la section de la page utilisée pour rechercher dans la page, le site ou la collection de sites.

ARIA : rôle searchbox

Le rôlesearchbox indique qu'un élément est un type detextbox destiné à spécifier des critères de recherche.

ARIA : rôle section

Le rôle abstraitsection est une superclasse pour les composants de conteneur structurels de rendu.

ARIA : rôle sectionhead

Le rôle abstraitsectionhead est une superclasse pour les étiquettes ou résumés du sujet de sa section associée.

ARIA : rôle select

Le rôle abstraitselect est une superclasse pour les widgets de formulaire qui permettent à l'utilisateur·ice de faire des sélections parmi un ensemble de choix.

ARIA : rôle separator

Le rôleseparator indique que l'élément est un diviseur qui sépare et distingue les sections de contenu ou les groupes d'éléments de menu. Le rôle ARIA implicite de l'élément de rupture thématique natifhr estseparator.

ARIA : rôle slider

Le rôleslider définit un champ de saisie dans lequel l'utilisateur·ice sélectionne une valeur comprise dans une plage donnée.

ARIA : rôle spinbutton

Le rôlespinbutton définit un type de plage où l'utilisateur·ice doit sélectionner une valeur parmi des choix discrets.

ARIA : rôle status

Le rôlestatus définit unerégion dynamique contenant des informations de conseil pour l'utilisateur·ice qui ne sont pas assez importantes pour être unealerte.

ARIA : rôle structure

Le rôle abstraitstructure est destiné aux éléments structurels des documents.

ARIA : rôle suggestion

Le rôlesuggestion désigne sémantiquement un changement proposé unique dans un document modifiable. Cela doit être utilisé sur un élément qui enveloppe un élément avec un rôleinsertion, et un avec un rôledeletion.

ARIA : rôle switch

Le rôleswitch est fonctionnellement identique au rôlecheckbox, sauf qu'au lieu de représenter les états « coché » et « non coché », qui sont assez génériques, le rôleswitch représente les états « activé » et « désactivé ».

ARIA : rôle tab

Le rôletab indique un élément interactif à l'intérieur d'untablist qui, lorsqu'il est activé, affiche sontabpanel associé.

ARIA : rôle table

Le rôletable identifie l'élément comme une structure de tableau non interactive contenant des données organisées en lignes et colonnes, similaire à l'élément HTML natiftable.

ARIA : rôle tablist

Le rôletablist identifie l'élément qui sert de conteneur pour un ensemble d'onglets (tabs). Le contenu des onglets est appelé élémentstabpanel.

ARIA : rôle tabpanel

Le rôletabpanel est un conteneur pour les ressources du contenu superposé associé à un onglet (tab).

ARIA : rôle term

Le rôleterm peut être utilisé pour un mot ou une expression avec unedefinition associée (optionnelle).

ARIA : rôle textbox

Le rôletextbox sert à identifier un élément qui permet la saisie de texte libre. Chaque fois que possible, préférez utiliser un élémentinput avectype="text" pour une saisie sur une seule ligne, ou un élémenttextarea pour une saisie sur plusieurs lignes.

ARIA : rôle timer

Le rôletimer indique aux technologies d'assistance qu'un élément est un compteur numérique affichant le temps écoulé depuis un point de départ ou le temps restant jusqu'à un point d'arrivée. Les technologies d'assistance n'annoncent pas les mises à jour d'un timer, car il possède une valeur implicitearia-live àoff.

ARIA : rôle toolbar

Le rôletoolbar définit l'élément conteneur comme un ensemble de boutons ou de contrôles fréquemment utilisés, regroupés sous une forme visuelle compacte.

ARIA : rôle tooltip

Untooltip (« info-bulle ») est une bulle de texte contextuelle qui affiche une description pour un élément, apparaissant au survol du pointeur ou lors de la sélection clavier.

ARIA : rôle tree

Untree (« arbre ») est un composant qui permet à l'utilisateur·ice de sélectionner un ou plusieurs éléments dans une collection organisée hiérarchiquement.

ARIA : rôle treegrid

Le rôletreegrid identifie un élément comme étant une grille dont les lignes peuvent être développées ou réduites, de la même manière qu'une « arborescence » (tree en anglais).

ARIA : rôle treeitem

Le rôletreeitem est un élément dans une arborescence (tree).

ARIA : rôle widget

Lerôle abstraitwidget est un composant interactif d'une interface utilisateur graphique (GUI).

ARIA : rôle window

Le rôlewindow définit une fenêtre de navigateur ou d'application.

ARIA : rôles structurels de document

Les rôles ARIA de structure de document servent à fournir une description structurelle d'une section de contenu.

Voir aussi

• Utiliser ARIA : rôles, états et propriétés
• États et propriétés ARIA