You appear to be using an unsupported browser, and it may not be able to display this site properly. You may wish to upgrade your browser.
Information
We use cookies to collect anonymous data to help us improve your site browsing
experience.
Click 'Accept all cookies' to agree to all cookies that collect anonymous data.
To only allow the cookies that make the site work, click 'Use essential cookies only.' Visit 'Set cookie preferences' to control specific cookies.
This is currently experimental because we need more research to validate it.
A list displaying all the search results found after a user has made a search.
About this pattern
This pattern presents a set of search results which may appear over multiple pages.
Within the pattern:
search results may contain a combination of different search result layout types
users can choose the page they want by picking a page number at the bottom of a search results page, starting at page 1
each individual page contains 10 search results
the page number the user is on is always highlighted
any links to related search terms may appear at the end
When there are no results found
If a user has searched for something and there are no results to display, give the user some hints for how to improve their search.
When the search term may be misspelled
If a user has searched for something that is identified as a potential misspelling, add the corrected spelling of the term to the search submission which may produce a wider set of search results.
Give the user the option to perform the search again with only the suggested corrected spelling or only their original search term.
When additional results are promoted
Specific results can be placed at the top of the search results and labelled to show that they are distinct from the others.
Promoted results do not count towards the total number of results.
If search results span multiple pages then promoted results should only appear on page one.
More user research is needed on whether the purpose of promoted results is understood by users.
Displaying results over multiple pages
When using the pagination component, to split results over multiple pages, some additional configuration should be implemented.
On the first page of results
The number of results and the search term should be shown, for example 87 results for search term
The attribute data-total, applied to the ds_search-results__list list element, contains the total number of results and is used to calculate the relative position of each result within the tracking attribute script
On subsequent result pages
The position within the set of results should should shown alongside the total number and search term, for example Showing 21 to 30 of 87 results for search term
The additional attribute start, applied to the ds_search-results__list list element, contains the starting position for the current displayed results within the set of results and is by the tracking attribute script
The design of the pattern helps the user to browse their search results, or to change their search term if the search results do not meet their needs.
Website analytics
Many analytics tools offer out of the box tracking for site search. The setup below covers more complex tracking to understand which search result was interacted with from a search results page, and how additional interactive elements are being used.
Search results should be tracked in order to understand if internal search engines are providing useful results to users. Tracking works through the query being available from the page URL, the click text, click URL and a data attribute showing the result’s position.
If a spelling suggestion is provided, clicks to the suggested search terms are tracked through the page URL (which contains the original search query), the click text, the click URL and a data attribute.
Pagination is tracked using the data attribute with the number of the results page clicked.
Promoted results are tracked using the page URL, the click text, click URL and a data attribute showing the result’s position in the list of promoted results.
Suggested related search terms are tracked through the page URL (which contains the original search query), the click text, the click URL and a data attribute.
Where the site search is being used on a single-page app or it is not possible to put the search query in to the URL, the query could be included in the dataLayer for the page.
Accessibility
Suggestions for mispellings use WAI-ARIA attributes to give more context for screen reader users. They include:
link text for each suggestion being overwritten with a more descriptive aria-label
text hidden where it would cause duplication with the links
suggestions being wrapped in a nav element with a descriptive aria-label Supporting evidence: mygov.scot accessibility review, March 2019.
Pagination of search result pages may be implemented in a way that only refreshes part of the page content, rather than the entire page. In these situations it may be difficult for users of assistive technology to know when they have changed page. To help in this situation:
an aria-live attribute is applied to the heading that describes the total number of results, so If this heading content then dynamically changes then the new position in the list of results will be announced
focus should be applied to the beginning of the content that has been dynamically changed