Recherche semi-automatique

Guiding principle: Give users control.

Quand utiliser cette composante

La recherche semi-automatique suggère à l’utilisateur des recherches basées sur les caractères qu’il tape dans un champ de recherche.

Cela permet à l’utilisateur de naviguer parmi les recherches suggérées et lui donne un aperçu du contenu du site Web.

On parle aussi de recherche autosuggérée, de frappe continue, de recherche prédictive, de recherche à mesure de la frappe et de suggestions d’interrogation.

La mise en œuvre réussie de la recherche semi-automatique peut se traduire par :

• une baisse de la charge mentale de l’utilisateur pendant la frappe
• moins de fautes d’orthographe ou de saisie
• une navigation plus exacte

Quand faire des suggestions

Une liste de suggestions de recherche devrait s’afficher quand un utilisateur entre un caractère valide dans le champ de saisie.

Les caractères valides sont définis en fonction des paramètres de recherche de l’application. Les suggestions devraient apparaître ou changer à mesure que l’utilisateur ajoute ou supprime des caractères.

S’il n’y a pas de suggestions de recherche concordant avec la saisie de l’utilisateur, cachez la liste de type menu et laissez l’utilisateur effectuer une saisir manuelle.

Fonctionnalités de la composante

La composante de recherche semi-automatique inclut ce qui suit :

A. séparation entre la liste de type menu de suggestions et la zone de recherche
B. état de survol et actif pour chaque suggestion de recherche
C. suggestion de recherche avec le texte en gras qui complète la suggestion
D. liste de type menu avec un maximum de six suggestions de recherche
E. ombrage faisant contraster la liste de type menu de suggestions avec le fond de la page

Example

---

Cette composante n’inclut pas actuellement l’historique des recherches précédentes ou une recherche avec une portée catégorisée (par exemple « [rechercher terme] dans [catégorie] »).

États d’interaction avec le menu de recherche

Frappe active

Des suggestions de recherche devraient apparaître une fois que l’utilisateur saisit un caractère valide. Les suggestions varieront selon :

• ce que l’utilisateur tape
• le nombre de concordances dans le contenu du site

Survol et sélection

Les utilisateurs devraient pouvoir survoler la liste des suggestions de recherche sur leur bureau avec leur clavier ou leur souris.

Ils peuvent choisir une suggestion en cliquant dessus ou en appuyant sur la touche Entrée lorsqu’ils la survolant.

Le fait de choisir une suggestion déclenche la recherche, ce qui amène l’utilisateur à la page des résultats de la recherche pour le terme choisi.

Example - Hover state

---

Example - Active select state

---

Example - Selected and submitted search

---

La liste de type menu complète devrait toujours apparaître au-dessus du pli et être au centre de l’attention.

Pratiques exemplaires

Faire

• inclure jusqu’à quatre à six suggestions de recherche
• montrer les suggestions dès que l’utilisateur saisit le premier caractère valide
• suggérer des termes ou phrases courts et faciles à lire et à balayer
• mettre en gras la partie de la suggestion qui complète le texte saisi par l’utilisateur
• mettre en évidence la suggestion de recherche sélectionnée avec un état actif
• utiliser un fond de page blanc pour aider à montrer le contraste de la liste de menus
• pour une recherche basée sur les en-têtes, superposer une page assombrie sur la liste de type menu pour augmenter sa visibilité

Ne pas faire

• mettre en gras la portion de texte dans les suggestions qui concorde avec ce que l’utilisateur a tapé
• utiliser les barres de défilement dans la liste de type menu de suggestions
• ajouter des éléments visuels comme des icônes, du remplissage, des séparateurs ou des couleurs de rangées qui alternent
• faire plus de six suggestions — les utilisateurs ignoreront les suggestions, ce qui ralentira le processus de recherche

Faire

---

Ne pas faire

---

Ne pas faire

---

Spécifications techniques

Utilisation

Pour utiliser la composante de recherche semi-automatique dans votre projet, voici les étapes à suivre :

1. Téléchargez le fichier ontario-search.js à partir du référentiel.
2. Importez le fichier ontario-search.js dans votre projet en utilisant une étiquette <script> (par exemple <script src="path/to/ontario-search.js"></script>)
3. Déclarez votre liste de suggestions sur mesure comme un éventail à l’intérieur de la variable customSuggestions dans le fichier JavaScript.
4. Appelez la fonction addSuggestions et ajoutez les customSuggestions en tant qu’argument à la fonction. Le fait d’ajouter l’appel de la fonction addSuggestions(customSuggestions) dans la fonction de charge fait en sorte que les suggestions personnalisées se chargent correctement dans la composante semi-automatique lorsque la page se charge entièrement.

