Le Principe Fondamental : HTML Sémantique d'Abord
Règle d'or : Utilisez toujours les éléments HTML natifs avant d'ajouter ARIA. Les éléments sémantiques HTML ont déjà une accessibilité intégrée.
Les 6 Catégories de Rôles ARIA
🗺️ Rôles de Repères (Landmark)
Structurent la page pour la navigation
✅ Bon
<nav> ou <header>
❌ Éviter
<div role="navigation">
📄 Rôles de Structure
Décrivent la structure du contenu
✅ Bon
<article> ou <section>
❌ Éviter
<div role="article">
📢 Régions Dynamiques
Contenu qui change dynamiquement
✅ Bon
role="alert" aria-live="assertive"
❌ Éviter
Changements silencieux
🪟 Rôles de Fenêtres
Sous-fenêtres et dialogues
✅ Bon
<dialog> + role="dialog"
❌ Éviter
Modale sans rôle
⚠️ Rôles Abstraits
À NE JAMAIS utiliser dans le code
❌ Interdit
role="widget" role="command"
🎯 Bonnes Pratiques ARIA
1. HTML Sémantique d'Abord
✅ Recommandé
<button onclick="save()">
Enregistrer
</button>❌ À éviter
<div role="button"
onclick="save()"
tabindex="0">
Enregistrer
</div>2. Utilisez ARIA avec Parcimonie
Trop d'ARIA peut créer de la confusion pour les utilisateurs de lecteurs d'écran
N'ajoutez ARIA que lorsque HTML natif ne peut pas exprimer la sémantique nécessaire.
3. Testez avec de Vrais Utilisateurs
L'accessibilité théorique ≠ accessibilité pratique. Testez avec des lecteurs d'écran réels.
🧪 Démonstration Interactive
Testez ces deux éléments avec un lecteur d'écran. Le premier utilise l'élément HTML natif <button>, le second est un <div> stylé.
Différences :
- Navigation au clavier (Tab, Entrée, Espace)
- Annonce par les lecteurs d'écran
- Sémantique native vs artificielle