Le problème
Une icône peut être annoncée comme un symbole sans action claire. Sur un bouton explicite, aria-label peut au contraire remplacer le texte par un nom différent.
Exemple : mauvais et correct
Mauvais
<button type="button">×</button>Correct
<button type="button" aria-label="Fermer la fenêtre">
<span aria-hidden="true">×</span>
</button>Le nom décrit l’action du symbole. Cet extrait traite seulement du nom : la fermeture doit être implémentée dans la fenêtre.
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 commandes scriptées et conserver l’intitulé visible applicable.
- Critère 11.9 — Nommer les boutons de formulaire.
- Critère 6.1 — Préserver sens et intitulé visible des liens nommés par ARIA.
Impact utilisateur
Le lecteur d’écran doit expliquer l’action sans montrer l’icône. En commande vocale, le nom doit permettre de viser le contrôle par son texte visible.
Correction
- Privilégiez un texte visible utile. Pour une icône seule, choisissez un nom bref décrivant action ou destination.
- Incluez tout intitulé visible dans le nom accessible. Si le bouton affiche « Supprimer », « Supprimer le document » convient ; « Retirer » crée un décalage.
- Vérifiez le nommage existant : un aria-labelledby valide prime sur aria-label. Les deux ne créent pas des noms complémentaires.
Méthode de test
- Inspectez le nom calculé : il doit décrire la fonction. Dans l’exemple, le nom attendu est « Fermer la fenêtre ».
- Au lecteur d’écran, comparez l’annonce à l’apparence : tout intitulé visible doit être inclus dans le nom.
- Si une commande vocale est disponible, utilisez le texte visible. Vérifiez que l’action annoncée se produit réellement.
Points de vigilance
- aria-label ne crée pas de consigne visible pour tous les lecteurs.
- Il n’est pas autorisé sur tous les éléments ou rôles : vérifiez ARIA dans HTML.
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.