Search result page

Introduction

Site search should be implemented as a dedicated page. To access it, you can add a "Search" link or a magnifying glass icon in the main menu, footer, or a form that, when validated with the search term, redirects to this dedicated page.

The Search Form

In this example, we used the Boosted Library, which provides forms that comply with Orange's design guidelines.

To perform a search on the site, you must add role="search" to ensure better identification of the search region, like this:

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

Please note: It's always better to use a visible form field label for all users, but when there's only one search field as the sole form element on the page, it is sufficient on its own.

Important: When multiple search forms exist on the same page, each role="search" must be specifically named with an aria-label or aria-labelledby:

      <form class="d-flex" role="search" aria-label="Search entire site">
        <input class="form-control me-2" type="search" placeholder="Search the site" aria-label="Search the site">
        <button class="btn btn-primary" type="submit">Search</button>
      </form>
      ...
      <form class="d-flex" role="search" aria-labelledby="news">
        <h2 id="actu">Search in news</h2>
        <input class="form-control me-2" type="search" placeholder="Seach news" aria-label="Seach news">
        <button class="btn btn-primary" type="submit">Search news</button>
      </form>

Displaying Results

Page Title

Once the search is launched, first of all, the page title (title) should be updated to indicate:

• That the page is a search results page.
• The search term.
• The total number of results.

For example: "2 results for ..... 'Fiber' - Orange.com"

Loading and Displaying Search Results

In some cases, it seems convenient for users to prefer asynchronous result reloading to avoid loading a new page. However, note that this can be disruptive for some users.

In any cases, the main content of the page must display the results found. These must be placed immediately after the search form so that they are the next element in keyboard navigation, right after the search submit button

The results must be preceded by a section heading that includes the search term and the total number of results. If pagination is used, it should also include the number of results displayed on the current page.

This section heading must be notified to users, including those using assistive technologies, particularly screen readers. To achieve this, we use ARIA: role="alert" will enable dynamic reading of the element's content by AT (assistive technologies), given that we reload this page section with each search (note that role="alert" is read only once, unlike aria-live="true").

...
  <form class="d-flex" role="search">
    <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search the site">
    <button class="btn btn-primary" type="submit">Search</button>
  </form>
  <h2 role="alert">
    15 results, 5 displayed for "Fiber" 
  </h2>
...

Please note: Paginating of search results is a good option to avoid overly long result pages. However, infinite dynamic loading, especially when scrolling, as it is often inaccessible and difficult to use.

Result Display and Semantics

Semantically, search results should be displayed as either a list (ordered or unordered) or a data table. If filters allow sorting results by relevance, number of search term occurrences, date, etc., then you should choose an ordered list ol or indicate this sort order in the results table. The choice of result semantics depends on several criteria:

• Type of data to display: For example, if results are a list of article titles with lead paragraphs or summaries, a list structure is appropriate.
• Data to display per result: For example, if these are products with name, price, details, etc., a data table would be preferred due to the more complex data structure.

Regarding the semantics of each result, the article title, product name, etc., should be a section heading, while the lead paragraph, summary, details, etc., should be placed in a paragraph or data table cell.

Note: It's recommended to highlight the search term in the displayed results both visually (highlighted, underlined, etc.) and semantically (using em, strong, etc.)!

Pagination

When the number of results exceeds 10, it's convenient to paginate these results. To make navigation easier, the best practice is to add a section heading at the same level as each result heading, positioned at the beginning of the pagination component in order to identify it.

...
  <h2 role="alert">
    15 results, 5 displayed for "Fiber" 
  </h2>
...
  <h3><strong>Fiber</strong> deployment in 2021 in Rhône-Alpes by Orange</h2>
  <p>Orange plans an accelerated deployment of <strong>fiber</strong> in uncovered areas...</p>
...
  <nav aria-labelledby="pagination">
  <h3 id="pagination" class="visually-hidden">Search results pagination</h3>
  <ul class="pagination">
...