Search bar

BETA

Easy to use for everyone

Placing a close button within the search field when input has been added enhances the accessibility of the component, allowing users to easily remove input and correct their search query without performing multiple actions. Including a visible search button as well as having an associated event with the input field provides multiple ways to search using the keyboard as well as the mouse.

The search variant that shows suggested options provides additional help from an accessibility perspective as it allows users to perform searches quickly without needing to fully enter their input. This is a form of autocomplete and has been made accessible using the keyboard, including Home and End , as well as the Esc key. This is also configured so when there isn’t enough space in the viewport for the dropdown list to fully display beneath the dropdown bar, it's displayed above the input bar.

The focus order through the search field internal elements is as follows:

The search field and its option list.
The clear button (if visible).
The search button (if enabled).

Keyboard users can move focus through options in the drop list using the arrow keys, whilst they can still type into the field to change their search term.

A graphic highlighting the tab order between elements in a search field. The search input is annotated with a '1', the close buttons with a '2', and the search button with a '3'.

Focus is applied first to the input field and its option list, then moves to the close button if visible and search button.

The first item in the drop list is focused by default so that if a user clicked the search button or the enter button, the associated action with that option would be triggered. This might be a link to a page, or filling the search field with the selected suggestion.

For Assistive Technology

When focus is received on the component, the screen-reader will announce a hint explaining how you can move up and down in the dropdown list using the up / down arrow keys.

When the search is complete, anaria-live announcement is used to announce the number of results in the list.

Based on

The search bar component has been based on the following resources:

Best practices for the accessibility of an autocompletion component , Orange, accessed July 2022.
Accessible Search Form , a11ymatters, accessed July 2022.
ARIA: search role , MDN web docs, accessed July 2022.

Testing

We've tested this component against WCAG 2.2 Level AA. It's been tested with NVDA and VoiceOver, and several different users with different interaction methods.

Last reviewed 15 April 2024 .