Page de résultats de recherche

Préambule

La recherche sur le site doit de préférence être une page dédiée spécifique. Pour y accéder, on peut mettre en place dans le menu principal, dans le pied de page..., un lien "Rechercher" ou un icône de loupe qui permet d'aller sur cette page dédiée.

Le formulaire de recherche

Dans cet exemple, nous avons utilisé la librairie Boosted. Celle-ci permet d’obtenir des formulaires dont le design est conforme à la charte Orange.

Pour une recherche sur le site, il faut ajouter le role="search" afin d'assurer une meilleure identification de la région de recherche, comme ceci :

      <form class="d-flex" role="search">
        <input class="form-control me-2" type="search" placeholder="Rechercher" aria-label="Rechercher">
        <button class="btn btn-primary" type="submit">Rechercher</button>
      </form>

Nota bene : bien sûr, il est toujours mieux de privilégier une étiquette de champ de formulaire visible pour tout utilisateur, cependant, lorsqu'il n'y a qu'un champ de recherche comme seul élément de formulaire dans la page, c'est envisageable !

Attention : lorsque plusieurs formulaires de recherche existent dans la page, il faut nommer spécifiquement chaque role="search" avec un aria-label ou aria-labelledby :

      <form class="d-flex" role="search" aria-label="Recherche sur tout le site">
        <input class="form-control me-2" type="search" placeholder="Rechercher dans le site" aria-label="Rechercher dans le site">
        <button class="btn btn-primary" type="submit">Rechercher</button>
      </form>
      ...
      <form class="d-flex" role="search" aria-labelledby="actu">
        <h2 id="actu">Rechercher dans actualité</h2>
        <input class="form-control me-2" type="search" placeholder="Rechercher les actualités" aria-label="Rechercher une actu">
        <button class="btn btn-primary" type="submit">Rechercher des actus</button>
      </form>

Affichage des résultats

Le titre de page

Une fois la recherche lancée, en premier lieu, le titre de page ( title) doit être modifié pour mentionner :

• le fait que nous sommes sur une page de résultats de recherche
• le terme recherché
• le nombre total de résultats

Par exemple, "2 résultats pour..... 'Fibre' - Orange.com"

Chargement et affichage du résultat de la recherche

Dans certains cas il semble pratique pour les utilisateurs de privilégier un rechargement asynchrone des résultats afin de ne pas charger une nouvelle page, notez tout de même que cela peut être perturbant pour certains utilisateurs.

Quoi qu'il en soit, le contenu principal de la page doit afficher les résultats trouvés. Ils doivent se situer juste après le formulaire de recherche afin d'être l'élément suivant de la navigation clavier, juste après le bouton d'envoi de la recherche.

Il faut faire précéder les résultats d'un titre de rubrique, reprenant le terme recherché et le nombre total de résultats et, si besoin, en cas de pagination, le nombre de résultats affichés dans la page.

Ce titre de rubrique doit être notifié aux utilisateurs, y compris ceux utilisant des aides techniques et en particulier, des lecteurs d'écran. Pour cela, nous utilisons de l'ARIA, le role="alert" permettra une lecture dynamique du contenu de l'élément au AT, sachant que nous rechargerons à chaque recherche cette partie de page (le role="alert" n'étant lu qu'une fois à la différence de aria-live="true").

...
  <form class="d-flex" role="search">
    <input class="form-control me-2" type="search" placeholder="Rechercher" aria-label="Rechercher dans le site">
    <button class="btn btn-primary" type="submit">Rechercher</button>
  </form>
  <h2 role="alert">
    15 résultats, 5 affichés pour "Fibre" 
  </h2>
...

Nota bene  : la pagination des résultats de recherche est une bonne option pour éviter des pages de résultats trop longues. Cependant, il ne faut pas utiliser le chargement dynamique infini en particulier au scroll, car il est souvent inaccessible et peu utilisable.

L'affichage et la sémantique des résultats

Sémantiquement, les résultats de la recherche à afficher sont, soit une liste (ordonnée ou pas), soit un tableau de données. Si des filtres, par exemple, permettent de classer les résultats par pertinence, nombre d'occurrences du terme recherché, par date... alors il faudra choisir une liste ordonnée ol ou signifier cet ordre de tri dans le tableau de résultats. Le choix de la sémantique des résultats va dépendre de plusieurs critères :

• le type de données à afficher, par exemple, si les résultats sont une liste de titre d'articles et un chapeau ou un résumé, la liste semble adaptée.
• les données à afficher par résultat, par exemple, si ce sont des produits avec le nom, le prix, des détails... le tableau de données sera préféré du fait de la structure de données plus complexe.

Pour ce qui est de la sémantique de chaque résultat, le titre de l'article, le nom du produit... doivent être un titre de rubrique, le chapeau ou le résumé, les détails... mis dans un paragraphe ou dans une cellule de tableau de données.

Remarque, il est souhaitable de mettre en emphase visuelle (surligné, souligné...) et sémantique (em, strong...) le terme recherché dans les résultats affichés !

La pagination

Lorsque le nombre de résultats dépasse la dizaine, il est utile de paginer ces résultats. Pour faciliter la navigation, la bonne pratique est de mettre un titre de rubrique de même niveau que celui de chaque résultat positionné au début du composant de pagination afin de l'identifier.

...
  <h2 role="alert">
    15 résultats, 5 affichés pour "Fibre" 
  </h2>
...
  <h3>Déploiement de la <strong>fibre</strong> en 2021 en Rhône-Alpes chez Orange</h2>
  <p>Orange prévoit un déploiement accéléré de la <strong>fibre</strong> dans le zones blanches...</p>
...
  <nav aria-labelledby="pagination">
  <h3 id="pagination" class="visually-hidden">Pagination des résultats de recherche </h3>
  <ul class="pagination">
...