Accessibility Problems with Infinite Scrolling
Endless scrolling (also known as infinite scrolling) is a web design and usability concept in which content is automatically reloaded when the user scrolls down – without having to manually click to a new page. It is sometimes used on news websites, but especially in social media. It can be found on both websites and native apps; for example, LinkedIn scrolls endlessly on the web but offers a button in the app to load new content
.Challenges for Screen Reader Users
For blind people, infinite scrolling can cause significant accessibility problems, especially if they use screen readers or keyboard navigation. Here is an overview of the most important problems:
- When new content is dynamically reloaded, the screen reader often doesn't know that the page has changed. The new content isn't automatically read aloud because it isn't focused or not correctly marked (e.g., missing ARIA live regions) or the focus shifts.
- Without a visible end, there is no natural "stop point." This makes orientation difficult.
- Many blind users structure information through headings or page sections – with endless scrolling, this structure becomes blurred.
- Content that is visually located behind the endless scrolling area cannot be easily reached. This includes, for example, a right sidebar or a footer.
- Using a screen reader does not automatically scroll the page. This problem occurs, for example, with NVDA: If you have the entire web page read aloud, the screen reader does not scroll the page, meaning it reads content that is outside the viewport. Regardless of this, it can happen that the page does not scroll according to the screen reader's behavior, meaning no new content is loaded because the screen reader moves through the page, but the page itself remains stationary. This happens, for example, on Facebook when you scroll through the post headings using the H key.
Keyboard Problems
Many blind users navigate using the tab key. When new content is constantly loading, the focus path becomes uncontrollably longer.
Returning to previous content becomes difficult – there is no clear "back" structure like on traditional pages.
If the page is refreshed or accidentally left, the position is lost – and the user has to start over from the beginning, without any visual cues.
How can infinite scrolling be made accessible?
When using infinite scrolling, the following should be considered:
- Use ARIA Live Regions so that screen readers recognize new content.
- Offer load-more buttons as an alternative (e.g., "Load More" button).
- Set focus sensibly when new content appears.
- Provide an alternative option for "page-by-page scrolling."
- Structure content clearly (e.g., with headings, landmarks).
- Offer the option to skip the section, for example, using jump marks or headings.
More on Components
- Semantic and Machine Readibility for Accessibility
- Understanding Keyboard Accessibility
- Why CAPTCHA's are not accessible
- Erros in native Apps
- Trigger Warnings in digital Accessibility
- How to make Timeouts accessible
- The Accessibility of Disabled Buttons
- Accessibility for Animations and Motion
- Integrated Text versions, style switchers and magnification
- How to make chatbots accessible
- Some Thoughts on Real Time Information Accessibility
- Hiding Content from Screen Readers