Attributs ARIA essentiels : aria-label, describedby, hidden, expanded (WCAG 2.1)

Vous savez poser des rôles ARIA et lire l'arbre d'accessibilité, mais vos boutons icônes restent muets pour les lecteurs d'écran ? Ce deuxième tuto de la série vous fait passer de la théorie à la pratique sur les attributs ARIA les plus utilisés en production. À la fin, tu produis du code conforme WCAG 2.1 niveau AA, sans approximation.
Carl Brison reprend là où le premier tuto s'arrête et structure tout autour de quatre gestes que tu vas répéter sur chaque projet : nommer, décrire, masquer et communiquer un état. Chaque attribut est expliqué avec des cas concrets tirés d'interfaces réelles : modale, formulaire de livraison, menu burger, accordéon FAQ, champ de recherche.

Ce que tu vas savoir faire

• Nommer avec aria-label et aria-labelledby : différencier des liens répétitifs comme « Voir le détail », nommer plusieurs zones de navigation, relier une modale à son titre visible, et surtout savoir lequel des deux choisir selon que le nom existe déjà à l'écran.
• Décrire avec aria-describedby et .sr-only : associer une contrainte de saisie à un champ mot de passe, construire un tooltip accessible, avertir d'une action irréversible, et masquer visuellement un texte tout en le gardant dans l'arbre d'accessibilité.
• Masquer avec aria-hidden : retirer icônes décoratives, SVG et séparateurs de la lecture, comprendre le tableau display:none / visibility:hidden / hidden, et éviter l'erreur critique de masquer un élément focusable.
• Gérer les états avec aria-expanded et aria-controls : le duo indispensable des menus mobiles, dropdowns et accordéons, pourquoi ces attributs vivent sur le déclencheur et jamais sur le contenu, et comment synchroniser leur valeur en JavaScript.

À qui s'adresse ce tuto

• Tu as suivi le premier tuto de la série ou tu as déjà des bases en ARIA (rôles, arbre d'accessibilité, règle « HTML natif d'abord »).
• Tu construis des composants interactifs et tu veux les rendre réellement utilisables au lecteur d'écran.
• Tu vises la conformité RGAA et WCAG 2.1 AA sur tes interfaces.

Le tuto se termine par une fiche récapitulative et la classe CSS .sr-only prête à coller dans tes projets. La prochaine session enchaîne sur un exercice complet : un menu burger entièrement accessible, piloté en JavaScript.

Formateur : Carl Brison, Technicien Supérieur en Multimédia depuis le début des années 2000, créateur de nombreux sites professionnels et auteur de livres informatiques publiés aux Éditions Ellipses. Formateur certifié Tuto.com.

Prérequis : HTML sémantique (balises de structure, formulaires, liens). Aucune connaissance préalable d'ARIA n'est nécessaire.
Pour aller plus loin : Retrouvez-moi en qualité de Mentor sur notre Parcours de développeur web frontend.