Attributs et accessibilité
9 min · Intermédiaire · 7 août 2026
Ce que ce cours a déjà couvert sur l’accessibilité
Deux réflexes vus dans les chapitres précédents sont déjà de l’accessibilité concrète : alt sur une image (chapitre 4) et l’association label/for sur un champ de formulaire (chapitre 6). aria-label complète ces deux outils pour un cas qu’ils ne couvrent pas : un élément sans texte visible du tout.
aria-label : nommer sans afficher
<button aria-label="Fermer">×</button>Le symbole × (un x) s’affiche visuellement, mais ne dit rien de l’action à un lecteur d’écran. aria-label="Fermer" fournit ce nom, sans jamais s’afficher lui-même à l’écran.
Danger
aria-label ne transforme jamais un élément mal choisi en élément accessible. Un div cliquable avec aria-label reste inatteignable au clavier et n’a pas de rôle de bouton pour les technologies d’assistance : utiliser button reste indispensable, aria-label vient en complément, jamais en remplacement.
À toi de jouer
Crée un bouton sans texte visible (par exemple juste un symbole × ou +), avec un aria-label décrivant clairement son action.
<!-- HTML -->
<!-- Ecris ton bouton ici -->