Search

Label set

• The search input should have a clear label describing the purpose of the input.
• Search parameters should be clearly provided to the user using appropriate hint text if necessary.

Requirements

Users should be able to:

• Navigate to and interact with the search using assistive technology.
• Understand the purpose of the search through visible and programmatically associated labels.
• Interact with search results.

Interactions

Keyboard interactions

• Tab. Moves focus from the previous interactive element on the page to the search field.
• Users should be able to type a search term into the input.
• Pressing tab again moves focus from the search field to the search button.
• Enter or Space. Submits and initiates the search.
• Escape. Clears the search field.

Design considerations

• The search should always have an associated search button to allow multiple types of input for all users.
• Use hint text to provide search instructions, as some users may be disoriented when the placeholder text disappears as they type.
• A 'clear' button should be provided which allows mouse users to quickly clear the search field.
• The target size for this button should be 24x24px to allow users to easily target the button.
• This button should not be keyboard focusable. 

Development considerations

• Use a visible label for the search field, programmatically associated with the input using the for attribute.
• Any hint text should be programmatically associated with the search field using aria-describedby.
• Do not use role=”searchbox” as it causes redundant information to be read out by screen readers.
• Use instead as it's more concise.