Cette traduction n’a pas encore été relue par la rédaction. La version allemande fait foi. Deutsche Fassung →
Barrierefreiheit
Que signifient le nom, le rôle et la valeur sur un site web ?
Le nom, le rôle et la valeur sont les trois informations que chaque élément de commande d'un site web doit communiquer aux logiciels d'assistance. Le nom dit à quoi sert l'élément (« Recherche »), le rôle dit ce qu'il est (bouton, lien, case à cocher), la valeur dit l'état dans lequel il se trouve (coché ou vide). Si une des trois manque, un visiteur aveugle n'entend que « élément » — et ne peut rien en faire. Le critère WCAG 4.1.2 l'exige.
Trois informations rendent un élément utilisable
Un logiciel de lecture n'a pas d'yeux — il énonce ce que le code source dit à ce sujet à propos de chaque élément. Avec un bouton bien construit, il dit : « Recherche, bouton ». Le visiteur sait immédiatement ce qui se passe s'il appuie sur Entrée. Avec une case à cocher, la valeur s'ajoute : « S'abonner à la newsletter, case à cocher, non coché ». Les problèmes surviennent avec les éléments de commande auto-construits : un symbole cliquable sans nom est énoncé comme « image », un menu déroulant assemblé par script sans rôle comme texte dénué de sens. Le visiteur voyant ne remarque rien — l'élément reste normal. Pour les utilisateurs de logiciels de lecture, de commande vocale et de claviers spécialisés, il est invisible ou inutilisable. La robustesse signifie : la technologie sous-jacente prend en charge tous les programmes d'assistance, pas seulement l'écran.
Ainsi, le service de contrôle teste le nom, le rôle et la valeur
Notre noyau de mesure teste ce critère en grande partie automatiquement avec axe-core dans un vrai navigateur. Il est contrôlé notamment : chaque bouton et chaque lien porte-t-il un nom accessible, les informations supplémentaires pour les logiciels d'assistance sont-elles valides et correctement combinées, les rôles auto-attribués respectent-ils les règles. Pour exclure les faux positifs, axe-core s'exécute deux fois avec un délai de 800 millisecondes — seuls les constats que les deux exécutions montrent comptent. En supplément, le décompte d'étiquetage du critère 3.3.2 s'ajoute : un champ de saisie sans étiquette liée n'a pas non plus de nom accessible et compte donc également comme violation du critère 4.1.2. Le rapport nomme chaque constat avec l'élément et la preuve.
Beispiele
Schalter ohne Name, Rolle und Zustand
<div class="toggle on" onclick="umschalten()"></div><button type="button" role="switch" aria-checked="true" onclick="umschalten()">
Benachrichtigungen
</button>Das Vorleseprogramm sagt „Benachrichtigungen, Schalter, eingeschaltet“. Beim Umschalten muss aria-checked mitgeführt werden.
Symbol-Knopf ohne Namen
<button><svg>…</svg></button><button aria-label="Suche öffnen"><svg aria-hidden="true">…</svg></button>- Demandez à votre agence d'utiliser pour les éléments de commande les composants intégrés — de vrais boutons et liens portent le nom, le rôle et la valeur d'eux-mêmes.
- Attribuez à chaque bouton symbole pur — loupe, menu, panier — un nom invisible, mais ancré techniquement.
- Testez les éléments auto-construits comme les menus déroulants et les commutateurs de manière particulièrement critique — le rôle et l'état manquent les plus souvent.
- Faites tourner un test automatique après chaque remaniement majeur, car un seul script nouveau peut rendre muets de nombreux éléments.