aria-autocomplete

Quand l’utiliser

Sur un role="combobox" ou role="textbox" personnalisé qui propose des suggestions à mesure que l’utilisateur saisit. L’attribut indique aux technologies d’assistance quel type de comportement de complétion automatique attendre, afin que l’utilisateur puisse anticiper si la suggestion se trouve dans la saisie elle-même, dans une liste popup, ou les deux.

Ne le placez pas sur un <input type="text"> natif sans mécanisme de suggestion — il n’y a rien à annoncer.

Cet attribut est souvent confondu avec l’attribut HTML autocomplete. Ils sont sans rapport. L’attribut HTML autocomplete ("email", "current-password", "street-address", …) indique au navigateur comment remplir le champ. aria-autocomplete indique aux technologies d’assistance quel pattern d’interface le développeur a implémenté. Les deux peuvent figurer sur la même saisie sans conflit.

Comportement

Accepte quatre valeurs :

• "none" — la valeur par défaut. La zone de texte ne complète pas automatiquement. Il est généralement inutile de le définir explicitement.
• "inline" — à mesure que l’utilisateur saisit, le texte suggéré est ajouté à la saisie elle-même, généralement sélectionné afin que la prochaine frappe puisse l’écraser.
• "list" — les suggestions apparaissent dans un popup distinct (généralement un role="listbox"). La valeur de la saisie ne change pas automatiquement.
• "both" — les deux à la fois : la liste popup est visible et la meilleure suggestion est intégrée dans la saisie.

Utilisez la valeur qui correspond à ce que votre implémentation fait réellement. Si votre combobox affiche une liste déroulante d’options mais ne modifie pas la saisie à mesure que l’utilisateur tape, c’est "list", pas "both".

Erreurs courantes

• Le confondre avec l’attribut HTML autocomplete. Ils se ressemblent, font des choses différentes, et vous avez généralement besoin des deux.
• Définir aria-autocomplete="list" sans également définir aria-controls pointant vers la listbox et aria-expanded pour suivre l’état ouvert/fermé.
• Définir aria-autocomplete="both" alors que la saisie ne se remplit jamais automatiquement. L’utilisateur entend l’affordance et attend une suggestion en ligne qui n’arrive jamais.
• Placer aria-autocomplete sur un contrôle qui n’est pas une zone de texte ou une combobox — par exemple, un bouton. L’attribut est ignoré.
• Oublier de gérer aria-activedescendant pour l’option mise en évidence dans la liste. L’utilisateur entend que des suggestions existent mais ne peut pas savoir laquelle est actuellement active.
• Coder en dur aria-autocomplete="list" sans vérifier la sortie des lecteurs d’écran. De nombreuses technologies d’assistance ont des patterns d’annonce incohérents, et le mauvais token produit une formulation confuse.

Exemple

<label for="city">City</label>
<input
  id="city"
  role="combobox"
  type="text"
  autocomplete="address-level2"
  aria-autocomplete="list"
  aria-controls="city-listbox"
  aria-expanded="true"
  aria-activedescendant="city-opt-3"
>
<ul id="city-listbox" role="listbox">
  <li id="city-opt-1" role="option">Bristol</li>
  <li id="city-opt-2" role="option">Birmingham</li>
  <li id="city-opt-3" role="option">Brighton</li>
</ul>