Search results page

[sarawilcox]

How to display a list of search results

See GOV.UK proposed pattern for Search results page.

The NHS website team has done a lot of work recently around search. Findings to be captured here.

Related issue: Accessible autocomplete.

[bharris-nhsd]

In nhs.uk search team we have been testing our search with users with a range of accessibility requirements, using different assistive techs and tools. This highlighted a few changes we could make to our search results page and no results page which would improve the accessibility for users.

I have prototyped some more generic search result and no result page patterns that include some of these recommendations, which we have added to our own backlog to apply to the nhs.uk search. These patterns could be applicable for any internal search that wants to direct users to a page with a list of linked results, and when there are no results returned.

Search results

Changes from recent research

Wrap result links in H2 tag
Wrap the linked titles in search results with a H2 tag (nhsuk-heading-s). This enables screen‑reader users to navigate the page using either link navigation (Tab) or heading navigation (H).

Because users can navigate by heading in Google, we assume this is an expected behaviour, and it was also observed in our own testing. Adding the H2 tag also aligns search‑result structure with other linked headings in the design system, such as those used on cards.

Include the number of pages within the number of results
We observed some users of screen readers who did not proceed past the end of the results list, as they assumed the list end indicated the end of the content. They expressed that they would find it clearer if the page number was indicated earlier on.

No results

Changes from recent research

Include a result count of 0

Some screen readers users skipped the H1 of the page and navigated straight to the search landmark after completing a search. By skipping the H1 they had missed information about there being no results. They would then arrow down from the search input expecting to find results, which would cause confusion (the presence of the h2 from the previous design accounted for this but has been removed to address a different issue, see below).

By including a 0 number of results returned, we can make this clear to users who skip the page heading, and keep the pattern more consistent with the results page.

Headings clarified and updated to match page title
The previous no results page title (visible in the browser tab) was 'No results for [search term]', but the H1 of the page would be 'Search results for [search term], and there was then an addition heading, H2 under the search bar 'No results found for [search term].

This meant:

• The page title and page heading did not match
• Screen reader users would need to navigate all the way to the H2 before being told no results were returned
• If a blank search were entered, the page title would make no grammatical sense. Formerly 'Search results for', but is now 'No results'

The H2 has been removed and the H1 has been updated to match the page title and communicate the no result status sooner.

Old no results page from nhs.uk internal search