Chapitre 16.2 — Cheat sheet ARIA & clavier

⏱️ TL;DR — La feuille de triche à garder ouverte : les rôles, états et propriétés ARIA les plus utiles (quand les employer), le clavier attendu par pattern APG (modale, onglets, menu, accordéon, combobox), le CSS sr-only complet, et la règle d’or. Rien ici ne remplace les Parties 6 et 10 — c’est un rappel condensé pour quand tu codes.

La règle d’or

La première règle d’ARIA : ne pas utiliser ARIA. Si un élément HTML natif (<button>, <nav>, <label>, <dialog>…) fait le travail, utilise-le. ARIA ne modifie que la sémantique exposée — jamais le comportement, le focus ou le style, qui restent à ta charge.

États & propriétés ARIA courants

Attribut	Rôle	Sur quoi
`aria-label`	Nom accessible (quand pas de texte visible)	Bouton icône, champ de recherche
`aria-labelledby`	Nom accessible via l’`id` d’un autre élément	Dialogue titré, section
`aria-describedby`	Description complémentaire	Champ avec aide/erreur, tooltip
`aria-expanded`	Ouvert/fermé	Disclosure, menu, accordéon, combobox
`aria-selected`	Sélectionné	Onglet, option de listbox
`aria-checked`	Coché	Case/switch custom
`aria-current`	Élément courant	Lien de page active, étape
`aria-invalid`	Champ en erreur	Formulaire
`aria-hidden="true"`	Retirer de l’arbre d’accessibilité	Icône décorative (jamais sur un focusable)
`aria-live`	Annoncer un changement	`polite` (statut) / `assertive` (alerte)
`aria-controls`	Lie un déclencheur à sa cible	Bouton → panneau

⚠️ Ne mets jamais aria-hidden="true" sur un élément focusable ni sur un conteneur qui en contient : tu crées un « fantôme » que le clavier atteint mais que le lecteur d’écran ignore. Voir 6.5.

Clavier attendu par pattern (APG)

Pattern	Touches
Bouton	`Entrée` et `Espace` activent
Lien	`Entrée` active
Modale (dialog)	`Échap` ferme ; focus piégé ; focus rendu au déclencheur
Onglets (tabs)	`Flèches` gauche/droite changent d’onglet ; `Tab` va au panneau
Menu button	`Entrée`/`Espace`/`Flèche bas` ouvre ; `Flèches` naviguent ; `Échap` ferme
Accordéon	`Entrée`/`Espace` déplient/replient l’en-tête
Combobox	`Flèche bas` ouvre/descend ; `Entrée` sélectionne ; `Échap` ferme
Case / switch	`Espace` bascule
Radios	`Flèches` déplacent la sélection dans le groupe

Le CSS `sr-only` (visually-hidden)

Cache visuellement un texte tout en le laissant lisible par le lecteur d’écran (libellé d’un bouton icône, contexte d’un lien) :


.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

À l’inverse, aria-hidden="true" masque pour le lecteur d’écran un contenu visible (icône décorative). Ne confonds pas les deux — voir 5.5.

Nom / rôle / valeur : l’ordre de calcul du nom

Le nom accessible d’un élément se calcule par priorité décroissante :


1. aria-labelledby  (gagne sur tout)
2. aria-label
3. contenu / <label> associé / alt / <legend>
4. title / placeholder  (dernier recours, à éviter)

Contrastes à retenir

Cas	Ratio minimum (AA)
Texte normal	4,5:1
Grand texte (≥ 24px, ou ≥ 18,66px gras)	3:1
Éléments non textuels (bordures, icônes utiles, focus)	3:1

🧭 Sur A11yLearn — Ce chapitre est épinglé dans le wiki de l’équipe A11yLearn. Quand un dev code un onglet ou une modale, il vérifie la ligne « clavier attendu » et la colonne « états ARIA » avant d’ouvrir la PR. La cheat sheet transforme des connaissances éparses en réflexes vérifiables.

Chapitre suivant : Snippets prêts à copier — le code réutilisable des patterns les plus fréquents.