Skip to content
10 changes: 10 additions & 0 deletions src/en/articles/search-results-page/index.njk
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
---
title: "Search results page"
abstract: "Best practices for site search results."
titleBeforeTag: true
date: "2025-10-31"
tags:
- component
---

<h2>TO BE COMPLETED</h2>
11 changes: 6 additions & 5 deletions src/fr/articles/page-resultats-recherche/index.njk
Original file line number Diff line number Diff line change
@@ -1,17 +1,18 @@
---
r---
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
r---
---

title: "Page de résultats de recherche"
abstract: "Bonnes pratiques pour les résultats de recherche dans un site."
titleBeforeTag: true
date: "2018-01-10"
updateDate: "2025-10-30"
tags:
- component
---

<h2>Préambule</h2>
<p>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.</p>
<p>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, ainsi qu'un formulaire qui, lorsqu'il est validé avec le terme recherché, permet d'aller sur cette page dédiée.</p>
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
<p>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, ainsi qu'un formulaire qui, lorsqu'il est validé avec le terme recherché, permet d'aller sur cette page dédiée.</p>
<p>La recherche sur le site doit de préférence être une page 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, ainsi qu'un formulaire qui, lorsqu'il est validé avec le terme recherché, permet d'aller sur cette page dédiée.</p>


<h2>Le formulaire de recherche</h2>
<p>Dans cet exemple, nous avons utilisé <a href="http://boosted.orange.com/">la librairie Boosted</a>. Celle-ci permet d’obtenir des formulaires dont le design est conforme à la charte Orange. </p>
<p>Dans cet exemple, nous avons utilisé <a href="http://boosted.orange.com/">la bibliothèque Boosted</a>. Celle-ci permet d’obtenir des formulaires dont le design est conforme à la charte Orange. </p>
<p>Pour une recherche sur le site, il faut ajouter le <code>role="search"</code> afin d'assurer une meilleure identification de la région de recherche, comme ceci&nbsp;: <br />
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
<p>Pour une recherche sur le site, il faut ajouter le <code>role="search"</code> afin d'assurer une meilleure identification de la région de recherche, comme ceci&nbsp;: <br />
<p>Pour une recherche sur le site, il faut ajouter le <code>role="search"</code> afin d'assurer une meilleure identification de la région de recherche, comme ceci&nbsp;: <br />

<!-- Code du form de recherche -->
<pre><code class="html">
Expand Down Expand Up @@ -52,7 +53,7 @@ tags:
<p>Par exemple, "2 résultats pour..... 'Fibre' - Orange.com" </p>

<h3>Chargement et affichage du résultat de la recherche</h3>
<p>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.</p>
<p>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.</p>
<p>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.</p>
<p>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.</p>
<p>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'<abbr>ARIA</abbr>, le <code>role="alert"</code> permettra une lecture dynamique du contenu de l'élément au <abbr>AT</abbr>, sachant que nous rechargerons à chaque recherche cette partie de page (le <code>role="alert"</code> n'étant lu qu'une fois à la différence de <code>aria-live="true"</code>).</p>
Expand All @@ -79,7 +80,7 @@ tags:
</ul>
</p>
<p>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.</p>
<p>Remarque, il est souhaitable de mettre en emphase visuelle (surligné, souligné...) et sémantique (<code>em</code>, <code>strong</code>...) le terme recherché dans les résultats affichés !</p>
<p>Remarque, il est souhaitable de mettre en emphase visuelle (surligné, souligné...) et sémantique (<code>mark</code>) le terme recherché dans les résultats affichés !</p>

<h3>La pagination</h3>
<p>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.
Expand Down