Rôles WAI-ARIA

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ôles ARIA 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 renvoient null. L'attribut role peut fournir une sémantique.

Les rôles ARIA sont ajoutés aux éléments HTML en utilisant role="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ôle tabpanel 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ôles presentation, toolbar et tooltip, 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.

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 (utilisez h1 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 :

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'utiliser button, checkbox, gridcell, link, menuitem, menuitemcheckbox, menuitemradio, option, progressbar, radio et textbox, 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

Évitez d'utiliser grid, listbox et radiogroup, 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.

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 :

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 :

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'utiliser command, composite, input, landmark, range, roletype, section, sectionhead, select, structure, widget et window.

Note : N'utilisez pas de rôles abstraits dans vos sites et applications. Ils sont destinés aux navigateurs. Ils sont inclus uniquement à titre de référence.

Attention : « Les rôles abstraits sont utilisés pour l'ontologie. Les auteur·ice·s NE DOIVENT PAS utiliser de rôles abstraits dans le contenu. » - La spécification WAI-ARIA

Rôles définis sur le MDN

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

ARIA : rôle alert: Le rôle alert est utilisé pour les informations importantes et généralement urgentes. alert est un type de status traité comme une région dynamique atomique.
ARIA : rôle alertdialog: Le rôle alertdialog 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ôle application indique aux technologies d'assistance qu'un élément et 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 bureau ne sont pas considérées comme des applications dans ce contexte.
ARIA : rôle article: Le rôle article 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ôle banner 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ôle button est destiné aux éléments cliquables qui déclenchent une réponse lorsqu'ils sont activés par l'utilisateur. Ajouter role="button" indique au lecteur d'écran que l'élément est un bouton, mais ne fournit aucune fonctionnalité de bouton. Utilisez button ou input avec type="button" à la place.
ARIA : rôle cell: La valeur cell de l'attribut ARIA role 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ôle row.
ARIA : rôle checkbox: Le rôle checkbox est destiné aux contrôles interactifs cochables. Les éléments contenant role="checkbox" doivent également inclure l'attribut aria-checked afin d'exposer l'état de la case à cocher aux technologies d'assistance.
ARIA : rôle columnheader: Le rôle columnheader 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 natif th avec une portée de colonne.
ARIA : rôle combobox: Le rôle combobox identifie un élément comme étant soit un input, soit un button qui contrôle un autre élément, tel qu'un listbox ou une grid, 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ôle command 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ôle comment désigne sémantiquement un commentaire/réaction à un contenu sur la page, ou à un commentaire précédent.
ARIA : rôle complementary: Le rôle de repère complementary 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: Le rôle abstrait composite indique un widget qui peut contenir des descendants navigables ou des enfants possédés.
ARIA : rôle contentinfo: Le rôle contentinfo 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ôle definition indique que l'élément est une définition d'un terme ou d'un concept.
ARIA : rôle dialog: Le rôle dialog 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ôle directory é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ôle document est destiné au contenu sélectionnable au sein des widgets ou applications composites complexes pour lesquels les technologies d'assistance peuvent revenir à un mode de lecture.
ARIA : rôle feed: Le rôle feed 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. Un feed 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ôle figure 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ôle form 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 un nom accessible.
ARIA : rôle generic: Le rôle generic crée un élément conteneur sans nom qui n'a pas de signification sémantique en soi.
ARIA : rôle grid: Le rôle grid 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ôle gridcell est utilisé pour créer une cellule dans une grille ou un arbre de grille. Il est destiné à imiter la fonctionnalité de l'élément HTML td pour le regroupement d'informations de style tableau.
ARIA : rôle group: Le rôle group 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ôle heading définit cet élément comme un en-tête d'une page ou d'une section, avec l'attribut aria-level fournissant une structure supplémentaire.
ARIA : rôle img: Le rôle img 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 abstrait input est un type générique de widget qui permet la saisie de l'utilisateur·ice.
ARIA : rôle landmark: Le rôle landmark 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 ARIA link 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ôle list peut être utilisé pour identifier une liste d'éléments. Il est normalement utilisé en conjonction avec le rôle listitem, qui est utilisé pour identifier un élément de la liste.
ARIA : rôle listbox: Le rôle listbox 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 HTML select, peuvent contenir des images.
ARIA : rôle listitem: Le rôle listitem 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ôle list, qui est utilisé pour identifier un conteneur de liste.
ARIA : rôle log: Le rôle log est utilisé pour identifier un élément qui crée une 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ère main 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ôle mark 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ôle marquee désigne un type de région dynamique contenant des informations non essentielles qui changent fréquemment.
ARIA : rôle math: Le rôle math indique que le contenu représente une expression mathématique.
ARIA : rôle menu: Le rôle menu est un type de widget composite qui offre une liste de choix à l'utilisateur·ice.
ARIA : rôle menubar: Le rôle menubar est une présentation de menu qui reste généralement visible et présenté horizontalement.
ARIA : rôle menuitem: Le rôle menuitem indique que l'élément est une option dans un ensemble de choix contenus par un menu ou menubar.
ARIA : rôle menuitemcheckbox: Le rôle menuitemcheckbox est un menuitem avec un état vérifiable dont les valeurs possibles sont true, false ou mixed.
ARIA : rôle menuitemradio: Le rôle menuitemradio 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ôle meter sert à identifier un élément utilisé comme indicateur de mesure.
ARIA : rôle navigation: Le rôle navigation 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ôle none est un synonyme du rôle presentation ; 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ôle note indique une section dont le contenu est parenthétique ou accessoire par rapport au contenu principal.
ARIA : rôle option: Le rôle option est utilisé pour les éléments sélectionnables dans une listbox.
ARIA : rôle presentation: Le rôle presentation et son synonyme none 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ôle progressbar définit un élément qui affiche l'état de progression des tâches qui prennent du temps.
ARIA : rôle radio: Le rôle radio fait partie d'un groupe de boutons radio sélectionnables, dans un radiogroup, où un seul bouton radio peut être sélectionné à la fois.
ARIA : rôle radiogroup: Le rôle radiogroup représente un groupe de boutons radio.
ARIA : rôle range: Le rôle abstrait range est un type générique de rôle de structure représentant une plage de valeurs.
ARIA : rôle region: Le rôle region 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 abstrait roletype est la base à partir de laquelle tous les autres rôles ARIA héritent.
ARIA : rôle row: Un élément avec role="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'un grid, table ou treegrid et éventuellement dans un rowgroup.
ARIA : rôle rowgroup: Le rôle rowgroup (« groupe de lignes ») regroupe des lignes au sein d'une structure tabulaire. Un rowgroup contient une ou plusieurs lignes composées de cellules, de cellules de grille, d'en-têtes de colonne ou d'en-têtes de ligne à l'intérieur d'une grid, d'une table ou d'un treegrid.
ARIA : rôle rowheader: Le rôle role="rowheader" désigne une cellule contenant l'information d'en-tête d'une ligne au sein d'une structure tabulaire, comme une grid, une table ou un treegrid.
ARIA : rôle scrollbar: Le rôle scrollbar 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ôle search 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ôle searchbox indique qu'un élément est un type de textbox destiné à spécifier des critères de recherche.
ARIA : rôle section: Le rôle abstrait section est une superclasse pour les composants de conteneur structurels de rendu.
ARIA : rôle sectionhead: Le rôle abstrait sectionhead est une superclasse pour les étiquettes ou résumés du sujet de sa section associée.
ARIA : rôle select: Le rôle abstrait select 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ôle separator 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 natif hr est separator.
ARIA : rôle slider: Le rôle slider 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ôle spinbutton 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ôle status définit une région dynamique contenant des informations de conseil pour l'utilisateur·ice qui ne sont pas assez importantes pour être une alerte.
ARIA : rôle structure: Le rôle abstrait structure est destiné aux éléments structurels des documents.
ARIA : rôle suggestion: Le rôle suggestion 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ôle insertion, et un avec un rôle deletion.
ARIA : rôle switch: Le rôle switch est fonctionnellement identique au rôle checkbox, sauf qu'au lieu de représenter les états « coché » et « non coché », qui sont assez génériques, le rôle switch représente les états « activé » et « désactivé ».
ARIA : rôle tab: Le rôle tab indique un élément interactif à l'intérieur d'un tablist qui, lorsqu'il est activé, affiche son tabpanel associé.
ARIA : rôle table: Le rôle table 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 natif table.
ARIA : rôle tablist: Le rôle tablist identifie l'élément qui sert de conteneur pour un ensemble d'onglets (tabs). Le contenu des onglets est appelé éléments tabpanel.
ARIA : rôle tabpanel: Le rôle tabpanel est un conteneur pour les ressources du contenu superposé associé à un onglet (tab).
ARIA : rôle term: Le rôle term peut être utilisé pour un mot ou une expression avec une definition associée (optionnelle).
ARIA : rôle textbox: Le rôle textbox sert à identifier un élément qui permet la saisie de texte libre. Chaque fois que possible, préférez utiliser un élément input avec type="text" pour une saisie sur une seule ligne, ou un élément textarea pour une saisie sur plusieurs lignes.
ARIA : rôle timer: Le rôle timer 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 implicite aria-live à off.
ARIA : rôle toolbar: Le rôle toolbar 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: Un tooltip (« 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: Un tree (« 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ôle treegrid 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ôle treeitem est un élément dans une arborescence (tree).
ARIA : rôle widget: Le rôle abstrait widget est un composant interactif d'une interface utilisateur graphique (GUI).
ARIA : rôle window: Le rôle window 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

Help improve MDN

Learn how to contribute

This page was last modified on ⁨13 sept. 2025⁩ by MDN contributors.

View this page on GitHub • Report a problem with this content