Patterns to avoid: Infinite scroll
TODO: This content should be reviewed and restructured.
We don’t recommend using infinite scroll because it has many significant accessibility issues:
- You can’t go back to your previous place using browser “back” button.
- You can’t easily get to the footer or the last items in the infinite scroll.
- There is a large memory footprint if loading big images.
- It doesn’t work without Javascript.
- You can’t access elements with keyboard only.
- There is no consistent audible feedback or instructions about how infinite scrolling works for assistive technologies.
- There is no URL to a specific place on the page.
- And the list goes on…
There is a great summary in the “Reconsider the usage of infinite scrolling across the admin” trac ticket for more information.
Recommendations
Pagination with page numbers removes all the issues mentioned above.
If the number of items to load is not too high, “Load more items” buttons could work as well. However, that option is limited to sequential usage and doesn’t provide any methods to access previously loaded items or the very last items to load.
Resources
Resources mostly focused on accessibility
- So You Think You’ve Built a Good Infinite Scroll
- Infinite scrolling in Simply accessible
- Infinite scrolling and accessibility
- Infinite scrolling – impact on assistive technologies
- From a screen reader user’s point of view: Infinite Scroll & Accessibility! Is It Any Good?
Resources mostly focused on usability
- Infinite scroll search-friendly recommendations
- Infinite scrolling in Nielsen Norman Group
- The UX of Infinite Scroll: The Good, the Bad, and the Maybe
- How infinite scrolling breaks UX
- Infinite Scrolling, Pagination Or “Load More” Buttons?
- Infinite Scroll: Let’s Get To The Bottom Of This