Attributs ARIA essentiels : aria-label, describedby, hidden, expanded (WCAG 2.1)
Dans le premier tuto, nous avons posé les fondations : vous savez ce qu'est ARIA, comment il s'articule avec le HTML natif, et comment les rôles structurent l'arbre d'accessibilité.
Dans ce deuxième tuto, on entre dans le détail des attributs ARIA les plus couramment utilisés.
Ce tuto couvre les quatre concepts :
Nommer : Donner un nom accessible.
Décrire : Ajouter des informations contextuelles.
Masquer : Retirer ce qui ne doit pas être lu.
Communiquer : Signaler l'état des composants interactifs.
Les points clés abordés :
Nommer avec aria-label et aria-labelledby
Comprendre la distinction fondamentale entre les deux.
Différencier des liens répétitifs (ex: "Voir le détail").
Nommer correctement plusieurs zones de navigation.
Associer un formulaire ou une modale à son titre visible.
Décrire avec aria-describedby et .sr-only
Répondre à la question : "Qu'est-ce que je dois savoir en plus ?".
Associer des contraintes de saisie à un champ.
Construire des tooltips accessibles.
Maîtriser la classe .sr-only pour masquer visuellement sans retirer de l'arbre d'accessibilité.
Masquer avec aria-hidden
Retirer les icônes décoratives, étoiles de notation et séparateurs de l'arbre.
Maîtriser le tableau des techniques : display:none, visibility:hidden, hidden.
Éviter les erreurs critiques : ne jamais mettre aria-hidden sur un élément interactif ou focusable.
États et contrôles : aria-expanded et aria-controls
Le duo incontournable pour les menus mobiles, accordéons FAQ et dropdowns.
Pourquoi ces attributs se placent sur le déclencheur et jamais sur le contenu.
Synchronisation de l'état via JavaScript.
Objectifs et Public
À l'issue de ce tuto, vous serez capable de :
Nommer et décrire correctement n'importe quel élément.
Gérer proprement les éléments purement décoratifs.
Produire un code conforme WCAG 2.1 niveau AA.
Ce tuto s'adresse à vous si :
Vous avez suivi le premier tuto ou avez des bases en ARIA.
Vous construisez des composants interactifs.
Vous voulez comprendre les attributs ARIA croisés en production.
- Durée de ce tuto: 55min
- Tarif de ce tuto: 13 €
- Date de ce tuto: 2026-06-03
Il y a actuellement 424 tutos
Il y a actuellement 29 bundles
