ARIA : attribut aria-autocomplete

Description

La saisie semi-automatique (ou « auto-complétion ») est une fonctionnalité d'interface où des suggestions apparaissent au fur et à mesure que l'utilisateur·ice saisit du texte. Le texte suggéré pour compléter la valeur du champ apparaît dynamiquement après le curseur, et la suggestion devient la valeur si l'utilisateur·ice effectue une action (comme Tab) qui fait quitter la sélection du champ.

La propriété aria-autocomplete décrit le type de modèle d'interaction d'auto-complétion qu'une zone de saisie, une zone de recherche ou une boîte combinée utilisera pour aider dynamiquement à compléter la saisie. Elle distingue deux modèles principaux : le modèle en ligne (aria-autocomplete="inline"), qui présente une seule valeur prédite, et le modèle liste (aria-autocomplete="list"), qui présente une collection de valeurs possibles dans un élément séparé qui s'affiche à côté ou sous le champ, à la manière d'un <datalist>. Une troisième valeur, aria-autocomplete="both", est utilisée lorsque l'interface présente à la fois une liste et une valeur prédite. La valeur par défaut est none, ce qui signifie qu'aucune suggestion n'est proposée.

La propriété aria-autocomplete décrit uniquement le type de comportement prédictif pour les technologies d'assistance : elle ne fournit pas la fonctionnalité elle-même. L'auto-complétion réelle doit être implémentée avec des attributs HTML ou en JavaScript.

Si les suggestions proposées ne dépendent pas de la saisie de l'utilisateur·ice, il est préférable de ne pas activer l'auto-complétion. Par exemple, une zone de recherche affichant des recherches récentes non filtrées peut être utile à une équipe marketing, mais n'apporte rien à un·e utilisateur·ice de lecteur d'écran. Si l'expérience n'est pas utile pour les technologies d'assistance, il est probable qu'elle ne l'est pas non plus pour les autres utilisateur·ice·s.

Lors de l'implémentation de l'auto-complétion, assurez-vous que la partie suggérée de la valeur est présentée comme texte sélectionné, afin de distinguer la saisie de l'utilisateur·ice de la suggestion. Veillez à ce que, si la suggestion ne correspond pas à la valeur souhaitée, l'utilisateur·ice puisse facilement la supprimer ou la remplacer en continuant à saisir.

Si une liste de suggestions est affichée, la sélection DOM doit rester sur le champ de saisie pendant l'affichage de la liste.

• incluez aria-controls avec la valeur de l'identifiant de la liste de suggestions.
• ajoutez aria-haspopup correspondant au rôle de l'élément contenant la collection de suggestions.
• gérez la sélection si nécessaire, notamment avec aria-activedescendant si le conteneur de la collection le permet.
• utilisez l'état aria-expanded sur l'élément ayant le rôle combobox pour indiquer que la liste est affichée.

Si une suggestion de la liste est automatiquement acceptée lorsque le champ perd la sélection, la liste doit être contenue dans un rôle prenant en charge aria-activedescendant, et la valeur de aria-activedescendant sur le champ doit être ajustée dynamiquement pour référencer l'élément contenant la suggestion sélectionnée.

Valeurs

none (valeur par défaut)

Lors de la saisie, aucune suggestion automatique n'est affichée.

inline

aria-autocomplete="inline" : un texte suggérant une façon de compléter la saisie peut être inséré dynamiquement après le curseur.

list

aria-autocomplete="list" : lors de la saisie, un élément contenant une collection de valeurs pouvant compléter la saisie peut être affiché.

both

aria-autocomplete="both" : permet de proposer les deux modèles en même temps. Lors de la saisie, une liste de valeurs peut être affichée et, si c'est le cas, une valeur de la collection est automatiquement sélectionnée et le texte nécessaire pour compléter cette valeur apparaît après le curseur dans le champ.

Rôles associés

Utilisé dans les rôles :

• le rôle combobox
• le rôle textbox
• hérite du rôle searchbox

Spécifications

Voir aussi

• ARIA : rôle combobox
• ARIA : rôle textbox
• ARIA : rôle searchbox
• L'élément HTML <datalist> et l'attribut <input> list
• L'attribut ARIA aria-controls
• L'attribut ARIA aria-haspopup
• L'attribut ARIA aria-activedescendant
• L'attribut ARIA aria-expanded
• Exemple de boîte combinée éditable avec autocomplétion liste et en ligne ^(angl.)
• Event.ariaAutoComplete