Exemple

L’exemple montre une façon de mettre en place la composante. Vous pouvez remplacer l’exemple par votre propre code.

 window.addEventListener('load', () => {
       const customSuggestions = [
    "Suggestion 1",
           "Suggestion 2",
           "Suggestion 3",
       ];
       addSuggestions(customSuggestions);
 });

Accessibilité

Les utilisateurs peuvent interagir de bien des façons avec la composante semi-automatique :

• les flèches vers le haut et le bas déplacent l’attention entre les éléments quand la liste de menus de suggestions est agrandie
• le fait d’appuyer sur la touche d’entrée ou de cliquer sur la souris sélectionne la suggestion de recherche, ce qui l’ajoute au champ de recherche et termine la recherche
• la touche esc ferme le menu déroulant

Focus Management

La composante de recherche semi-automatique a un système de gestion de la focalisation intégré qui mettra en évidence les suggestions à mesure que l’utilisateur navigue au travers avec son clavier (flèches vers le haut et le bas) ou sa souris (clics et survol).

Le système de gestion de la focalisation répond et s’adapte à l’interaction choisie par l’utilisateur. Cela signifie que l’utilisateur peut alterner entre son clavier et sa souris pour choisir une suggestion.

Attributes

En langage HTML, le rôle d’une zone de recherche est souvent désigné comme une zone de liste déroulante à des fins d’accessibilité parce qu’elle combine les caractéristiques d’un champ de saisie de texte et d’un menu déroulant. Une zone de liste déroulante permet aux utilisateurs d’interagir avec elle au moyen du clavier et de la souris. Cela donne la flexibilité pour des préférences en termes d’interaction et besoins d’accessibilité différents.

Aria-Controls

Utilisez aria-controls pour établir un lien entre un champ de saisie et l’élément qu’il influence ou possède. Cet attribut permet aux technologies d’aide de comprendre la relation entre le champ d’entrée et son contenu associé.

Aria-autocomplete

La propriété aria-autocomplete est cruciale pour définir le comportement de la fonctionnalité de recherche semi-automatique. Pour la recherche semi-automatique, utilisez le modèle de liste (aria-autocomplete=”list”). Il présente une collection de valeurs possibles dans un élément distinct qui apparaît sous le champ de saisie de la recherche, ce qui aide les utilisateurs à choisir une suggestion.

Autocomplete

Réglez l’attribut semi-automatique à faux afin que la fonctionnalité semi-automatique du navigateur n’interfère pas avec la composante semi-automatique du système de conception.

Aria-haspopup

Incluez aria-haspopup=”list” pour montrer que le champ de saisie de la recherche déclenche une liste avec des suggestions.

Aria-expanded

Utilisez l’état aria-expanded dans le champ de saisie de la recherche pour communiquer l’état d’affichage de la liste de type menu de suggestions.

Exemple

<input
    type="search"
    name="search"
    id=""
    autocomplete="off"
    aria-autocomplete="list"
    aria-controls="suggestion-list"
    aria-expanded="false"
    role="combobox"
    class="ontario-input ontario-search__input"
/>

L’exemple montre le champ de saisie de la recherche configuré avec aria-autocomplete=”list” et aria-haspopup=”list”. Cela indique qu’il fournit une liste de suggestions semi-automatiques, qui s’affiche dans une fenêtre distincte.

Pour montrer que le champ de saisie gère la liste de suggestions semi-automatiques :

• mettez aria-controls=”suggestion-list” dans le champ de saisie de la recherche pour montrer qu’il contrôle la liste de type menu de suggestions avec l’identifiant "suggestion-list"
• structurez l’élément flash associé comment un <ul> contenant des options de suggestions individuelles, représentées comme des éléments <li>
• donne à chaque suggestion <li> un élément role="option" pour indiquer son rôle comme option dans la liste

En outre, mettez aria-expanded="false" dans le champ de saisie de la recherche pour montrer que la liste de type menu de suggestions est actuellement cachée ou réduite. Quand la liste de type menu de suggestions est agrandie, aria-expanded devrait changer d’une manière dynamique à "true".