L'importance des balises ARIA dans le développement web

ARIA (Accessible Rich Internet Applications) est une spécification du W3C qui permet d'enrichir la sémantique HTML pour les technologies d'assistance. Mais attention : mal utilisée, ARIA aggrave l'accessibilité.

La règle d'or : ARIA en dernier recours

Avant d'utiliser ARIA, posez-vous la question : existe-t-il un élément HTML natif qui fait la même chose ? Un <button> est préférable à un <div role="button">. La sémantique native est toujours plus robuste.

Les 5 attributs ARIA les plus utilisés

• aria-label : donne un nom accessible à un élément sans texte visible
• aria-labelledby : associe un élément à un titre existant dans la page
• aria-describedby : fournit une description supplémentaire
• aria-live : annonce les mises à jour dynamiques aux lecteurs d'écran
• aria-hidden : masque un élément décoratif aux technologies d'assistance

Exemple concret : une modale accessible

Une fenêtre modale doit piéger le focus, annoncer son titre et permettre la fermeture au clavier. Voici les attributs indispensables :

<div role="dialog" aria-modal="true" aria-labelledby="modal-title">
  <h2 id="modal-title">Titre de la modale</h2>
  ...
</div>

Les erreurs les plus fréquentes

• Utiliser aria-hidden="true" sur un élément focusable
• Oublier de gérer le focus à l'ouverture d'une modale
• Ajouter role="button" sur un <a> sans href

La meilleure façon d'apprendre ARIA reste de tester avec un vrai lecteur d'écran. NVDA (gratuit, Windows) et VoiceOver (intégré à macOS/iOS) sont vos meilleurs alliés.