Rôles, états et propriétés ARIA

Région live qui transmet un message urgent et temporellement sensible. Les lecteurs d'écran l'annoncent immédiatement en interrompant la parole en cours. À utiliser avec parcimonie — réservez aux vraies erreurs et avertissements ; l'abus provoque une fatigue des technologies d'assistance.

Boîte de dialogue qui transmet un message urgent et exige une réponse de l'utilisateur. Combine la sémantique dialog avec l'annonce alert. À utiliser uniquement pour les confirmations destructives, les erreurs bloquantes ou les interruptions qui ne peuvent attendre.

Marque une composition autonome pouvant se suffire à elle-même — un billet de blog, un article d'actualité, une réponse de forum ou une fiche produit. Utilisez l'élément natif <article> en priorité ; recourez à role="article" uniquement si vous ne pouvez pas utiliser l'élément HTML.

HTML natif : <article>

Point de repère d'en-tête du site — contient généralement le logo, la navigation principale et la recherche. L'élément <header> de niveau supérieur porte ce rôle automatiquement. Un seul banner par page.

HTML natif : <header> (top-level)

Marque un élément comme bouton — un contrôle qui déclenche une action à l'activation. Préférez toujours l'élément natif <button> ; n'utilisez role="button" sur un <div> ou <span> que lorsque l'élément natif est impossible.

HTML natif : <button>

Marque un élément comme case à cocher à deux ou trois états. Préférez <input type="checkbox"> ; n'utilisez role="checkbox" que si l'élément natif est impossible — par exemple pour un contrôle tri-état devant afficher une valeur mixte.

HTML natif : <input type="checkbox">

Marque un champ texte associé à une liste contextuelle de valeurs — utilisé pour la saisie automatique, la recherche par anticipation et les selects personnalisés. Le natif <select> gère la sélection simple ; n'utilisez role="combobox" que pour le filtrage, le rendu personnalisé ou les suggestions distantes.

HTML natif : <select>

Un landmark pour le contenu qui soutient le contenu principal tout en étant signifiant de façon autonome — barres latérales, encadrés d'articles liés, renvois complémentaires. L'élément <aside> porte ce rôle lorsqu'il est au niveau supérieur.

HTML natif : <aside>

Le landmark pied de page du site — droits d'auteur, contact, liens légaux. L'élément <footer> de niveau supérieur porte ce rôle automatiquement. Un seul contentinfo par page.

HTML natif : <footer> (top-level)

Marque un élément comme la définition d'un terme. À associer avec role="term" (ou le natif <dfn>) pour lier le terme à sa définition. Préférez d'abord <dl>/<dt>/<dd> ou <dfn> — ils portent la sémantique nativement.

HTML natif : <dfn>

Marque un conteneur comme une boîte de dialogue modale ou non modale. Utilisez l'élément natif <dialog> avec showModal() — il gère nativement le piège de focus, le top-layer, le backdrop et la fermeture via Échap. Recourez à role="dialog" uniquement quand l'élément natif est impossible.

HTML natif : <dialog>

Marque un bloc illustratif autonome — image, diagramme, listing de code — généralement associé à une légende. Utilisez d'abord l'élément natif <figure> ; recourez à role="figure" uniquement quand l'élément hôte ne peut pas être un <figure>.

HTML natif : <figure>

Un landmark pour un formulaire — un ensemble de contrôles de saisie qui soumettent des données. Un élément <form> est exposé comme landmark de formulaire UNIQUEMENT s'il possède un nom accessible. Sans nom, c'est simplement un formulaire, pas un landmark.

HTML natif : <form aria-label>

Marque un regroupement générique d'éléments liés. Moins lourd sémantiquement qu'un landmark — les lecteurs d'écran n'annoncent pas les groupes dans le menu des landmarks. Utilisez <fieldset> + <legend> pour les contrôles de formulaire groupés ; recourez à role="group" pour les regroupements non-formulaires.

HTML natif : <fieldset>

Marque un élément comme titre. Utilisez d'abord <h1>–<h6> — ils portent la bonne sémantique et un niveau correct sans effort supplémentaire. N'utilisez role="heading" que lorsque vous devez promouvoir un élément qui ne peut pas être un <h*>.

HTML natif : <h1> – <h6>

Marque un élément comme hyperlien — un contrôle qui navigue vers une nouvelle ressource lorsqu'il est activé. Utilisez d'abord l'élément HTML natif <a href> ; n'utilisez role="link" sur un <span> ou un <div> que lorsqu'il est impossible d'utiliser l'élément natif.

HTML natif : <a href>

