Filter Input Accessibility
Best Practices
A filter input is a plain textbox, not a combobox . Its results are not intended to appear in a popup listbox, so combobox ARIA ( role="combobox" , aria-expanded , aria-activedescendant ) does not apply. If you need a popup of suggestions, use combobox instead.
The input must have an accessible name that describes what is being filtered (e.g. "Filter results"). Prefer a visible, associated <label> ; when the design relies on placeholder text (e.g. "Filter") instead, provide the name via aria-label . Placeholder text is not a substitute for a label.
The input must use aria-controls to reference the id of the content it filters, so assistive technology can discover the relationship even though that content isn't a popup the input expands or collapses.
If filtering updates a count or list of results elsewhere on the page, that update must be announced without moving focus from the input. Use a live region for this, and keep the announcement short (e.g. "12 results") rather than reading back the entire filtered list.
The clear button, when present, has no visible text and must have an aria-label describing its action (e.g. "Clear filter input"). The search icon is decorative and must use aria-hidden="true" .
Interaction Design
This section provides detailed instructions for how different input types should navigate and operate the pattern.
Keyboard
Pressing TAB key must move focus to the input. Typing filters the associated content live, without requiring ENTER.
When a clear button is rendered, TAB key must move focus to it next, and pressing ENTER or SPACEBARmust activate it, clearing the input's value.
Unlike combobox or listbox patterns, arrow keys have no special behavior here — they move the text cursor within the input as normal.
Screen Reader
A screen reader announces the input's accessible name, its role ("search" text field, due to the underlying type="search" ), and its current value.
When focus moves to the clear button, its label is announced.
Typing into the input does not automatically announce the filtered results — this must be wired up separately via a live region on the element referenced by aria-controls .
Pointer
Clicking or tapping the input must place focus in it. Clicking or tapping the clear button must clear the input's value.
ARIA Reference
| Attribute | Description |
|---|---|
| type="search" | Changes the input's role to "searchbox" and gives mobile browsers a reason to show a search-optimized virtual keyboard. |
| aria-label | Provides the accessible name for the input when no visible <label> is associated. Also provides the clear button with an accessible name, since it has no visible text. |
| aria-controls | References the id of the content that this input filters. |
| aria-hidden="true" | Applied to the decorative search icon inside the input to hide it from assistive technology. |