Rôles ARIA
Liste complète des rôles ARIA, organisée par catégories
Rôles de structure de document
- alert : Pour les informations importantes et généralement urgentes.
- alertdialog : Pour les boîtes de dialogue modales d'alerte qui interrompent le flux de travail de l'utilisateur.
- application : Indique que l'élément doit être traité comme une application de bureau.
- article : Indique une section de contenu autonome.
- banner : Définit l'en-tête global d'un site.
- complementary : Désigne une section de support liée au contenu principal.
- contentinfo : Définit un pied de page contenant des informations d'identification.
- definition : Indique que l'élément est une définition d'un terme ou concept.
- directory : Pour une liste de références aux membres d'un groupe.
- document : Pour le contenu focalisable dans des widgets composites complexes.
- feed : Pour une liste dynamique et défilable d'articles.
- figure : Identifie une figure dans le contenu de la page.
- form : Identifie un groupe d'éléments fournissant une fonctionnalité équivalente à un formulaire HTML.
- generic : Crée un élément conteneur sans nom et sans signification sémantique.
- group : Identifie un ensemble d'objets d'interface utilisateur.
- heading : Définit un élément comme en-tête d'une page ou d'une section.
- img : Identifie plusieurs éléments comme une seule image.
- list : Identifie une liste d'éléments.
- listitem : Identifie un élément à l'intérieur d'une liste.
- log : Identifie un élément qui crée une région dynamique où de nouvelles informations sont ajoutées.
- main : Indique le contenu principal d'un document.
- mark : Dénote un contenu marqué ou mis en évidence.
- marquee : Pour une région dynamique contenant des informations non essentielles qui changent fréquemment.
- math : Indique que le contenu représente une expression mathématique.
- meter : Identifie un élément utilisé comme compteur.
- navigation : Identifie les groupes principaux de liens utilisés pour la navigation.
- none : Synonyme du rôle "presentation".
- note : Suggère une section dont le contenu est parenthétique ou accessoire.
- presentation : Supprime la sémantique ARIA implicite d'un élément.
- region : Identifie les zones du document jugées importantes par l'auteur.
- search : Identifie la fonctionnalité de recherche.
- status : Définit une région dynamique contenant des informations consultatives pour l'utilisateur.
- suggestion : Dénote une modification proposée à un document modifiable.
Rôles de widgets
- button : Pour les éléments cliquables déclenchant une réponse.
- checkbox : Pour les contrôles interactifs cochables.
- combobox : Identifie un élément comme une entrée contrôlant un autre élément.
- gridcell : Utilisé pour créer une cellule dans une grille ou un treegrid.
- link : Fournit une référence interactive à une ressource.
- menuitem : Indique que l'élément est une option dans un ensemble de choix.
- menuitemcheckbox : Un menuitem avec un état cochable.
- menuitemradio : Un menuitem cochable dans un ensemble d'éléments.
- option : Utilisé pour les éléments sélectionnables dans une listbox.
- progressbar : Définit un élément qui affiche l'état d'avancement des tâches.
- radio : Un bouton radio dans un groupe de boutons radio.
- scrollbar : Un objet graphique qui contrôle le défilement du contenu.
- searchbox : Indique un élément de type textbox destiné à spécifier des critères de recherche.
- separator : Indique un élément qui sépare et distingue des sections de contenu.
- slider : Définit une entrée où l'utilisateur sélectionne une valeur dans une plage donnée.
- spinbutton : Définit un type de plage où l'utilisateur sélectionne une valeur parmi des choix discrets.
- switch : Fonctionnellement identique au rôle checkbox, mais représente les états "on" et "off".
- tab : Indique un élément interactif à l'intérieur d'un tablist.
- tabpanel : Un conteneur pour le contenu associé à un onglet.
- textbox : Identifie un élément permettant la saisie de texte libre.
- toolbar : Définit l'élément contenant comme une collection de boutons ou de contrôles fréquemment utilisés.
- tooltip : Une bulle de texte contextuelle qui affiche une description pour un élément.
Rôles composites
- grid : Pour un widget contenant une ou plusieurs rangées de cellules.
- listbox : Utilisé pour les listes à partir desquelles un utilisateur peut sélectionner un ou plusieurs éléments.
- menu : Un type de widget composite qui offre une liste de choix à l'utilisateur.
- menubar : Une présentation de menu qui reste généralement visible.
- radiogroup : Un groupe de boutons radio.
- tablist : Identifie l'élément qui sert de conteneur pour un ensemble d'onglets.
- tree : Un widget permettant à l'utilisateur de sélectionner un ou plusieurs éléments dans une collection organisée hiérarchiquement.
- treegrid : Identifie un élément comme étant une grille dont les lignes peuvent être développées et réduites.
Rôles de structure de document
- cell : Identifie un élément comme étant une cellule dans un conteneur tabulaire.
- columnheader : Identifie un élément comme étant une cellule contenant des informations d'en-tête pour une colonne.
- row : Une rangée de cellules dans une structure tabulaire.
- rowgroup : Un groupe de rangées dans une structure tabulaire.
- rowheader : Une cellule contenant des informations d'en-tête pour une rangée.
- table : Identifie l'élément comme ayant une structure de tableau non interactive.
Rôles de repère
- banner : Pour définir l'en-tête global d'un site.
- complementary : Désigne une section de support liée au contenu principal.
- contentinfo : Définit un pied de page contenant des informations d'identification.
- form : Identifie un groupe d'éléments fournissant une fonctionnalité équivalente à un formulaire HTML.
- main : Indique le contenu principal d'un document.
- navigation : Identifie les groupes principaux de liens utilisés pour la navigation.
- region : Identifie les zones du document jugées importantes par l'auteur.
- search : Identifie la fonctionnalité de recherche.
Rôles de région dynamique
- alert : Pour les informations importantes et généralement urgentes.
- log : Identifie un élément qui crée une région dynamique où de nouvelles informations sont ajoutées.
- marquee : Pour une région dynamique contenant des informations non essentielles qui changent fréquemment.
- status : Définit une région dynamique contenant des informations consultatives pour l'utilisateur.
- timer : Indique un compteur numérique listant le temps écoulé ou restant.
Rôles abstraits
- command : Définit un widget qui effectue une action mais ne reçoit pas de données d'entrée.
- composite : Indique un widget qui peut contenir des descendants navigables ou des enfants possédés.
- input : Un rôle générique pour les widgets permettant la saisie utilisateur.
- landmark : Un sous-section importante d'une page.
- range : Un rôle générique représentant une plage de valeurs.
- roletype : Le rôle de base dont tous les autres rôles ARIA héritent.
- section : Un rôle superclasse pour les composants de confinement structurel rendables.
- sectionhead : Un rôle superclasse pour les étiquettes ou résumés du sujet de sa section associée.
- select : Un rôle superclasse pour les widgets de formulaire permettant à l'utilisateur de faire des sélections.
- structure : Pour les éléments structurels du document.
- widget : Un composant interactif d'une interface graphique utilisateur.
- window : Définit une fenêtre de navigateur ou d'application.
Détails de role important en ARIA
role="banner"
Utilisation : Pour identifier l'en-tête principal d'une page, généralement contenant le logo et la navigation principale.
Quand l'utiliser : Sur l'élément <header> principal de la page. Ne pas utiliser sur des en-têtes de sections.
role="main"
Utilisation : Identifie le contenu principal de la page.
Quand l'utiliser : Sur l'élément <main> ou sur le conteneur principal du contenu. Une seule utilisation par page.
role="navigation"
Utilisation : Pour les sections contenant des liens de navigation.
Quand l'utiliser : Sur les éléments <nav> ou les conteneurs de menus de navigation.
role="complementary"
Utilisation : Pour du contenu qui complète le contenu principal mais reste significatif seul.
Quand l'utiliser : Typiquement sur les <aside> ou les barres latérales.
role="contentinfo"
Utilisation : Pour les informations sur le document (droits d'auteur, liens connexes).
Quand l'utiliser : Généralement sur le <footer> principal de la page.
Rôles de structure de contenu
role="article"
Utilisation : Pour un contenu autonome et indépendant.
Quand l'utiliser : Sur les éléments <article> ou pour des sections de contenu pouvant être distribuées indépendamment.
role="section"
Utilisation : Pour grouper du contenu thématique.
Quand l'utiliser : Sur les éléments <section> ou pour diviser le contenu en parties distinctes.
role="list" et role="listitem"
Utilisation : Pour identifier une liste et ses éléments.
Quand l'utiliser : Uniquement si vous ne pouvez pas utiliser les balises <ul>, <ol> et <li> natives.
Rôles interactifs
role="button"
Utilisation : Pour les éléments cliquables qui déclenchent une action.
Quand l'utiliser : Sur des éléments non-boutons (comme <div> ou <span>) stylisés en boutons. Préférer la balise <button> native quand possible.
role="link"
Utilisation : Pour les éléments cliquables qui mènent à une autre page ou ressource.
Quand l'utiliser : Sur des éléments non-liens stylisés en liens. Préférer la balise <a> native quand possible.
role="checkbox" et role="radio"
Utilisation : Pour les éléments de formulaire à cocher ou les boutons radio.
Quand l'utiliser : Sur des éléments personnalisés remplaçant les <input type="checkbox"> ou <input type="radio"> natifs.
role="tablist", role="tab", et role="tabpanel"
Utilisation : Pour créer une interface à onglets.
Quand l'utiliser : Sur les conteneurs d'onglets, les onglets individuels et les panneaux de contenu associés.
Rôles de structure de données
role="table", role="row", role="cell"
Utilisation : Pour structurer des données tabulaires.
Quand l'utiliser : Uniquement si vous ne pouvez pas utiliser les balises <table>, <tr>, <td> natives.
role="grid"
Utilisation : Pour des grilles de données interactives.
Quand l'utiliser : Sur des tableaux complexes avec fonctionnalités interactives (tri, filtrage, etc.).
Conseils généraux d'utilisation
- Utilisez toujours les éléments HTML sémantiques natifs quand ils sont disponibles.
- N'utilisez les rôles ARIA que lorsque la sémantique HTML native ne suffit pas.
- Assurez-vous que l'utilisation des rôles est cohérente avec le comportement et l'apparence de l'élément.
- Testez toujours l'accessibilité avec des lecteurs d'écran pour vérifier l'efficacité de vos rôles ARIA.