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.

Background image options

This component supports two methods for adding a background image:

• CSS background image: The background image can be applied via CSS using background-image. This method is useful for decorative images that do not need to be indexed or optimized separately.
• HTML image element: The image can be added as an img element in the HTML. This method is beneficial for performance, as it allows the image to be processed by external compression tools, ensuring optimized page load size and improved performance.

Search form variations

The hero search form supports multiple configuration options to enhance usability:

• CTA customisation: The call-to-action (CTA) button can be customised to display either an icon (e.g., a magnifying glass) or text (e.g., “Search”), depending on user needs and design preferences.
• Form labels: A label can be added to the search form for increased clarity, ensuring accessibility and guiding users on what to input.

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.