ARIA et accessibilité : label, role, aria-*
Associez les étiquettes aux contrôles, appliquez des rôles ARIA lorsque nécessaire et utilisez aria-label et aria-describedby pour aider les lecteurs d’écran.
ARIA et accessibilité : label, role, aria-* est une leçon Frontend Academy gratuite sur CoddyKit. Ceci est la leçon 2 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.
Pourquoi ARIA ?
ARIA (Applications Internet riches accessibles) est un ensemble d’attributs HTML qui communiquent la fonction, l’état et les propriétés des composants d’interface aux technologies d’assistance telles que les lecteurs d’écran, en particulier pour les composants personnalisés qui n’ont pas d’équivalent HTML natif.
La première règle d’ARIA
N’utilisez pas ARIA si un élément ou un attribut HTML natif peut remplir la fonction. <button> est toujours préférable à <div role="button">. L’HTML natif offre l’accessibilité gratuitement.
Rôles de repère
Les rôles de repère ARIA permettent aux utilisateurs de lecteurs d’écran d’accéder directement aux sections de la page. La plupart sont implicites grâce à l’HTML sémantique : <main> → role=main, <nav> → role=navigation. N’ajoutez des rôles explicites que lorsqu’aucun élément sémantique n’est utilisé.
<div role="main">...</div> <!-- prefer <main> -->
<div role="navigation">...</div> <!-- prefer <nav> -->
<div role="banner">...</div> <!-- prefer <header> at page level -->aria-label
aria-label fournit un nom accessible invisible pour un élément. Utilisez-le lorsqu’aucune étiquette textuelle visible ne peut être référencée. Il est fréquent pour les boutons contenant uniquement une icône.
<button aria-label="Close dialog">×</button>
<a href="/rss.xml" aria-label="Subscribe to RSS feed">
<img src="rss-icon.svg" alt="">
</a>aria-labelledby
aria-labelledby utilise le texte d’un autre élément comme étiquette, au moyen d’une référence à un ID. Il est préférable à aria-label lorsqu’une étiquette visible existe déjà.
<h2 id="billing-title">Billing Information</h2>
<form aria-labelledby="billing-title">
...
</form>aria-describedby
aria-describedby référence un texte descriptif supplémentaire, comme un message d’erreur ou une indication, qui complète l’étiquette. Les lecteurs d’écran lisent d’abord l’étiquette, puis la description.
<input id="pass" type="password" aria-describedby="pass-hint">
<p id="pass-hint">Must be at least 12 characters with a symbol.</p>aria-expanded et aria-haspopup
Les composants dynamiques ont besoin d’attributs d’état. aria-expanded indique si un composant de divulgation (accordéon ou menu déroulant) est ouvert ou fermé. Mettez-le à jour en JavaScript lorsque l’état change.
<button aria-expanded="false" aria-controls="menu" id="menu-btn">Menu</button>
<ul id="menu" hidden>...</ul>
<!-- On toggle: -->
btn.setAttribute('aria-expanded', 'true');
menu.removeAttribute('hidden');aria-hidden
aria-hidden="true" retire un élément et tous ses enfants de l’arbre d’accessibilité. Utilisez-le pour les éléments décoratifs, comme les icônes SVG déjà décrites par un texte visible.
<button>
<svg aria-hidden="true" focusable="false">...</svg>
Save Draft
</button>Régions dynamiques : aria-live
aria-live indique aux lecteurs d’écran d’annoncer les changements dans cette région. polite attend que l’utilisateur ait terminé son action en cours. assertive interrompt immédiatement la lecture (à utiliser avec modération).
<div aria-live="polite" aria-atomic="true">
<!-- Status messages announced when updated -->
Form saved successfully.
</div>role="alert"
role="alert" équivaut implicitement à aria-live=assertive. Insérez les messages d’erreur ou les notifications importantes dans un élément possédant ce rôle ; les lecteurs d’écran les annoncent immédiatement.
const errorEl = document.querySelector('[role="alert"]');
errorEl.textContent = 'Email is required.'; // announced immediatelyErreurs de formulaire accessibles
Lorsqu’un champ contient une erreur : utilisez aria-invalid="true", associez le message d’erreur avec aria-describedby et mettez à jour le contenu de role="alert". Cette approche en trois parties garantit que les lecteurs d’écran communiquent toutes les informations nécessaires.
<input id="email" type="email" aria-invalid="true" aria-describedby="email-error">
<p id="email-error" role="alert">Please enter a valid email address.</p>Vérification rapide
Quel attribut ARIA fournit le nom accessible d’un élément lorsqu’aucune étiquette textuelle visible n’existe ?
Récapitulatif : notions essentielles d’ARIA
Préférez l’HTML natif à ARIA. aria-label pour les boutons contenant uniquement une icône. aria-labelledby pour référencer les étiquettes visibles. aria-describedby pour les indications et les erreurs. aria-expanded pour les composants de divulgation. aria-hidden pour le contenu décoratif. aria-live pour les mises à jour d’état dynamiques. aria-invalid + role=alert pour les erreurs de formulaire.
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 « ARIA et accessibilité : label, role, aria-* » est-elle gratuite ?
Oui — le texte complet de « ARIA et accessibilité : label, role, 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 « ARIA et accessibilité : label, role, aria-* » ?
Associez les étiquettes aux contrôles, appliquez des rôles ARIA lorsque nécessaire et utilisez aria-label et aria-describedby pour aider les lecteurs d’écran. 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 2 sur 4.
Combien de temps prend la leçon « ARIA et accessibilité : label, role, 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
- Contrôles de formulaire : types input, select, textarea
- ARIA et accessibilité : label, role, aria-*
- HTML5 sémantique : éléments sémantiques ou soupe de div
- Attributs de validation des formulaires