Marque un élément comme liste d'items. Préférez <ul>, <ol> ou <dl> — l'élément natif gère le rôle, le comptage et le marqueur visuel. Recourez à role="list" uniquement si CSS list-style: none déclenche la suppression du rôle liste par Safari.

HTML natif : <ul> / <ol>

Marque un élément comme liste d'options sélectionnables. Préférez <select> pour la sélection simple — il offre un sélecteur adapté au mobile et la prise en charge clavier complète. Recourez à role="listbox" pour un style personnalisé, une sélection multiple sur mesure ou un couplage avec une combobox.

HTML natif : <select> (single-select)

Marque un élément comme un item d'une liste. Utilisez <li> dans <ul> ou <ol> — l'élément natif porte le rôle et la position dans l'ensemble. Recourez à role="listitem" uniquement en association avec un role="list" explicite sur un parent non-liste.

HTML natif : <li>

Le point de repère du contenu principal — le contenu primaire de la page, à l'exclusion des en-têtes, navigations et pieds de page répétés. L'élément <main> porte ce rôle automatiquement. Exactement un main par page.

HTML natif : <main>

Marque un conteneur comme un menu applicatif — le popup de menus de style Fichier/Édition ou de menus contextuels. Il n'existe pas d'équivalent HTML. La liste de navigation d'un site n'est PAS un menu ; utilisez <nav> avec <ul> de liens à la place.

Marque un conteneur comme une barre de menus persistante — la bande horizontale toujours visible de menus de style Fichier/Édition/Affichage des applications de bureau. Distinct de menu, qui est un popup. Presque jamais le bon modèle sur le web.

Marque un élément comme un item actionnable dans un menu ou une menubar. Il n'existe pas d'équivalent HTML — les menus sont une construction ARIA uniquement. Utilisez ce rôle uniquement pour un vrai menu applicatif ; une liste de navigation ordinaire ne doit PAS utiliser menu/menuitem.

Repère regroupant un ensemble de liens de navigation — nav principale, fil d'Ariane, table des matières. L'élément <nav> porte ce rôle automatiquement. Plusieurs nav par page sont courants et acceptables, mais chacun doit avoir un nom accessible distinct.

HTML natif : <nav>

Marque un élément comme élément sélectionnable dans une listbox. Une option DOIT être descendante d'une listbox (directement ou via aria-owns). Utilisez <option> natif dans <select> ; recourez à role="option" uniquement pour une listbox personnalisée ou un popup de combobox.

HTML natif : <option>

Marque un élément comme indicateur de progression. Utilisez <progress> en premier — il fournit la sémantique, le visuel déterminé et les attributs de valeur nativement. Recourez à role="progressbar" uniquement lorsque vous devez styliser au-delà de ce que l'élément natif permet.

HTML natif : <progress>

Marque un élément comme option unique dans un groupe mutuellement exclusif. Un radio DOIT se trouver dans un radiogroup (ou un fieldset natif). Utilisez <input type="radio"> en premier ; recourez à role="radio" uniquement lorsque l'élément natif est impossible.

HTML natif : <input type="radio">

Landmark générique pour le contenu qui ne correspond pas à banner, main, navigation, complementary ou contentinfo — mais qui est suffisamment important pour y accéder par navigation. Un <section> devient un landmark region uniquement lorsqu'il possède un nom accessible.

HTML natif : <section aria-label>

Landmark regroupant un formulaire de recherche. Permet aux utilisateurs de lecteur d'écran d'accéder directement à la recherche du site. L'élément natif <search> (HTML 2024) porte ce rôle automatiquement ; utilisez role="search" sur un <form> pour une prise en charge plus large aujourd'hui.

HTML natif : <search>

Marque un élément comme champ de saisie de texte dédié à une recherche. Utilisez d'abord <input type="search"> — il offre le bouton d'effacement sur la plupart des navigateurs et la sémantique de recherche d'emblée. Réservez role="searchbox" aux champs de recherche contenteditable personnalisés.

HTML natif : <input type="search">

Marque un élément comme séparateur entre des sections de contenu ou des éléments dans un widget composite. Utilisez d'abord <hr> pour les ruptures thématiques dans la prose ; utilisez role="separator" pour séparer des éléments dans un menu, une barre d'outils ou un autre widget.

HTML natif : <hr>

Désigne un élément comme entrée permettant de sélectionner une valeur dans une plage. Préférez <input type="range"> natif ; n'utilisez role="slider" que pour les contrôles personnalisés impossibles en HTML natif, par exemple un sélecteur à deux curseurs.

HTML natif : <input type="range">

Région active qui transmet des informations consultatives non urgentes. Les lecteurs d'écran annoncent les changements poliment — à la prochaine pause de la parole, sans interrompre. Utilisez-le pour les confirmations de routine, les compteurs et les mises à jour de progression. L'élément natif <output> porte ce rôle.

