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.
