L'accessibilité n'est pas une option réservée aux grandes organisations. C'est un standard légal, éthique et technique que tout développeur doit maîtriser. Les WCAG et ARIA sont vos premiers outils.
Les WCAG (Web Content Accessibility Guidelines) constituent le référentiel international d'accessibilité du web, maintenu par le W3C. Leur version 2.1, désormais recommandée par la plupart des législations européennes, définit trois niveaux : A (minimum), AA (cible recommandée) et AAA (exigences avancées). La conformité AA couvre l'essentiel : contraste suffisant, navigation clavier, alternatives textuelles, sous-titres pour les vidéos.
Les attributs ARIA (Accessible Rich Internet Applications) viennent compléter le HTML sémantique quand ce dernier ne
suffit plus. Un aria-label permet de donner un nom accessible à un élément sans texte visible — une icône, un bouton
symbolique. Les rôles ARIA comme role="dialog", role="navigation" ou role="alert" indiquent aux technologies
d'assistance la nature de chaque composant. La règle d'or : préférez toujours le HTML natif sémantique (<button>,
<nav>, <main>) avant d'ajouter ARIA.
Un élément souvent oublié est la gestion du focus. Quand une modale s'ouvre, le focus doit se déplacer à l'intérieur
et y rester jusqu'à la fermeture — c'est le focus trap. Quand un composant dynamique affiche une erreur, aria-live
permet d'annoncer le changement aux lecteurs d'écran. Ces détails semblent mineurs mais ils font toute la différence
pour un utilisateur aveugle naviguant au clavier.
- Visez la conformité WCAG 2.1 niveau AA au minimum
- Utilisez le HTML sémantique avant de recourir à ARIA
- Vérifiez le contraste de couleur avec un ratio d'au moins 4.5:1
- Testez votre site avec un lecteur d'écran (NVDA, VoiceOver)
→ À lire aussi : Formulaires accessibles · Outils de test d'accessibilité