New Components
Search input
The search input allows the user to enter a query in order to quickly find information within a site or an application. It rests on a native field, a clear button, a submit button and a live region reporting the outcome. The whole constitutes a search landmark, identified as such by assistive technologies and reachable directly through their navigation shortcuts.
When to use a search input
- A large body of content: when working through the navigation costs more than typing two words.
- A known need: the user knows what they are after and wants to go straight there.
- A catalogue or an archive: a base of articles, documents or references.
When not to use one
- Little content: across a dozen pages, navigation is enough and a search box raises false hopes.
- To filter a displayed list: that is a filter, not a search. The label has to say so.
- To pick from a closed list: use a dropdown list with filtering, whose values are known.
Modes of action
- Mouse: typing in the field, a clear button, a submit button.
- Keyboard: Enter submits from the field. The clear button is a real button, in the tab order.
- Screen reader: the container carries role="search"; the outcome is announced by a live region, without moving focus.
Content
- A visible label: the placeholder disappears on the first keystroke and is not a substitute.
- Two distinct labels: the field is called "Search" and the button "Run the search", otherwise voice control becomes ambiguous.
- An outcome always announced: the number of results, the absence of results, or an invitation to enter a term.
Keywords
- role="search": the search region of the page. It shows up in the screen reader list of regions.
- input type="search": a search entry field, with its native clear cross.
- Live region: an area whose change is announced without moving focus.
- Placeholder: example text shown in an empty field. It never replaces the label.
Breakdown of the components
A search container, a field, two buttons and a message region.
The field and its label
- The label is visible and bound with for. The placeholder repeats it at best, it does not replace it (WCAG 3.3.2).
- The container carries role="search", which adds the search to the list of navigable regions.
The clear button
- The native cross of input type="search" is not reachable by keyboard: it only answers the mouse. It is neutralised in CSS and replaced by a real button (WCAG 2.1.1).
- The button carries an accessible name, hands focus back to the field and announces the clearing.
- Focus is handed back BEFORE the button is hidden: hiding an element that still holds focus sends it through the document (WCAG 2.4.3).
Reporting the outcome
- Every submission produces a message, including an empty one. Without that, the user cannot tell whether the search was taken into account (WCAG 4.1.3).
- The message region is not bound to the field with aria-describedby: the number of results would become the permanent description of the field, read again on every focus.
Screen reader
- The field is announced with its label, not with its placeholder.
- The number of results is announced with no focus move: the user stays in charge of their navigation.
- Two neighbouring commands never share a label.
- The live region exists from page load, and it is empty.
The component offers no suggestions list: it rests on a native field and two buttons, all three in the tab order. For a suggestions list, see the Dropdown list component.
| Key | Function |
|---|---|
| Tab | Moves focus to the field, then to the clear button when it is shown, then to the submit button. |
| Shift + Tab | Moves focus to the previous element. |
| Enter | Submits the search from the field. Activates the focused button. |
| Space | Activates the clear or submit button when it holds focus. |
| Escape | Clears the field, where the browser implements that native behaviour on input type="search". |
| Editing keys | Typing and correcting in the field: characters, cursor movement, deletion. |
Note: the native clear cross of input type="search" is not reachable by keyboard. It is neutralised in CSS and replaced by a real button, which hands focus back to the field before being hidden.