Rampsight

Toutes les règles

ARIA

Les champs de saisie ARIA ont besoin d’un nom

Pourquoi c’est important

Une combobox, une listbox ou un champ de recherche construits à partir d’éléments génériques n’ont pas d’étiquette propre. Sans nom, ils sont annoncés par leur seul rôle : leur finalité reste invisible pour qui ne regarde pas l’écran.

Comment corriger

  1. Faites pointer aria-labelledby vers l’élément d’étiquette visible.
  2. En l’absence d’étiquette visible, utilisez aria-label avec la même formulation que le texte indicatif.
  3. Un texte indicatif seul n’est pas un nom : il disparaît dès la première frappe.

Dans le balisage

Échoue
<div role="combobox" aria-expanded="false"></div>
Réussit
<div role="combobox" aria-expanded="false" aria-label="Country"></div>

L’exigence sous-jacente

Cette règle est une manière d’échouer aux critères de succès WCAG 2.2 suivants. Le W3C, qui rédige la norme, explique chacun d’eux :

Pour aller plus loin

Deque University sur aria-input-field-name (s’ouvre dans un nouvel onglet)

Deque développe axe-core, le moteur open source utilisé par notre scanner. Sa page documente la règle telle que le moteur l’implémente.

Les contrôles automatiques trouvent les défaillances qu’un navigateur peut prouver. Ils ne peuvent pas juger si un sous-titrage est fidèle, si une alternative textuelle est utile, ni si une page s’utilise de bout en bout au clavier : cela demande une personne.