États et propriétés ARIA (attributs)

Cette page constitue un index des pages de référence couvrant l'ensemble des attributsWAI-ARIA sur MDN.

Les attributs ARIA permettent de modifier les états et les propriétés d'un élément dans l'arbre d'accessibilité.

Note :ARIA modifie uniquement l'arbre d'accessibilité, modifiant ainsi la façon dont les outils d'assistance présentent le contenu aux personnes qui les utilisent. ARIA ne modifie en rien les fonctionnalités ou le comportement d'un élément. Lorsqu'on utilise des éléments HTML en dehors de leur sémantique et de leurs fonctionnalités prévues, il faudra utiliser JavaScript pour gérer le comportement, le focus et les états ARIA.

Types d'attribut ARIA

Il existe 4 catégories d'états et de propriétés ARIA :

Attributs de régions dynamiques

Certains états et propriétés s'appliquent à l'ensemble des éléments HTML, qu'un rôle AIRA soit appliqué ou non. Ils sont définis comme des attributs « universels ». Les états et propriétés universels sont pris en charge par tous les rôles et tous les éléments de balisage de base.

La plupart des attributs listés avant sont universels, ce qui signifie qu'on peut les inclure sur n'importe quel élément, à moins qu'ils soient explicitement interdits :

Tous les attributs de cette liste sont universels et seules les propriétésaria-label etaria-labelledby ne sont pas autorisées sur les éléments dont le rôle vautpresentation) ou le rôle synonymenone).

États et propriétés définis sur MDN

Les pages suivantes sont les pages de référence qui couvrent les états et propriétésWAI-ARIA sur MDN.

