enum Valeurs : inline,list,both,none

aria-autocomplete

Indique si la saisie dans un champ peut déclencher des suggestions d'autocomplétion, et comment elles sont présentées.

Description

aria-autocomplete décrit le comportement d’autocomplétion d’un champ de saisie :

  • none (défaut) — pas de suggestion automatique
  • inline — la suggestion complète le texte directement dans le champ
  • list — une liste déroulante de suggestions apparaît
  • both — suggestion inline ET liste déroulante

Syntaxe

<input type="text"
       role="combobox"
       aria-autocomplete="list"
       aria-expanded="false"
       aria-controls="suggestions" />

Exemples

Champ de recherche avec suggestions :

<label for="recherche">Rechercher une ville</label>
<input type="text"
       id="recherche"
       role="combobox"
       aria-autocomplete="list"
       aria-expanded="false"
       aria-haspopup="listbox"
       aria-controls="villes-liste" />
<ul id="villes-liste" role="listbox" hidden>
  <li role="option">Paris</li>
  <li role="option">Lyon</li>
  <li role="option">Marseille</li>
</ul>

Notes

Sur le champ de saisie uniquement : aria-autocomplete se pose sur l’élément combobox ou textbox, pas sur la liste de suggestions.

Combiner avec aria-expanded et aria-controls : pour décrire complètement l’état et la relation avec la liste de suggestions.

Différence avec autocomplete HTML : l’attribut HTML autocomplete contrôle le remplissage automatique par le navigateur (historique, gestionnaire de mots de passe). aria-autocomplete décrit le comportement du widget JavaScript.

Support navigateurs