Rôles et attributs ARIA
Appliquez des rôles de repère, des régions dynamiques et des attributs aria-* pour améliorer les composants lorsque le HTML natif ne suffit pas.
Rôles et attributs ARIA est une leçon Frontend Academy gratuite sur CoddyKit. Ceci est la leçon 3 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Frontend Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Frontend Academy comprend 4 leçons au total.
Qu’est-ce qu’ARIA ?
ARIA (Accessible Rich Internet Applications) est un ensemble d’attributs HTML qui décrivent le rôle, l’état et les propriétés des éléments aux technologies d’assistance. C’est le lien qui permet de rendre accessibles les composants personnalisés impossibles à exprimer avec le HTML natif.
Première règle d’ARIA : n’utilisez pas ARIA
Si un élément natif fait ce dont vous avez besoin, utilisez-le. <button> est préférable à <div role="button">. Une utilisation incorrecte d’ARIA est pire que l’absence d’ARIA : elle donne l’impression que l’interface est accessible tout en laissant les utilisateurs sans solution.
Catégories d’attributs ARIA
Trois catégories : rôles (ce qu’est un élément), propriétés (relativement statiques — aria-label, aria-describedby), états (dynamiques — aria-expanded, aria-pressed, aria-checked).
Rôles de repère
Identifiez les grandes régions de la page. La plupart ont des équivalents HTML5, que vous devriez privilégier.
<!-- HTML5 (preferred): -->
<nav>...</nav>
<main>...</main>
<aside>...</aside>
<!-- ARIA equivalents (use only when HTML5 won't work): -->
<div role="navigation">...</div>
<div role="main">...</div>
<div role="complementary">...</div>aria-label et aria-labelledby
aria-label : fournit un nom accessible sous forme de chaîne. aria-labelledby : utilise le texte d’un autre élément comme nom. Utilisez-les lorsqu’aucun texte visible n’existe ou lorsque celui-ci ne suffit pas.
<!-- Icon-only button needs a label: -->
<button aria-label="Close dialog">
<svg>...</svg>
</button>
<!-- Section labelled by its heading: -->
<section aria-labelledby="settings-title">
<h2 id="settings-title">Settings</h2>
...
</section>aria-describedby pour les indications
aria-describedby relie un élément à une description plus longue. C’est utile pour les indications de formulaire, les messages d’erreur et les infobulles.
<label for="password">Password</label>
<input id="password" type="password" aria-describedby="pw-hint">
<p id="pw-hint">Must be at least 12 characters with a number and symbol.</p>aria-expanded pour les panneaux dépliables
Les boutons qui affichent ou masquent un panneau doivent exposer aria-expanded = true/false.
<button aria-expanded="false" aria-controls="faq-1" onclick="toggle()">
How do I cancel?
</button>
<div id="faq-1" hidden>
Visit Settings > Billing to cancel.
</div>aria-pressed pour les boutons bascules
Les boutons avec un état activé/désactivé (sourdine, gras) utilisent aria-pressed.
<button aria-pressed="true" onclick="toggleBold()">
Bold
</button>Régions dynamiques : aria-live
Le contenu mis à jour dynamiquement (notifications, résultats de recherche, récapitulatifs d’erreurs) doit se trouver dans une région dynamique afin que les lecteurs d’écran annoncent les changements. polite attend une pause ; assertive interrompt.
<!-- Toast container -->
<div aria-live="polite" aria-atomic="true" id="toast-region"></div>
<!-- Critical alert -->
<div role="alert">Session expired. Please log in again.</div>role="alert" : forme abrégée
role="alert" est une forme abrégée pour une région dynamique assertive avec aria-atomic. Utilisez-le avec parcimonie : chaque alerte interrompt l’utilisateur.
aria-hidden pour le contenu décoratif
aria-hidden="true" retire un élément de l’arbre d’accessibilité. Utilisez-le sur les icônes décoratives placées à côté de labels textuels ; sinon, les lecteurs d’écran les annoncent de manière redondante.
<button>
<svg aria-hidden="true" focusable="false">...</svg>
Save
</button>Testez avec un lecteur d’écran
La seule façon de savoir si ARIA fonctionne est de le tester. VoiceOver (macOS/iOS, gratuit), NVDA (Windows, gratuit), TalkBack (Android, gratuit). Dix minutes avec VoiceOver vous en apprendront davantage que n’importe quel outil d’audit.
Vérification rapide
Quel attribut ARIA devez-vous définir sur un bouton composé uniquement d’une icône et dépourvu de label textuel visible ?
Récapitulatif : ARIA
ARIA décrit le rôle, les propriétés et l’état aux technologies d’assistance. Préférez le HTML natif avant de recourir à ARIA. aria-label/aria-labelledby fournissent des noms accessibles. aria-describedby sert aux indications. aria-expanded/aria-pressed servent aux bascules. aria-live sert aux annonces dynamiques. aria-hidden sert au contenu décoratif. Testez toujours avec un véritable lecteur d’écran.
Apprends HTML avec un tuteur IA — gratuit
Écris et exécute du vrai code dans ton navigateur, obtiens de l'aide instantanée d'un tuteur IA disponible 24h/24, et reprends là où tu t'es arrêté sur le web ou dans l'app.
- Cours
- 41
- Leçons
- 163
Questions Fréquemment Posées
La leçon « Rôles et attributs ARIA » est-elle gratuite ?
Oui — le texte complet de « Rôles et attributs ARIA » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Frontend Academy, passe à CoddyKit PRO. Le cours Frontend Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Rôles et attributs ARIA » ?
Appliquez des rôles de repère, des régions dynamiques et des attributs aria-* pour améliorer les composants lorsque le HTML natif ne suffit pas. Tu pratiques Frontend Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer Frontend Academy ?
Aucune expérience préalable n'est requise. Frontend Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 3 sur 4.
Combien de temps prend la leçon « Rôles et attributs ARIA » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon Frontend Academy ?
Oui. Chaque leçon Frontend Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- Niveaux WCAG : A, AA et AAA
- HTML sémantique comme fondation
- Rôles et attributs ARIA
- Navigation au clavier et gestion du focus