Live demo: Open the Load more BEFORE/AFTER micro-demo
Common failure modes
- Silent updates: more content loads, but nothing is announced.
- Focus theft: focus jumps to a newly inserted item while the user was typing/reading elsewhere.
- Inconsistent scroll position: the viewport “jumps” so people lose their place.
- Keyboard trap by accident: auto-loading on scroll makes it hard to reach the footer or other page regions.
Small, reliable pattern (recommended)
- Prefer an explicit action: a Load more
<button>(or pagination) instead of automatic infinite scroll. - Keep focus stable: after loading, keep focus on the button (or where it already was).
- Announce changes in a polite live region:
role="status"+aria-live="polite"+aria-atomic="true". - Use
aria-busy="true"on the results region while loading, then set it back tofalse. - Make the message specific: “Loaded 10 more results. 30 total.”
Notes
- If you must do infinite scroll, still announce updates and avoid moving focus unless the user explicitly requested it.
- For long catalogs, pagination is often the most predictable option.
- Test with keyboard only:
Tabto the control,Enter/Spaceloads more, and tab order stays sane.
Related micro-demos
- Pagination vs infinite scroll — demo · note
- Search results announcements — demo · note
- Loading states — demo · note
More from this hub
- Watch page (primary share target)
- Micro-demo backlog