Re-think Infinite Scroll

Infinite scroll is a technique used in websites and applications to provide continuous content loading without explicit pagination or clicking on “next” or “load more” buttons. It allows users to scroll through a list of content items, such as articles, images, or products on a webpage, and have new content dynamically loaded below the existing content as the user reaches the bottom of the page.

Infinite scrolling is commonly used on social media websites and was even added to Google Search recently. The idea behind infinite scroll is that it eliminates the need for manual navigation between pages and creates a more engaging and fluid browsing experience. This sounds like a good thing for most websites, however, infinite scrolling can cause accessibility issues if not implemented properly and as a best practice, it’s recommended to avoid using infinite scroll if you want to build an accessible website.

Accessibility Problems Presented by Infinite Scroll

Infinite scroll can present challenges for people with disabilities or those using assistive technologies such as screen readers to surf the web. Here are some of the potential problems:

Navigation Difficulties

Infinite scroll can make it challenging for users relying on keyboard navigation or screen readers to reach specific content or navigate back to previous sections. Since there are no distinct pages, it can be difficult to quickly find content that doesn’t load in the first batch or two of posts.

If you’re a long-time user of WordPress, you may remember that the Media Library used to have infinite scrolling, but it was removed in WordPress 5.8. Infinite scrolling was removed from the Media Library because it was causing accessibility problems. The Media Library’s infinite scroll made it impossible for keyboard users to reach content appended to the screen, and there was no audible feedback or instructions about how infinite scrolling in the Media Library worked for screen readers.

In many cases, keyboard-only users cannot access the “more” content because tabbing doesn’t trigger more elements to load after the initial set. And people who use speech recognition software such as Dragon naturally are also completely left out of the infinite scroll experience because they don’t have a way to trigger the loading of new content via voice.

Increased Cognitive Load

Infinite scroll can lead to an overwhelming amount of content loading continuously, which may cause cognitive overload for some users. People with cognitive disabilities or attention disorders may find it harder to focus or digest information in such an unbounded stream.

Removing pagination also removes all context for how many posts there are in the loop. When the number of pages is visible, it’s easy to figure out if there are 100 or 1000 pieces of content, but this context disappears when an infinite scroll is present.

More seriously, some people with ADD or obsessive-compulsive disorders may feel compelled to continue scrolling to the degree that it is unhealthy for them.

Difficulty in Reaching Footer Content

Infinite scroll often removes the traditional footer or makes it impossible to get to. The footer is generally where helpful information like contact details, privacy policies, or terms of service is located. People of all abilities may have a hard time reaching the footer on pages with an infinite scroll setup, which can cause frustration, to say the least.

Performance and Accessibility

Implementing infinite scroll requires dynamic content loading through JavaScript or AJAX, which can sometimes cause performance issues. If the implementation is not optimized, it may lead to slow loading times, freezing, or crashing, affecting users with slower internet connections or older devices. Accessibility is about ensuring that content can be accessed on all devices by all people, so if performance issues are present, that would be considered an accessibility issue (though not a Web Content Accessibility Guidelines failure).

Infinite Scrolling in WordPress

I tested two popular WordPress plugins for infinite scroll, WordPress Infinite Scroll – Ajax Load More and YITH Infinite Scrolling, to see how they perform for keyboard-only and screen reader users. I was surprised at how useable these two plugins were both with a keyboard only and a screen reader.

WordPress Infinite Scroll – Ajax Load More

WordPress Infinite Scroll has a visible load more button below the posts. With a screen reader turned on, the infinite scroll doesn’t happen at all, and the screen reader user can tab to the load more button and then press it to manually fetch more posts. This interaction is nice because it gives screen reader users control over whether to load more posts.

The plugin manages focus well. When more posts are loaded (either automatically when tabbing or after clicking the load more button) keyboard focus is shifted to the new posts so that the user can continue tabbing through them and quickly get to the new items. Because the posts are grouped in a list, screen reader users hear the number of new posts added, giving them additional context sighted people have at a glance.

YITH Infinite Scrolling

YITH Infinite Scrolling is built for WooCommerce websites to add infinite scrolling to product pages. It does a decent job of recognizing when a user navigates the website with a Tab key rather than a mouse and loads in products seamlessly so that they can be infinitely tabbed through. This plugin maintains infinite scrolling if a screen reader is in use, which is less ideal.

There aren’t any critical WCAG failures that would make it impossible for a blind person to use, though there are some oddities that might add confusion. For example, it doesn’t change the product count before the list of products from the paginated count, so it says “Products 1-12 of 500” even though it will load 500 products on the page, not just 12.

Deciding to Use Infinite Scrolling or Not

Both WordPress Infinite Scroll – Ajax Load More and YITH Infinite Scrolling provide a manageable experience for sighted keyboard-only and screen reader users. What they don’t resolve are difficulty reaching the footer, challenges related to unexpected behavior (more posts loading than expected), or issues that infinite scrolling may cause for people with cognitive or emotional disabilities.

As the Nielsen Norman Group says, infinite scrolling is not for every website. Before putting it on a website you build, I’d think carefully about whether infinite scrolling is genuinely in the user’s best interest and will provide a better user experience than pagination provides. If you decide to use it, it might be preferable to include a toggle button that allows users to turn infinite scrolling off. This will give people control over the website’s behavior and ensure they can choose the experience they like best.

Additional Resources

• Infinite Scrolling & Role=Feed Accessibility Issues on Deque
• Infinite Scroll & Accessibility! Is It Any Good? (by TAB Member Raghavendra Satish Peri)