Usage

Use hero search for sites with large volumes of content where the primary navigation of users is via search. It can also be used when research has shown that users prefer to search rather than browse by navigation.

Use the suggested search links to provide access to popular searches. This may update dynamically based on popular search queries if the business logic is in place, or manually managed through a content management system.

When to avoid

Do not use on very small sites or sites with minimal content, consider hero banner.

How this component works

Placement

The hero search is placed in a prominent position at the top of a page, predominately on the homepage. However it can also be placed at the top of directories, libraries, or lists.

Search results

By default, search results should be sorted by relevance. If there is a user need, offer a sort function to allow users to order the results based on supplementary criteria.

When displaying results, consider what information is important to the user and display what they require to make an informed decision.

Do:

• keep the original text in the input field. This facilitates the user's action if they want to make a new search with some modifications in the input
• show the number of results returned
• where possible, bold the matching keyword or term in the result description
• use pagination when more than 10 results are returned
• categorise the search results if they come from different areas (eg. docs, services, apps, tutorials, blogs)
• display a clear message when no results are found and offer other search suggestions whenever possible
• have smart algorithms that can search for similar terms or can search even with misspelled words

Accessibility

All components are responsive and designed to comply with WCAG 2.2 AA accessibility standards. Full compliance depends on using and configuring the components correctly.

Ensuring compliance through usage

Redundant entry

To ensure WCAG 2.2 AA compliance for a hero site search input component, proper usage and configuration are key. While the component provides an accessible structure, it's essential to retain previously entered search terms or suggestions if a user returns to the page or refines their search. Ensure the input field maintains a clear label, along with guidance on how to effectively use the search function, such as placeholder text or assistive instructions. Users should be able to modify or correct their search query without needing to start over.

Adhering to these practices provides a seamless, accessible experience that aligns with WCAG standards.