Cette page a été traduite à partir de l'anglais par la communauté. Vous pouvez contribuer en rejoignant la communauté francophone sur MDN Web Docs.

View in English Always switch to English

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

Cette page constitue un index des pages de référence couvrant l'ensemble des attributs WAI-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 widgets

Attributs de régions dynamiques

Attributs de glisser-déposer

Attributs de relation

Attributs ARIA universels

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és aria-label et aria-labelledby ne sont pas autorisées sur les éléments dont le rôle vaut presentation) ou le rôle synonyme none).

É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és WAI-ARIA sur MDN.

ARIA : attribut aria-activedescendant

L'attribut aria-activedescendant identifie l'élément actuellement actif lorsque la sélection est sur un widget composite, une combobox, une textbox, un group ou une application.

ARIA : attribut aria-atomic

Dans les régions dynamiques ARIA, l'attribut global aria-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'attribut aria-relevant.

ARIA : attribut aria-autocomplete

L'attribut aria-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ée combobox, une zone de recherche searchbox ou une zone de saisie textbox, et précise comment ces suggestions seront présentées si elles existent.

ARIA : attribut aria-braillelabel

La propriété globale aria-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 global aria-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'attribut aria-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. Si aria-busy est couramment utilisé dans les ré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'attribut aria-checked indique l'état actuel (« sélectionné » ou non) des cases à cocher, boutons radio et autres widgets.

ARIA : attribut aria-colcount

L'attribut aria-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 le DOM.

ARIA : attribut aria-colindex

L'attribut aria-colindex définit l'indice ou la position de colonne d'un élément par rapport au nombre total de colonnes dans un table, grid ou treegrid.

ARIA : attribut aria-colindextext

L'attribut aria-colindextext définit une alternative textuelle lisible par humain·e à la valeur numérique de aria-colindex.

ARIA : attribut aria-colspan

L'attribut aria-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 global aria-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'état aria-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 global aria-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 global aria-description définit une valeur textuelle qui décrit ou annote l'élément courant.

ARIA : attribut aria-details

L'attribut global aria-details identifie l'élément (ou les éléments) qui fournissent des informations supplémentaires liées à l'objet.

ARIA : attribut aria-disabled

L'état aria-disabled indique que l'élément est perceptible mais désactivé, donc non modifiable ni utilisable.

ARIA : attribut aria-dropeffect

L'attribut global aria-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'attribut aria-errormessage sur un objet identifie le ou les éléments qui fournissent un message d'erreur pour cet objet.

ARIA : attribut aria-expanded

L'attribut aria-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 global aria-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'attribut aria-grabbed indique l'état de « saisi » d'un élément lors d'une opération de glisser-déposer.

ARIA : attribut aria-haspopup

L'attribut aria-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'attribut aria-hidden indique un état d'élément déterminant s'il est exposé à une API d'accessibilité.

ARIA : attribut aria-invalid

L'attribut aria-invalid indique l'état de la valeur saisie comme ne correspondant pas au format attendu par l'application.

ARIA : attribut aria-keyshortcuts

L'attribut global aria-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'attribut aria-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'attribut aria-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'attribut aria-level définit le niveau hiérarchique d'un élément au sein d'une structure.

ARIA : attribut aria-live

L'attribut global aria-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'attribut aria-modal indique si un élément est modal lorsqu'il est affiché.

ARIA : attribut aria-multiline

L'attribut aria-multiline indique si une textbox accepte plusieurs lignes de saisie ou seulement une.

ARIA : attribut aria-multiselectable

L'attribut aria-multiselectable indique que l'utilisateur·ice peut sélectionner plusieurs éléments parmi les descendants sélectionnables.

ARIA : attribut aria-orientation

L'attribut aria-orientation indique si l'orientation d'un élément est horizontale, verticale ou inconnue/ambiguë.

ARIA : attribut aria-owns

L'attribut aria-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'attribut aria-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'attribut aria-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'attribut aria-pressed indique l'état « enfoncé » actuel d'un bouton à bascule.

ARIA : attribut aria-readonly

L'attribut aria-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 global aria-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'attribut aria-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'attribut aria-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'attribut aria-rowcount définit le nombre total de lignes dans un tableau, une grille ou une arborescence de grille.

ARIA : attribut aria-rowindex

L'attribut aria-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'attribut aria-rowindextext définit une alternative textuelle lisible par l'humain pour aria-rowindex.

ARIA : attribut aria-rowspan

L'attribut aria-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'attribut aria-selected indique l'état « sélectionné » actuel de divers widgets.

ARIA : attribut aria-setsize

L'attribut aria-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'attribut aria-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'attribut aria-valuemax définit la valeur maximale autorisée pour un composant de type plage.

ARIA : attribut aria-valuemin

L'attribut aria-valuemin définit la valeur minimale autorisée pour un composant de type plage.

ARIA : attribut aria-valuenow

L'attribut aria-valuenow définit la valeur actuelle pour un composant de type plage (range).

ARIA : attribut aria-valuetext

L'attribut aria-valuetext définit l'alternative textuelle compréhensible par l'humain de aria-valuenow pour un composant de type plage.

Voir aussi