Live demo: Open the list-filter BEFORE/AFTER micro-demo
Common failure modes
- Focus theft: moving focus into the list after each keystroke, so people can't keep typing.
- Announcement spam: reading a live update for every intermediate state while someone types (especially with
aria-live="assertive"). - No clear "reset": people get stuck in a filtered state and have to manually backspace.
- Hidden count: the UI changes, but there's no visible "Showing X of N" feedback.
Small, reliable pattern
- Use a real input (
type="search"is fine) with a visible label. - Keep focus in the input while filtering updates the list.
- Provide a Clear button that appears only when the query is non-empty.
- Support Escape to clear the query (and keep focus in the input).
- Show a visible count like "Showing 3 of 12".
- Announce count changes politely via
role="status"/aria-live="polite". - Debounce updates slightly (for example 80-300 ms) to avoid live-region spam.
Notes
- Don't over-announce: if the count hasn't changed, you usually don't need to announce again.
- Don't hide everything silently: if there are 0 matches, show a small empty state message.
(If you use
hiddenon list items, also update a count/status line.) - No-JS fallback: add a
<noscript>note if filtering requires JavaScript.
Related pages
- Watch (primary share target)
- Search results: announce count changes
- Load more: announce inserted content