En développement web, les rôles et attributs ARIA (Accessible Rich Internet Applications) sont utilisés pour améliorer l’accessibilité des applications web. Voici une explication simple :
Rôles ARIA
Les rôles définissent le type d’élément et son comportement. Par exemple :
button: Indique qu’un élément est un bouton.navigation: Indique une section de navigation.alert: Indique un message d’alerte.
Attributs ARIA
Les attributs ARIA fournissent des informations supplémentaires sur les éléments. Par exemple :
aria-label: Fournit une étiquette accessible pour un élément.aria-hidden: Indique si un élément doit être ignoré par les technologies d’assistance.aria-expanded: Indique si un élément est développé ou réduit.
Vérification des Attributs ARIA
Il est important de s’assurer que les attributs ARIA utilisés sont appropriés pour le rôle de l’élément. Par exemple :
- Rôle
button: - Attributs autorisés :
aria-pressed,aria-disabled,aria-label. - Attributs non autorisés :
aria-hidden(peut rendre le bouton inaccessible). - Rôle
navigation: - Attributs autorisés :
aria-label,aria-labelledby. - Attributs non autorisés :
aria-pressed(non pertinent pour la navigation).
Exemple
<!-- Exemple d'un bouton avec des attributs ARIA appropriés -->
<button role="button" aria-pressed="false" aria-label="Envoyer">
Envoyer
</button>
<!-- Exemple d'une section de navigation -->
<nav role="navigation" aria-label="Menu principal">
<ul>
<li><a href="#home">Accueil</a></li>
<li><a href="#about">À propos</a></li>
</ul>
</nav>Conclusion
En tant que développeur, il est essentiel de comprendre quels attributs ARIA sont appropriés pour chaque rôle afin d’assurer une meilleure accessibilité de vos applications.
Ci-dessous la liste d’attributs ARIA appropriés pour chaque rôle