Search Input

A search input is a semantically marked-up text field for submitting queries, typically including a visible label, search icon, and an accessible clear button.

Demo

Type a query into the search field and observe how the clear button appears. Try activating the clear button with a keyboard. Check that the field's purpose is announced by a screen reader when it receives focus, and that submitting with Enter triggers the search action.

What to Observe

The search field has a visible label that persists even when the input contains text.
The input is marked up as a search field so assistive technologies can surface it through the landmark list.
The clear button appears when the field has a value and disappears when the field is empty, removing it from the tab order when not needed.
The clear button has a descriptive accessible name so screen reader users know its purpose.
Pressing Enter in the field triggers the search action without requiring a separate button click.

Anatomy

[Anatomy image placeholder — will be added when assets are available]

Search landmark: The wrapping element with the search role that allows assistive technologies to identify and navigate to the search region.
Field label: The visible text label associated with the input that persists at all times and describes the field's purpose.
Search icon: A decorative visual indicator that reinforces the field's search purpose; hidden from screen readers.
Text input: The input field where users type their query, marked up as a search input type.
Clear button: An interactive button that clears the field contents, visible only when the field has a value.
Submit button: An optional explicit control to submit the search, supplementing Enter key submission.

Accessibility Behavior

The search field must have a visible, persistent label — placeholder text must not serve as the only label.
The input or its container should carry the search landmark role so screen reader users can jump to it directly.
The clear button must only be present in the tab order when the field contains a value; when the field is empty it must not be reachable.
The clear button must have an accessible name that describes its action, not just an icon with no text.
The search icon, if decorative, must be hidden from assistive technologies so it is not announced redundantly.
Submitting the search must be possible by keyboard, either via Enter or a keyboard-accessible submit button.

Common Mistakes

Using placeholder text as the only label, so the field's purpose disappears as soon as the user starts typing.
Leaving the clear button in the tab order even when the field is empty, adding an unnecessary stop for keyboard users.
Implementing the clear button as a non-interactive element such as a span, making it unreachable by keyboard.
Giving the clear button only an icon with no accessible name, so screen reader users hear "button" with no context about what it does.
Omitting the search landmark, so users cannot navigate directly to the search field from the page's landmark list.

Why This Matters

Search is one of the most critical pathways users take to find content on a site or in an application. When the field has no persistent label, users who need the label most — those using screen readers or those with cognitive disabilities — lose their bearings as soon as they begin typing. A clear button that is inaccessible by keyboard traps users who cannot use a mouse with a field they cannot efficiently reset. Treating search as a first-class accessible component ensures that the fastest path to content is open to everyone.

Accessibility Validation

This component is validated against internal accessibility criteria aligned with WCAG standards, using our internally developed system, Resonance Specs.

To learn more, please contact us.