HTML natif : <output>

Désigne un élément comme un interrupteur marche/arrêt. Fonctionnellement proche d'une case à cocher, mais annoncé comme « switch, activé » ou « switch, désactivé » plutôt que « coché » — mieux adapté à une bascule de réglage. Il n'existe pas encore d'équivalent HTML natif.

Désigne un élément comme un onglet dans une interface à onglets. Un onglet DOIT se trouver à l'intérieur d'un tablist et DEVRAIT référencer son tabpanel associé via aria-controls. Il n'existe pas d'élément HTML natif pour les onglets — c'est un modèle exclusivement ARIA.

Désigne un conteneur comme la barre d'onglets dans une interface à onglets. Contient des enfants role="tab". Les onglets et les tabpanels sont un modèle exclusivement ARIA — il n'existe pas de tablist HTML natif.

Désigne le panneau de contenu associé à un onglet. Chaque tabpanel est nommé par son onglet via aria-labelledby ; l'onglet référence le panneau via aria-controls. Affichez un seul panneau à la fois ; masquez les autres avec l'attribut hidden.

Désigne un élément comme une entrée de texte mono- ou multiligne. Préférez <input type="text"> ou <textarea> — ils gèrent tous les comportements de textbox gratuitement. N'utilisez role="textbox" que pour construire un éditeur de texte riche sur un élément contenteditable.

HTML natif : <input type="text"> / <textarea>

Marque un conteneur comme une barre d'outils — un ensemble de contrôles connexes (barre de mise en forme, rangée de boutons icônes). Réduit les arrêts de tabulation : 10 boutons ne forment qu'un seul arrêt, la navigation entre eux s'effectuant avec les touches fléchées.

Marque un élément comme conteneur hiérarchique de treeitems — explorateur de fichiers, catégories imbriquées ou organigramme. Un seul arrêt de tabulation, navigation par touches fléchées, expansion/réduction. Il n'existe pas d'équivalent HTML natif.

Marque un élément comme nœud d'une arborescence. Un treeitem peut être extensible (parent d'autres treeitems) ou terminal (feuille). À utiliser uniquement pour un navigateur hiérarchique — explorateur de fichiers, organigramme, catégories imbriquées — nécessitant une navigation par touches fléchées à arrêt unique.

Contrôle si les technologies d'assistance annoncent l'intégralité du contenu d'une région live lors d'une mise à jour ou seulement la partie modifiée. La valeur par défaut est "false" (seulement le diff). Définissez "true" lorsque le contexte n'a de sens que comme phrase complète.

Marque une région en cours de mise à jour afin que les technologies d'assistance suppriment les annonces intermédiaires. Définissez à "true" pendant le chargement ou lors de modifications DOM importantes ; repassez à "false" lorsque la région est stable.

Indique l'état coché actuel d'une case à cocher, d'un bouton radio ou d'un élément de menu de type case. Accepte "true", "false" ou "mixed". La case HTML native gère cela automatiquement — ne le définissez manuellement que sur des widgets personnalisés.

Marque l'élément représentant l'item courant dans un ensemble — la page active dans une navigation, l'étape en cours dans un assistant, aujourd'hui dans un sélecteur de date. Plus spécifique qu'aria-selected ; à utiliser sur les liens et les items où la sélection n'est pas la bonne métaphore.

Indique qu'un contrôle est perceptible et focusable mais ne répond pas aux actions de l'utilisateur. Préférez l'attribut HTML disabled natif quand il est disponible ; recourez à aria-disabled quand l'élément doit rester focusable ou pouvoir afficher une info-bulle.

Indique si un élément réductible — bouton de divulgation, combobox, menu, treeitem — est actuellement ouvert. Prend "true" ou "false". Généralement associé à aria-controls pointant vers la région que le contrôle ouvre.

Retire un élément et tous ses descendants de l'arbre d'accessibilité. Les utilisateurs voyants continuent de voir l'élément ; la technologie d'assistance n'y accède jamais. À réserver au contenu décoratif ; ne jamais appliquer à un contrôle pouvant recevoir le focus.

Indique qu'un contrôle de formulaire a échoué à la validation. À associer à aria-describedby pointant vers le message d'erreur lisible par l'humain, afin que le lecteur d'écran annonce à la fois l'état invalide et la raison.

Marque une région dont les mises à jour doivent être annoncées par la technologie d'assistance sans déplacer le focus. Choisissez "polite" dans la plupart des cas, "assertive" pour les mises à jour réellement urgentes. La région doit être dans le DOM dès le rendu initial.

