Parmi les éléments centraux de nombreuses interfaces, la barre de recherche joue un rôle essentiel dans la facilitation de l’accès à l’information recherchée. Cependant, pour que cet outil soit véritablement efficace, il est primordial de le concevoir de manière à ce qu’il soit accessible à tous les internautes, y compris aux personnes souffrant de handicaps ou des limitations. Des solutions d’accessibilité spécifiques existent pour garantir une expérience optimale pour tous.
Moteur de recherche interne
Définition selon le RGAA
« Moteur de recherche (interne à un site web) : Zone donnant accès directement (formulaire) ou indirectement (élément d’interface donnant accès au formulaire) au moteur de recherche qui permet d’effectuer des recherches sur les contenus de l’ensemble du site. »
Une barre de recherche accessible
Problématique
Les utilisateurs malvoyants, par exemple, dépendent largement des lecteurs d’écran pour naviguer sur le web. Par conséquent, il est important de créer une barre de recherche qui soit compatible avec ces technologies d’assistance, en fournissant des étiquettes explicites et des indicateurs clairs pour aider à la compréhension de la fonction de recherche.
De même, les personnes ayant des limitations motrices pourraient avoir du mal à utiliser une souris, d’où l’importance de rendre la barre de recherche accessible via les claviers.
Sur de nombreux sites Web, les barres de recherche sont utilisées comme un moyen de naviguer sur le site et de trouver ainsi une réponse rapide à une requête très spécifique, sans avoir à parcourir tout le contenu.
Faire un un lien d’évitement vers la barre de recherche de votre site peut même être conseillé si c’est un moyen de simplifier l’expérience des utilisateurs accessibles.
Les meilleures pratiques pour créer une barre de recherche accessible
Il est nécessaire de configurer une barre de recherche dans un formulaire <form></form>.
En utilisant un bouton « Envoyer » ou « Recherche », on réduit le nombre de frappes nécessaires pour utiliser le formulaire de recherche.
Il est important d’ajouter également un attribut ARIA de type : role=’search’ dans le formulaire. Le rôle « search » est utilisé pour identifier la fonctionnalité de recherche.
Par exemple :
<form role= »search »> ……</form>
Afin qu’un utilisateur de technologie d’assistance comprenne le but de ce landmark, le code doit fournir une étiquette.
Le code plus complet d’un formulaire de recherche
<form class= »Bblue » role= »search » aria-label= »Rechercher sur l’ensemble du site »>
<input class= »F-control » type= »search » placeholder= »saisissez les mots clé de votre recherche » aria-label= »Rechercher sur le site web »>
<button class= »btn btn-primary » type= »submit »>Rechercher</button>
</form>
NOTE: si plusieurs formulaires de recherche s’affichent dans la page web, nommer chaque formulaire avec un aria-label ou aria-labelledby différents pour pouvoir les différencier.
La page des résultats
Lorsque l’utilisateur a effectué sa recherche sur le site, la page de résultats doit être clairement identifiée en modifiant le titre de la page (la balise <title> dans le code HTML) pour inclure des informations importantes.
Les éléments qui devraient être mentionnés sont les suivants :
- Indiquer que vous êtes sur la page de résultats de recherche. Cela informe les utilisateurs qu’ils sont actuellement sur la page qui affiche les résultats de leur recherche.
- Le titre doit inclure le terme ou les mots-clés que l’utilisateur a recherchés. Cela permet aux utilisateurs de vérifier immédiatement si la recherche a été effectuée correctement et s’ils ont atterri sur la bonne page.
- Le titre doit également indiquer combien de résultats ont été trouvés pour la recherche spécifiée. Cela donne aux utilisateurs une idée du volume de résultats et de l’étendue de leur recherche.
- Le nom du site doit apparaitre, ajoutant ainsi une identification supplémentaire.
L’objectif principal est de fournir aux utilisateurs des informations claires et concises dès qu’ils accèdent à la page de résultats de recherche, afin qu’ils comprennent rapidement les informations qui s’affichent et qu’ils puissent naviguer plus efficacement dans les résultats.
L’affichage des résultats
Une fois la recherche lancée et les résultats obtenus, il est essentiel de les afficher de manière claire et accessible pour les utilisateurs.
Quelques bonnes pratiques :
- Afficher les résultats sous forme d’une liste bien structurée, où chaque élément représente un résultat distinct.
- Chaque élément de la liste doit avoir un titre significatif qui décrit brièvement le résultat, suivi d’une description pertinente pour fournir plus de contexte.
- Assurez-vous que les titres des résultats sont des liens cliquables, ce qui permet aux utilisateurs d’accéder directement à la page associée au résultat.
Les messages d’erreur
Lorsque des erreurs se produisent, il est utile de les répertorier en haut de la page, avant le formulaire. La liste doit avoir un titre distinctif afin qu’elle soit facile à identifier.
Chaque erreur répertoriée doit :
- Référencez l’étiquette du contrôle de formulaire correspondant, pour aider l’utilisateur à reconnaître le contrôle ;
- Fournissez une description concise de l’erreur d’une manière facile à comprendre par tout le monde ;
- Fournir une indication sur la façon de corriger les erreurs et rappeler aux utilisateurs toutes les exigences…
- Incluez un lien dans la page vers le contrôle de formulaire correspondant pour faciliter l’accès aux utilisateurs.
……. Source : w3.org/
FAQ
Q: Le formulaire de recherche utilise-t-il l’attribut aria-label ou aria-labelledby pour fournir une étiquette alternative si un label visuel n’est pas disponible ?
R: Oui pour aider les utilisateurs de lecteurs d’écran à comprendre le but du champ de recherche.
Q: Le bouton « Envoyer » (Submit) du formulaire est-il correctement étiqueté avec un label ou l’attribut aria-label pour indiquer son but ?
R: Les utilisateurs savent que ce bouton soumet le formulaire de recherche.
Q: Le formulaire de recherche est-il clairement visible à l’écran, notamment pour les utilisateurs qui naviguent à l’aide du clavier ?
R: Veillez à ce que le focus soit correctement géré et que les éléments du formulaire soient facilement accessibles.
Q: Le texte d’erreur s’affiche-t-il correctement lorsque l’utilisateur soumet le formulaire avec une recherche invalide ou vide ?
R: Le message d’erreur doit être clair et facilement compréhensible pour indiquer comment corriger l’erreur.
Q: Le formulaire de recherche utilise-t-il des couleurs ou des indicateurs visuels seuls pour signaler les erreurs ?
R: Assurez-vous que les informations critiques, comme les erreurs, sont également disponibles sous forme de texte pour les utilisateurs qui ne peuvent pas voir les couleurs ou les éléments visuels.
Conclusion
En conclusion, rendre les formulaires de recherche accessibles est une étape essentielle pour offrir une expérience utilisateur inclusive et conviviale. En appliquant des bonnes pratiques d’accessibilité, telles que l’utilisation d’étiquettes appropriées, d’attributs ARIA et de messages d’erreur clairs, nous pouvons garantir que tous les utilisateurs, y compris ceux ayant des limitations visuelles ou d’autres handicaps, pourront interagir facilement avec le formulaire.
Un formulaire de recherche accessible doit fournir des informations claires sur son but, guider les utilisateurs tout au long du processus de recherche et signaler les erreurs de manière non ambigüe.
En adoptant une approche inclusive pour la conception de formulaires de recherche, nous pouvons créer des interfaces utilisateur qui respectent la diversité des utilisateurs et qui offrent une expérience positive pour tous. Investir dans l’accessibilité est un moyen de favoriser l’égalité des chances en ligne et de créer des produits et services numériques plus accessibles, permettant ainsi à chacun de participer pleinement à la société numérique.