Attributs ARIA
WAI-ARIA : spécifications techniques pour l'accessibilité web
Les attributs ARIA (Accessible Rich Internet Applications) sont un ensemble d’attributs HTML destinés à améliorer l’accessibilité des applications web dynamiques, et en premier lieu des sites web. Ils permettent de combler certaines lacunes sémantiques en fournissant des informations indispensable aux utilisateurs de technologies d’assistance, telles que les lecteurs d’écran.
On distingue deux types d’attributs ARIA
- Les attributs d’état, qui ont une dimension dynamique en communiquant le statut d’un élément à un moment donné ;
- Les attributs de propriété, qui décrivent les caractéristiques d’un élément de manière statique.
Les attributs d'état (ARIA State Attributes)
Les valeurs des attributs d’état changent au cours de l’interaction de l’utilisateur avec l’interface. Ils répondent à la question : “Quel est l’état actuel de cet élément ?”.
Imaginez par exemple un bouton “ouvrir/fermer” pour un menu accordéon :
- Au début, le menu est fermé, et le bouton présente l’attribut aria-expanded=”false”.
- L’utilisateur clique sur le bouton, et le menu s’ouvre. La valeur de l’attribut change dynamiquement pour aria-expanded=”true”.
Gâce à ces informations, les lecteurs d’écran peuvent annoncer “Bouton, menu replié” ou “Bouton, menu déployé”, en fonction de la valeur de l’attribut : ce retour d’information est essentiel à l’utilisateur.
Je vous présente les WAI-ARIA d’état les plus courants.
Cet attribut indique l’état coché d’un élément. Il est crucial pour les éléments qui peuvent être cochés ou décochés, tels que les cases à cocher, les boutons radio ou même les éléments de menu.
aria-checked="true": L’élément est coché.aria-checked="false": L’élément n’est pas coché.aria-checked="mixed": L’élément représente un état mixte ou partiel, comme une case à cocher parente dans un arbre de sélection où seulement certaines options sont cochées.
Exemple de code HTML :
<ul role=”group” aria-label=”Liste d’options”>
<li role=”checkbox” aria-checked=”true” tabindex=”0″ style=”list-style: none; cursor: pointer; border: 1px solid black; padding: 5px; margin: 5px;”>
✅ Option sélectionnée
</li>
<li role=”checkbox” aria-checked=”false” tabindex=”0″ style=”list-style: none; cursor: pointer; border: 1px solid black; padding: 5px; margin: 5px;”>
⬜ Option non sélectionnée
</li>
</ul>
Cet attribut informe l’utilisateur que l’élément est désactivé et n’est pas interactif pour l’utilisateur. Il s’applique à des éléments comme les boutons, les champs de formulaire ou les liens pour indiquer qu’ils ne sont pas cliquables.
Exemple de code HTML
<p>
<a href=”#”
aria-disabled=”true”
style=”pointer-events: none; opacity: 0.5; cursor: default;”>
Lien désactivé (pour l’accessibilité et visuellement)
</a>
</p>
Dans cet exemple, le bouton de soumission et le lien vers les conditions introduit par “cliquez ici” sont désactivés.
Essentiel pour les interfaces de type accordéon, arborescence ou menu déroulant, cet attribut informe si un groupe d’éléments contrôlé par un autre élément est actuellement visible ou caché.
aria-expanded="true": Le contenu contrôlé est visible.aria-expanded="false": Le contenu contrôlé est masqué.
Exemple de code HTML :
<button aria-expanded=”false” aria-controls=”contenu1″>
Ma première section
</button>
<div id=”contenu1″ hidden>
<p>
Ceci est le contenu de la première section. Il est actuellement masqué.
</p>
</div>
<hr>
<button aria-expanded=”true” aria-controls=”contenu2″>
Ma seconde section
</button>
<div id=”contenu2″>
<p>
Ceci est le contenu de la secondesection. Il est actuellement visible.
</p>
</div>
Cet attribut indique aux technologies d’assistance qu’un élément et son contenu sont masqués et ne doivent pas être inclus dans l’arbre d’accessibilité. Il est utilisé pour les éléments décoratifs ou les contenus qui ne sont pas visibles pour l’utilisateur.
Cet attribut ARIA ne doit pas être utilisé sur des éléments interactifs ou des liens qui sont visibles à l’écran, car cela pourrait rendre l’interface inutilisable pour certains utilisateurs.
Exemple de code HTML :
<p>
Pour en savoir plus, veuillez vous référer à la section
<a href=”#”>
À propos
<span aria-hidden=”true”>ℹ️</span>
</a>
</p>
Utilisé pour indiquer qu’un champ de formulaire a une valeur qui n’est pas valide selon une validation de données. Il peut être utilisé en combinaison avec un message d’erreur visible pour l’utilisateur.
aria-invalid="true": La valeur du champ est invalide.aria-invalid="false": La valeur est valide.
Exemple de code HTML :
<label for=”email”>Adresse e-mail :</label>
<input type=”email” id=”email” name=”email” aria-invalid=”false”>
<br>
<label for=”phone”>Numéro de téléphone :</label>
<input type=”text” id=”phone” name=”phone” aria-invalid=”true” aria-errormessage=”phone-error”>
<p id=”phone-error” style=”color: red; margin-top: 5px;”>
⚠️ Veuillez entrer un numéro de téléphone valide.
</p>
L’attribut aria-multiselectable est un attribut d’état qui s’applique à des conteneurs d’éléments sélectionnables, comme une liste (role="listbox") ou une grille (role="grid"). Il n’est pas utilisé sur les éléments individuels, mais sur l’élément parent qui les contient.
aria-multiselectable="true": Indique aux technologies d’assistance que l’utilisateur peut sélectionner plus d’un élément dans la liste ou la grille. Ceci est crucial pour les utilisateurs de lecteurs d’écran, car cela leur permet de savoir qu’ils n’ont pas à se désélectionner pour choisir une autre option. Par exemple, une liste de fichiers où l’on peut cocher plusieurs cases pour les sélectionner tous.aria-multiselectable="false": Indique que seule une seule option peut être sélectionnée à la fois. C’est l’état par défaut si l’attribut est omis.
Exemple de code HTML :
<ul role=”listbox” aria-multiselectable=”true”>
<li role=”option” aria-selected=”false”>Option 1</li>
<li role=”option” aria-selected=”true”>Option 2</li>
<li role=”option” aria-selected=”false”>Option 3</li>
</ul>
Souvent utilisé sur des boutons bascules (comme un bouton de mise en sourdine ou de lecture), il indique si le bouton est dans son état “appuyé” ou “relâché”.
aria-pressed="true": Le bouton est enfoncé.aria-pressed="false": Le bouton est relâché.aria-pressed="mixed": L’état du bouton est mixte ou indéterminé.
Exemple de code HTML :
<button aria-pressed=”false”>
Activer le son (son actuellement coupé)
</button>
<button aria-pressed=”true”>
Couper le son (son actuellement présent)
</button>
Indique l’état de sélection d’un élément dans une liste de choix, comme un onglet dans un groupe d’onglets ou un élément dans un menu de sélection.
aria-selected="true": L’élément est actuellement sélectionné.aria-selected="false": L’élément n’est pas sélectionné.
Exemple de code HTML :
<ul role=”tablist”>
<li role=”tab” aria-selected=”true” tabindex=”0″>
Profil
</li>
<li role=”tab” aria-selected=”false” tabindex=”-1″>
Paramètres
</li>
<li role=”tab” aria-selected=”false” tabindex=”-1″>
Notifications
</li>
</ul>
Cet attribut est utilisé pour indiquer que l’élément représente l’élément courant au sein d’un ensemble. Par exemple, il peut être utilisé pour un lien de page dans une pagination ou une section de navigation.
aria-current="page": L’élément est le lien vers la page actuelle.aria-current="step": L’élément est l’étape actuelle dans un processus.aria-current="location": L’élément représente l’emplacement actuel dans une structure de type fil d’Ariane.
Exemple de code HTML
<nav aria-label=”Menu principal”>
<ul>
<li>
<a href=”/index.html” aria-current=”page”>Accueil</a>
</li>
<li>
<a href=”/produits.html”>Produits</a>
</li>
<li>
<a href=”/contact.html”>Contact</a>
</li>
</ul>
</nav>
Fournit des informations sur le type d’effet de glisser-déposer autorisé sur un élément. Les valeurs les plus courantes pour cet attribut sont :
copy: L’élément glissé sera copié vers la zone de dépôt.move: L’élément glissé sera déplacé vers la zone de dépôt.link: Un lien sera créé vers l’élément glissé.none: Aucun effet ne se produira, l’élément ne peut pas être déposé ici.execute: Une action sera exécutée.
Exemple de code HTML :
<div class=”drop-zone”
aria-label=”Déposer ici pour déplacer l’élément”
aria-dropeffect=”move”>
Déposez un fichier ici
</div>
Indique si l’élément est actuellement glissé (grabbed) ou non. Il est utilisé dans le contexte des interactions de glisser-déposer. Il peut avoir les valeurs suivantes :
true: L’élément est actuellement glissé.false: L’élément peut être glissé, mais ne l’est pas en ce moment.undefined: L’élément n’est pas glissable ou son état n’est pas connu.
Exemple de code HTML :
<div class=”draggable-item” draggable=”true” aria-grabbed=”false”>
Glissez-moi
</div>
Cet attribut indique qu’un élément ou la zone qu’il contrôle est en train de se mettre à jour et que les technologies d’assistance devraient patienter avant de relire son contenu. Deux valeurs sont possibles !
true: en cours de mise à jour ;false:mise à jour terminée.
Exemple de code HTML :
<div aria-live=”polite” aria-busy=”true”>
<p>Chargement des nouveaux commentaires…</p>
</div>
<div aria-live=”polite” aria-busy=”false”>
<p>Tous les commentaires sont chargés !</p>
<ul>
<li>Commentaire 1</li>
<li>Commentaire 2</li>
</ul>
</div>
Astuces et tutoriels sur l'accessibilité Web
Les attributs de propriété (ARIA Property Attributes)
Les attributs de propriété ARIA, comme aria-label ou aria-controls, fournissent des informations essentielles sur les caractéristiques ou les relations d’un élément. Contrairement aux attributs d’état (aria-expanded), ils décrivent une propriété qui est généralement statique ou stable, et qui ne change pas fréquemment en fonction d’une simple interaction comme un clic.
Je vous invite à découvrir une sélection des attributs WAI-ARIA de propriété les plus courants.
Son rôle est de fournir un nom ou une description textuelle à un élément lorsque celui-ci n’en a pas de visible. C’est particulièrement utile pour les boutons, les liens ou les contrôles de formulaire qui contiennent uniquement des icônes.
Un utilisateur voyant par exemple une icône de loupe sur un bouton comprend son but : “Rechercher”. Cependant, un utilisateur de lecteur d’écran n’a pas cette information visuelle. Sans aria-label, le lecteur d’écran annoncerait simplement “bouton”, ce qui n’est pas utile.
Exemple de code HTML :
<button aria-label=”Rechercher”>
🔍
</button>
<button>
🔍
</button>
L’attribut aria-labelledby est un attribut de propriété ARIA qui fournit un nom accessible à un élément en faisant référence à l’ID d’un ou plusieurs autres éléments sur la page. C’est un peu comme donner un surnom à une personne en se basant sur le nom d’autres personnes.
Cet attribut est extrêmement utile lorsque l’étiquette d’un élément n’est pas directement contenue à l’intérieur de l’élément lui-même. C’est aussi une excellente méthode quand le nom d’un élément soit composé de plusieurs fragments de texte séparés sur la page.
Exemple de code HTML :
<h2 id=”titre-email”>Votre adresse e-mail</h2>
<label for=”input-email” id=”label-email”>Entrez votre adresse</label>
<input type=”text” id=”input-email” aria-labelledby=”titre-email label-email”>
L’attribut aria-describedby est un attribut de propriété qui établit un lien entre un élément et sa description. Son rôle est de fournir des informations supplémentaires ou des instructions plus détaillées qui ne font pas partie de l’étiquette principale de l’élément.
Imaginez un formulaire où un champ de saisie a besoin d’un nom (son étiquette) et d’une description pour expliquer le format attendu (par exemple, “jj/mm/aaaa”). aria-describedby relie le champ à cette description. Le lecteur d’écran annoncera d’abord l’étiquette du champ, puis l’utilisateur pourra choisir d’entendre la description supplémentaire s’il le souhaite.
Exemple de code HTML :
<label for=”date-input”>Date de naissance</label>
<input type=”text” id=”date-input”
aria-describedby=”date-format date-error”>
<p id=”date-format”>
Entrez la date au format jj/mm/aaaa.
</p>
<p id=”date-error” style=”color: red; display: none;”>
⚠️ Veuillez entrer une date de naissance valide.
</p>
L’attribut aria-controls établit un lien entre un élément “contrôleur” et un ou plusieurs éléments qu’il “contrôle”. Son rôle est d’indiquer de manière explicite aux technologies d’assistance (comme les lecteurs d’écran) que l’action sur un élément aura un impact sur le contenu ou l’état d’un autre.
Imaginez un bouton “Afficher les détails” qui fait apparaître un panneau de contenu masqué. Visuellement, le lien est évident. Mais pour un lecteur d’écran, ce lien n’est pas automatique. aria-controls crée cette connexion sémantique, permettant au lecteur d’annoncer à l’utilisateur : “Bouton, Afficher les détails, contrôle les détails de la commande”.
Exemple de code HTML :
<button aria-controls=”details-panneau”>
Afficher les détails
</button>
<div id=”details-panneau”>
Ceci est un panneau de détails.
</div>
Note : L’activation de JavaScript est généralement requise.