How it works
The search box allows users to search for content by typing in the input, without needing to use the navigation. The input element has a descriptive
aria-label for screen reader users.
It's a focusable component, and in the expanding search box where only the icon is visible, the search box has an appropriate
required is included in the input, then the browser will display an accessible error message instructing the user to fill out the field.
This component strives to follow WCAG 2.1 (level AA) guidelines, and care must be taken to ensure this effort is maintained when the component is implemented across other projects. This section offers advice to that effect:
- Make sure to have a descriptive
aria-labelfor the search input.
- Usually, it shouldn’t be possible to search with an empty input field, so indicate this with the
requiredattribute on the input.
- If a page includes more than one search landmark, each should have a unique label.