Comprendre les attributs ARIA pour améliorer l'accessibilité
Publié le
Pour rendre des pages web accessibles à tous, il est essentiel de fournir des
informations claires aux utilisateurs utilisant des technologies d’assistance comme les
lecteurs d’écran. Les attributs ARIA (Accessible Rich Internet Applications) offrent des
moyens d'ajouter des descriptions supplémentaires et de mieux structurer les
informations pour les utilisateurs qui ne lisent pas visuellement le texte. Cet article
explore cinq attributs ARIA souvent utilisés :
aria-label,
aria-labelledby,
aria-describedby,
aria-description, et
aria-details. Nous verrons à quoi ils servent et dans
quelles situations les utiliser pour optimiser l'expérience utilisateur.
aria-label : Donner une étiquette à un élément
L’attribut aria-label permet d’ajouter une description
textuelle à un élément, souvent utilisé lorsqu'il n’y a pas d’étiquette visible associée
à l’élément. Par exemple, pour des boutons ou des icônes,
aria-label peut fournir une description claire de leur
fonction aux lecteurs d’écran.
Exemple :
<button aria-label="Fermer la fenêtre">✖</button>
Ici, l'icône de fermeture n'a pas de texte visible, mais grâce à l’attribut
aria-label, un utilisateur de lecteur d’écran saura
qu’il s’agit du bouton pour fermer la fenêtre.
aria-labelledby : Référencer une étiquette visible
L'attribut aria-labelledby permet de lier un élément à
un autre élément qui contient déjà une description visible. Contrairement à
aria-label, qui ajoute une étiquette,
aria-labelledby pointe vers un élément existant et
visible, par exemple un titre ou un texte à proximité.
Exemple :
<h2 id="section-title">Contactez-nous</h2>
<button aria-labelledby="section-title">Envoyer un message</button>Le bouton "Envoyer un message" est lié au titre "Contactez-nous", permettant ainsi aux technologies d’assistance de comprendre le contexte de ce bouton.
aria-describedby : Ajouter une description
supplémentaire
aria-describedby fournit des informations
supplémentaires à propos d’un élément en pointant vers une autre section de texte sur la
page. Il est souvent utilisé pour ajouter des détails additionnels concernant la
fonction ou l’utilisation d’un élément.
Exemple :
<input type="text" id="email" aria-describedby="email-help">
<p id="email-help">Veuillez entrer une adresse email valide.</p>Le champ de texte est lié à une description complémentaire qui donne des informations supplémentaires sur ce qui est attendu de l'utilisateur.
aria-description : Donner une description détaillée
aria-description est similaire à
aria-describedby, mais il est souvent utilisé pour
fournir des informations plus détaillées ou complexes sur un élément sans référence
visible.
Exemple :
<button aria-description="Cliquez pour soumettre le formulaire et recevoir une confirmation par email.">Soumettre</button>Cette description fournit des détails que seuls les utilisateurs de lecteurs d’écran entendront, sans être visibles sur la page.
aria-details : Fournir des informations complexes
liées à un élément
L’attribut aria-details est utilisé lorsqu’un élément
a une relation avec une autre section plus complexe de la page qui fournit des
informations détaillées. Il peut lier un formulaire à des instructions détaillées
situées ailleurs sur la page.
Exemple :
<div aria-details="form-instructions">
<form>
<!-- formulaire -->
</form>
</div>
<div id="form-instructions">
<p>Veuillez remplir toutes les sections obligatoires avant de soumettre le formulaire.</p>
</div>
Ici, aria-details indique aux lecteurs d’écran
qu’une section plus détaillée est disponible et peut être lue pour des instructions
supplémentaires.
Conclusion
En utilisant correctement ces attributs ARIA, vous pouvez considérablement améliorer l'accessibilité de votre site web, rendant ainsi vos contenus plus inclusifs. Chacun de ces attributs a un rôle spécifique, et comprendre leur différence permet d’offrir une expérience plus riche aux utilisateurs de technologies d'assistance.
