Le problème
Omettre le texte visible peut transformer « Ajouter au panier » en « Carnet A5 ». Des id manquants ou dupliqués rendent aussi le nom difficile à prévoir.
Exemple : mauvais et correct
Mauvais
<h2 id="produit">Carnet A5</h2>
<button type="button" aria-labelledby="produit">Ajouter au panier</button>Correct
<h2 id="produit">Carnet A5</h2>
<button id="ajouter" type="button"
aria-labelledby="ajouter produit">Ajouter au panier</button>Le bouton référence son texte puis le produit : le nom attendu est « Ajouter au panier Carnet A5 ». L’action de panier reste à implémenter.
RGAA concerné
Les critères dépendent de l’élément, de son usage et des cas particuliers applicables. Voici les contrôles à examiner pour ce sujet.
- Critère 7.1 — Nommer les composants scriptés en conservant leur intitulé visible.
- Critère 11.1 — Étiqueter les champs lorsque ce mécanisme est utilisé.
- Critère 11.2 — Vérifier la pertinence de l’étiquette obtenue.
Impact utilisateur
Le contexte distingue des commandes identiques au lecteur d’écran. Il doit conserver l’action, sans quoi la personne entend un objet sans savoir ce que la commande réalise.
Correction
- Référencez des textes pertinents et stables avec des id uniques. Évitez de nommer le contrôle ou la région par une grande partie du contenu.
- L’ordre des id fixe l’ordre des fragments. Pour compléter une commande, conservez son texte visible et ajoutez seulement le contexte nécessaire.
- Pour un champ simple, préférez label avec for. Pour une modale ou région, aria-labelledby peut réutiliser le titre visible et maintenir un nom cohérent.
Méthode de test
- Vérifiez existence et unicité des id, y compris dans les composants répétés.
- Inspectez le nom calculé : fragments dans le bon ordre, intitulé visible conservé.
- Au lecteur d’écran, parcourez contrôles et régions : le contexte doit les distinguer sans allonger inutilement chaque annonce.
Points de vigilance
- Un aria-labelledby valide prime sur aria-label et peut remplacer le nom natif ; ces mécanismes ne s’additionnent pas librement.
- Nommer par tout un panneau peut produire une annonce excessive ; la description remplit une autre fonction.
Sources officielles
Le RGAA fournit les critères de contrôle. Les ressources du W3C et du WHATWG complètent les méthodes de mise en œuvre ; elles ne remplacent pas les tests RGAA.