Accessibilité & WAI-ARIA
49 attributs documentés
WAI-ARIA (Web Accessibility Initiative – Accessible Rich Internet Applications) est une spécification du W3C qui définit des attributs supplémentaires pour améliorer l'accessibilité des interfaces web dynamiques et des widgets personnalisés. Ces attributs permettent aux technologies d'assistance (lecteurs d'écran, commandes vocales…) de comprendre et d'annoncer correctement des composants que le HTML seul ne peut pas décrire.
Règle fondamentale : utiliser ARIA en dernier recours. Un élément HTML sémantique natif (<button>, <nav>, <input>…) est toujours préférable à un <div> avec des attributs ARIA.
Rôles
L'attribut role définit la nature sémantique d'un élément pour les technologies d'assistance — composant d'interface, région de la page, structure de document…
États de widget
Ces attributs décrivent l'état dynamique d'un composant interactif — coché, développé, sélectionné, désactivé…
-
aria-checkedIndique l'état coché d'un élément à deux ou trois états (case à cocher, bouton radio, commutateur). -
aria-currentIndique l'élément qui représente l'état courant dans un ensemble de navigation ou de progression (page active, étape actuelle, date du jour...). -
aria-disabledIndique qu'un élément est perçu comme désactivé, sans le retirer de l'arbre d'accessibilité ni de l'ordre de tabulation. -
aria-errormessageIdentifie l'élément qui contient le message d'erreur pour un champ dont la valeur est invalide. -
aria-expandedIndique si un élément de contrôle est actuellement développé (ouvert) ou réduit (fermé). -
aria-haspopupIndique qu'un élément peut déclencher l'ouverture d'un popup, et précise le type de ce popup. -
aria-hiddenMasque un élément et ses descendants de l'arbre d'accessibilité, les rendant invisibles aux technologies d'assistance. -
aria-invalidIndique qu'une valeur saisie ne satisfait pas au format attendu ou aux contraintes de validation. -
aria-modalIndique qu'une boîte de dialogue ou une fenêtre est modale — le contenu en arrière-plan doit être ignoré par les technologies d'assistance. -
aria-multilineIndique si un champ de saisie accepte plusieurs lignes de texte ou une seule ligne. -
aria-multiselectableIndique que l'utilisateur peut sélectionner plusieurs éléments dans un widget de liste ou de grille. -
aria-orientationIndique si l'orientation d'un widget est horizontale, verticale, ou indéfinie. -
aria-pressedIndique l'état enfoncé ou non d'un bouton bascule (toggle button). -
aria-readonlyIndique qu'un élément de saisie est en lecture seule — sa valeur est visible et copiable, mais ne peut pas être modifiée. -
aria-requiredIndique qu'une valeur doit être saisie dans un champ de formulaire avant de pouvoir le soumettre. -
aria-selectedIndique si un élément sélectionnable est actuellement sélectionné dans un widget multi-sélection ou à sélection unique. -
aria-sortIndique si les éléments d'une colonne ou d'une ligne de tableau sont triés, et dans quel ordre.
Propriétés de widget
Ces attributs décrivent les caractéristiques stables d'un composant — son libellé, ses valeurs min/max, son niveau hiérarchique…
-
aria-autocompleteIndique si la saisie dans un champ peut déclencher des suggestions d'autocomplétion, et comment elles sont présentées. -
aria-keyshortcutsIndique les raccourcis clavier qui permettent d'activer ou de déplacer le focus sur l'élément. -
aria-labelFournit un libellé textuel accessible à un élément lorsqu'aucun libellé visible n'est présent dans le DOM. -
aria-levelDéfinit le niveau hiérarchique d'un élément dans une structure de titres ou d'arborescence. -
aria-placeholderFournit un texte d'indication court pour guider la saisie dans un widget de texte personnalisé, affiché en l'absence de valeur. -
aria-roledescriptionFournit un nom lisible par l'humain pour le rôle d'un élément, remplaçant le nom de rôle ARIA par défaut annoncé par les technologies d'assistance. -
aria-valuemaxDéfinit la valeur maximale autorisée pour un widget de plage ou de progression. -
aria-valueminDéfinit la valeur minimale autorisée pour un widget de plage ou de progression. -
aria-valuenowIndique la valeur numérique courante d'un widget de plage, de progression ou de compteur. -
aria-valuetextFournit un texte alternatif lisible par l'humain pour la valeur numérique courante d'un widget de plage.
Régions live
Ces attributs contrôlent la façon dont les mises à jour dynamiques du DOM sont annoncées par les lecteurs d'écran.
-
aria-atomicIndique si les technologies d'assistance doivent annoncer l'intégralité d'une région live modifiée, ou seulement la partie qui a changé. -
aria-busyIndique qu'une région est en cours de mise à jour et que les technologies d'assistance doivent attendre la fin du chargement avant d'annoncer les changements. -
aria-liveIndique qu'une région de la page se met à jour dynamiquement et définit l'urgence avec laquelle les technologies d'assistance doivent annoncer ces mises à jour. -
aria-relevantDéfinit quels types de changements dans une région live doivent être annoncés par les technologies d'assistance.
Relations
Ces attributs établissent des liens entre éléments — libellés, descriptions, contrôles, positions dans des tableaux virtualisés…
-
aria-activedescendantIdentifie l'élément descendant actuellement actif dans un widget composite qui conserve le focus sur l'élément parent. -
aria-colcountDéfinit le nombre total de colonnes d'un tableau ou d'une grille, lorsque toutes les colonnes ne sont pas présentes dans le DOM. -
aria-colindexIndique la position de colonne d'une cellule dans un tableau ou une grille dont toutes les colonnes ne sont pas rendues dans le DOM. -
aria-colspanDéfinit le nombre de colonnes que couvre une cellule dans un tableau ou une grille. -
aria-controlsIdentifie l'élément (ou les éléments) dont le contenu ou l'affichage est contrôlé par l'élément courant. -
aria-describedbyIdentifie l'élément (ou les éléments) qui fournit une description complémentaire à l'élément courant. -
aria-descriptionFournit une description textuelle accessible à un élément, comme alternative inline à aria-describedby. -
aria-detailsRéférence un élément qui fournit des informations détaillées sur l'élément courant, sous une forme plus riche qu'un simple texte. -
aria-flowtoIndique le prochain élément dans l'ordre de lecture alternatif, permettant aux utilisateurs de AT de suivre un flux de lecture non linéaire. -
aria-labelledbyIdentifie l'élément (ou les éléments) qui sert de libellé à l'élément courant en référençant son identifiant. -
aria-ownsÉtablit une relation de parenté entre l'élément courant et un ou plusieurs éléments qui ne sont pas ses descendants directs dans le DOM. -
aria-posinsetIndique la position numérique d'un élément dans un ensemble, lorsque l'ensemble n'est pas entièrement rendu dans le DOM. -
aria-rowcountDéfinit le nombre total de lignes d'un tableau ou d'une grille, lorsque toutes les lignes ne sont pas présentes dans le DOM. -
aria-rowindexIndique la position de ligne d'une cellule dans un tableau ou une grille dont toutes les lignes ne sont pas rendues dans le DOM. -
aria-rowspanDéfinit le nombre de lignes que couvre une cellule dans un tableau ou une grille. -
aria-setsizeIndique le nombre total d'éléments dans un ensemble, lorsque l'ensemble n'est pas entièrement rendu dans le DOM.
Les 5 règles d'ARIA
- Ne pas utiliser ARIA si un élément HTML natif fait le travail.
<button>plutôt que<div role="button">. - Ne pas changer la sémantique native d'un élément.
Ne pas ajouter
role="heading"sur un<button>. - Tout widget interactif ARIA doit être utilisable au clavier.
Un
role="slider"doit répondre aux touches fléchées. - Ne pas masquer d'éléments focusables avec
aria-hidden="true". Cela piège les utilisateurs de clavier dans un contenu silencieux. - Tout élément interactif doit avoir un nom accessible.
Via
aria-label,aria-labelledby, ou un contenu textuel visible.