ARIA : attribut aria-activedescendant: L'attributaria-activedescendant identifie l'élément actuellement actif lorsque la sélection est sur un widgetcomposite, unecombobox, unetextbox, ungroup ou uneapplication.
ARIA : attribut aria-atomic: Dans les régions dynamiques ARIA, l'attribut globalaria-atomic indique si les technologies d'assistance, comme les lecteurs d'écran, présenteront l'ensemble ou seulement une partie de la région modifiée, selon les notifications de changement définies par l'attributaria-relevant.
ARIA : attribut aria-autocomplete: L'attributaria-autocomplete indique si la saisie de texte peut déclencher l'affichage d'une ou plusieurs suggestions de la valeur souhaitée par l'utilisateur·ice pour une boîte combinéecombobox, une zone de recherchesearchbox ou une zone de saisietextbox, et précise comment ces suggestions seront présentées si elles existent.
ARIA : attribut aria-braillelabel: La propriété globalearia-braillelabel définit une valeur de chaîne de caractères qui étiquette l'élément actuel, qui est destiné à être converti en braille.
ARIA : attribut aria-brailleroledescription: L'attribut globalaria-brailleroledescription définit une description abrégée, lisible par un·e humain·e et localisée par l'auteur·ice, du rôle d'un élément, destinée à être convertie en braille.
ARIA : attribut aria-busy: L'attributaria-busy est un état ARIA global qui indique si un élément est en cours de modification.Il aide les technologies d'assistance à comprendre que les changements apportés au contenu ne sont pas encore terminés, et qu'elles doivent attendre avant d'informer l'utilisateur·ice de la mise à jour.Siaria-busy est couramment utilisé dans lesrégions ARIA dynamiques pour retarder les annonces jusqu'à la fin des mises à jour, il peut aussi être utilisé en dehors de ces régions : par exemple, dans des widgets ou des fils d'actualités, pour signaler des modifications en cours ou un chargement.
ARIA : attribut aria-checked: L'attributaria-checked indique l'état actuel (« sélectionné » ou non) des cases à cocher, boutons radio et autres widgets.
ARIA : attribut aria-colcount: L'attributaria-colcount définit le nombre total de colonnes dans un tableau (table), une grille (grid) ou une grille arborescente (treegrid) lorsque toutes les colonnes ne sont pas présentes dans leDOM.
ARIA : attribut aria-colindex: L'attributaria-colindex définit l'indice ou la position de colonne d'un élément par rapport au nombre total de colonnes dans untable,grid outreegrid.
ARIA : attribut aria-colindextext: L'attributaria-colindextext définit une alternative textuelle lisible par humain·e à la valeur numérique dearia-colindex.
ARIA : attribut aria-colspan: L'attributaria-colspan définit le nombre de colonnes occupées par une cellule ou une cellule de grille (gridcell) dans un tableau (table), une grille (grid) ou une grille arborescente (treegrid).
ARIA : attribut aria-controls: L'attribut globalaria-controls identifie l'élément (ou les éléments) dont le contenu ou la présence est contrôlé·e par l'élément sur lequel cet attribut est défini.
ARIA : attribut aria-current: L'attribut d'étataria-current non nul sur un élément indique que cet élément représente l'élément courant au sein d'un conteneur ou d'un ensemble d'éléments liés.
ARIA : attribut aria-describedby: L'attribut globalaria-describedby identifie l'élément (ou les éléments) qui décrivent l'élément sur lequel l'attribut est défini.
ARIA : attribut aria-description: L'attribut globalaria-description définit une valeur textuelle qui décrit ou annote l'élément courant.
ARIA : attribut aria-details: L'attribut globalaria-details identifie l'élément (ou les éléments) qui fournissent des informations supplémentaires liées à l'objet.
ARIA : attribut aria-disabled: L'étataria-disabled indique que l'élément est perceptible mais désactivé, donc non modifiable ni utilisable.
ARIA : attribut aria-dropeffect: L'attribut globalaria-dropeffect indique quelles fonctions peuvent être réalisées lorsqu'un objet déplacé est relâché sur la cible de dépôt.
ARIA : attribut aria-errormessage: L'attributaria-errormessage sur un objet identifie le ou les éléments qui fournissent un message d'erreur pour cet objet.
ARIA : attribut aria-expanded: L'attributaria-expanded est défini sur un élément pour indiquer si un contrôle est développé ou réduit, et si les éléments contrôlés sont affichés ou masqués.
ARIA : attribut aria-flowto: L'attribut globalaria-flowto identifie le ou les éléments suivants dans un ordre de lecture alternatif du contenu. Cela permet aux technologies d'assistance de remplacer, à la demande de l'utilisateur·ice, l'ordre de lecture par défaut du document (l'ordre source).
ARIA : attribut aria-grabbed: L'attributaria-grabbed indique l'état de « saisi » d'un élément lors d'une opération de glisser-déposer.
ARIA : attribut aria-haspopup: L'attributaria-haspopup indique la disponibilité et le type d'élément contextuel interactif pouvant être déclenché par l'élément sur lequel l'attribut est défini.
ARIA : attribut aria-hidden: L'attributaria-hidden indique un état d'élément déterminant s'il est exposé à une API d'accessibilité.
ARIA : attribut aria-invalid: L'attributaria-invalid indique l'état de la valeur saisie comme ne correspondant pas au format attendu par l'application.
ARIA : attribut aria-keyshortcuts: L'attribut globalaria-keyshortcuts indique les raccourcis clavier qu'un·e auteur·ice a mis en place pour activer ou donner la sélection à un élément.
ARIA : attribut aria-label: L'attributaria-label définit une chaîne de caractères qui peut servir à nommer un élément, tant que le rôle de l'élément n'interdit pas la nomination.
ARIA : attribut aria-labelledby: L'attributaria-labelledby identifie l'élément (ou les éléments) qui servent de libellé à l'élément sur lequel il est appliqué.
ARIA : attribut aria-level: L'attributaria-level définit le niveau hiérarchique d'un élément au sein d'une structure.
ARIA : attribut aria-live: L'attribut globalaria-live indique qu'un élément sera mis à jour et décrit le type de mises à jour que les agents utilisateurs, les technologies d'assistance et les utilisateur·ice·s peuvent attendre de la région dynamique.
ARIA : attribut aria-modal: L'attributaria-modal indique si un élément est modal lorsqu'il est affiché.
ARIA : attribut aria-multiline: L'attributaria-multiline indique si unetextbox accepte plusieurs lignes de saisie ou seulement une.
ARIA : attribut aria-multiselectable: L'attributaria-multiselectable indique que l'utilisateur·ice peut sélectionner plusieurs éléments parmi les descendants sélectionnables.
ARIA : attribut aria-orientation: L'attributaria-orientation indique si l'orientation d'un élément est horizontale, verticale ou inconnue/ambiguë.
ARIA : attribut aria-owns: L'attributaria-owns identifie un ou plusieurs éléments afin de définir une relation visuelle, fonctionnelle ou contextuelle entre un parent et ses éléments enfants lorsque la hiérarchie DOM ne peut pas être utilisée pour représenter cette relation.
ARIA : attribut aria-placeholder: L'attributaria-placeholder définit une courte indication (un mot ou une phrase brève) destinée à aider l'utilisateur·ice lors de la saisie de données quand un contrôle de formulaire n'a pas de valeur. L'indication peut être une valeur d'exemple ou une brève description du format attendu.
ARIA : attribut aria-posinset: L'attributaria-posinset définit le numéro ou la position d'un élément dans l'ensemble courant des éléments de liste (listitem) ou d'arbre (treeitem) lorsque tous les éléments ne sont pas présents dans le DOM.
ARIA : attribut aria-pressed: L'attributaria-pressed indique l'état « enfoncé » actuel d'un bouton à bascule.
ARIA : attribut aria-readonly: L'attributaria-readonly indique que l'élément n'est pas modifiable, mais reste utilisable.
ARIA : attribut aria-relevant: Utilisé dans les régions ARIA dynamiques, l'attribut globalaria-relevant indique quelles notifications l'agent utilisateur va déclencher lorsque l'arbre d'accessibilité d'une région dynamique est modifié.
ARIA : attribut aria-required: L'attributaria-required indique qu'une saisie de l'utilisatrice ou de l'utilisateur est requise pour cet élément avant qu'un formulaire puisse être envoyé.
ARIA : attribut aria-roledescription: L'attributaria-roledescription définit une description du rôle d'un élément, lisible par l'humain et localisée par l'auteur·ice.
ARIA : attribut aria-rowcount: L'attributaria-rowcount définit le nombre total de lignes dans un tableau, une grille ou une arborescence de grille.
ARIA : attribut aria-rowindex: L'attributaria-rowindex définit la position d'un élément par rapport au nombre total de lignes dans un tableau, une grille ou une arborescence de grille.
ARIA : attribut aria-rowindextext: L'attributaria-rowindextext définit une alternative textuelle lisible par l'humain pouraria-rowindex.
ARIA : attribut aria-rowspan: L'attributaria-rowspan définit le nombre de lignes sur lesquelles une cellule ou une cellule de grille s'étend dans un tableau, une grille ou une arborescence de grille.
ARIA : attribut aria-selected: L'attributaria-selected indique l'état « sélectionné » actuel de divers widgets.
ARIA : attribut aria-setsize: L'attributaria-setsize définit le nombre d'éléments dans l'ensemble courant d'éléments de liste (listitem) ou d'arbre (treeitem) lorsque tous les éléments de l'ensemble ne sont pas présents dans le DOM.
ARIA : attribut aria-sort: L'attributaria-sort indique si les éléments d'un tableau ou d'une grille sont triés par ordre croissant ou décroissant.
ARIA : attribut aria-valuemax: L'attributaria-valuemax définit la valeur maximale autorisée pour un composant de type plage.
ARIA : attribut aria-valuemin: L'attributaria-valuemin définit la valeur minimale autorisée pour un composant de type plage.
ARIA : attribut aria-valuenow: L'attributaria-valuenow définit la valeur actuelle pour un composant de type plage (range).
ARIA : attribut aria-valuetext: L'attributaria-valuetext définit l'alternative textuelle compréhensible par l'humain dearia-valuenow pour un composant de type plage.