Live demo: Open the search-results BEFORE/AFTER micro-demo
Common failure modes
- Focus stealing: moving focus into the results list after every keystroke, so typing becomes frustrating (and can feel broken).
- Live-region spam: announcing every intermediate state (“12 results… 11… 9…”) while someone is still typing.
- Interruptions: using
aria-live="assertive"for routine updates, causing screen readers to cut off what they were reading. - Silent filters: filter toggles change results, but nothing communicates what changed.
Small, reliable pattern
- Keep focus in the search input while results update.
- Show a visible count near the results heading (example: “12 results”).
- Announce the count change in a polite live region (example:
role="status"). - Debounce announcements (for example 300–500 ms) so users can finish typing.
- Announce only when the count actually changed (avoid repeating “12 results” unnecessarily).
- If results are loading from the network, consider announcing completion (“Results updated.”) and avoid fake progress.
Related micro-demos
- Loading states (calm status + aria-busy)
- Pagination vs infinite scroll (stable navigation + focus)
- Combobox (typed input updating options)
More from this hub
- Watch page (primary share target)
- Micro-demo backlog