Indique à la technologie d'assistance de traiter le reste de la page comme inerte lorsqu'une boîte de dialogue est ouverte. À définir sur "true" pour role="dialog" ou role="alertdialog". N'inactive pas réellement l'arrière-plan — à combiner avec l'attribut inert ou un piège de focus.

Indique si un bouton bascule est actuellement activé. Définissez "true" lorsque la bascule est activée, "false" lorsqu'elle est désactivée ; la technologie d'assistance annonce l'état avec l'étiquette.

Indique que la valeur d'un contrôle de formulaire ne peut pas être modifiée, mais que le contrôle reste opérable — il peut recevoir le focus, son contenu est copiable et la valeur est soumise avec le formulaire. Distinct de aria-disabled, qui rend le contrôle inopérable.

Indique qu'un élément à l'intérieur d'un conteneur à sélection simple ou multiple est actuellement sélectionné. Utilisé sur les rôles tab, option, gridcell, treeitem et similaires. Distinct de aria-checked (case à cocher/bouton radio) et aria-pressed (bouton bascule).

Sur un widget composite, pointe vers l'ID du descendant actif. Le focus DOM reste sur le conteneur tandis qu'un focus virtuel se déplace entre les enfants. Alternative au tabindex itinérant pour les listbox, combobox et grids.

Sur une zone de texte ou une combobox, déclare le type de complétion automatique offert — suggestions en ligne, liste d'options, les deux, ou aucune. Distinct de l'attribut HTML autocomplete qui concerne la sémantique du champ de formulaire pour le navigateur.

Désigne le ou les éléments dont la présence ou le contenu est régi par ce contrôle. Associations courantes : un onglet contrôle son tabpanel, un bouton de divulgation contrôle une région révélée. La prise en charge par les technologies d'assistance est inégale — à utiliser avec parcimonie.

Référence un ou plusieurs IDs d'éléments dont le texte devient la description étendue de cet élément. Annoncée après le nom accessible. À utiliser pour le texte d'aide, les indications de format et les messages d'erreur en ligne.

Indique à la technologie d'assistance qu'activer ce contrôle ouvrira une fenêtre surgissante, en précisant son type. Valeurs acceptées : "menu", "listbox", "tree", "grid", "dialog", "true" ou "false". À associer à aria-expanded pour que la technologie d'assistance annonce également l'état ouvert/fermé.

Fournit un nom accessible sous forme de chaîne de caractères lorsqu'aucun texte visible n'est disponible. À utiliser uniquement en l'absence de libellé à l'écran — si un texte visible existe, préférez aria-labelledby afin que le nom prononcé corresponde à ce que l'utilisateur voit.

Référence un ou plusieurs IDs d'éléments dont le texte visible devient le nom accessible de cet élément. Préférable à aria-label lorsqu'un texte affiché à l'écran décrit déjà le contrôle.

Indique le niveau hiérarchique d'un élément au sein d'une structure. Obligatoire sur les éléments avec role="heading" ; utilisé aussi sur role="treeitem" et role="listitem" dans des listes imbriquées. Valeur entière, à partir de 1.

Déclare une relation parent-enfant dans l'arbre d'accessibilité lorsque la structure DOM ne l'exprime pas. Réaffecte les éléments référencés comme enfants de l'élément courant pour les technologies d'assistance. Un outil puissant — facile à mal utiliser.

Position d'un élément dans un ensemble lorsque le DOM ne peut pas l'exprimer — notamment en cas de virtualisation, pagination ou filtrage. À toujours associer à aria-setsize pour que les lecteurs d'écran puissent annoncer « 3 sur 47 ».

Indique qu'une saisie utilisateur est obligatoire dans un contrôle avant de pouvoir soumettre le formulaire. Utilisez l'attribut HTML required sur les champs natifs ; recourez à aria-required uniquement en l'absence d'équivalent HTML — par exemple un combobox construit sur un div.

Nombre total d'éléments dans un ensemble lorsque le DOM ne les contient pas tous. S'associe à aria-posinset pour qu'un lecteur d'écran puisse annoncer « élément 14 sur 5 000 » même si seulement cinq sont rendus. Utilisez -1 si le total est inconnu.

Sur un en-tête de colonne ou de ligne dans une grille ou un tableau triable, indique le sens de tri actuel. Valeurs : "ascending", "descending", "other" ou "none". Un seul en-tête à la fois doit porter une valeur de tri active.

Valeur numérique courante d'un widget de type plage — slider, progressbar, spinbutton, scrollbar. À associer à aria-valuemin et aria-valuemax pour que la technologie d'assistance puisse annoncer une position significative. Utiliser aria-valuetext pour les libellés non numériques.