20% Off My Easy-Peasy Proposal with the Coupon Code 20OFF (Now - April 30th)

Accessibility Weekly

Re-think Infinite Scroll

Published:

amber-200

Amber Hinds

Equalize Digital

Amber Hinds is the CEO of Equalize Digital, Inc., a Certified B Corp specializing in WordPress accessibility, maker of the Accessibility Checker plugin, and lead organizer of the WordPress Accessibility Meetup and WP Accessibility Day conference.

Week 23

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

Join the Conversation!

There's a dedicated thread on this post inside of The Admin Bar community. Join in on the conversation, ask questions, and learn more!

Group Thread
amber-200

Amber Hinds

Equalize Digital

Amber Hinds is the CEO of Equalize Digital, Inc., a Certified B Corp specializing in WordPress accessibility, maker of the Accessibility Checker plugin, and lead organizer of the WordPress Accessibility Meetup and WP Accessibility Day conference.

Through her work at Equalize Digital, Amber is striving to create a world where all people have equal access to information and tools on the internet, regardless of ability. Since 2010, she has led teams building websites and web applications for nonprofits, K-12 and higher education institutions, government agencies, and businesses of all sizes. Through this journey, she learned about the importance of making websites accessible to everyone, and it has been her passion to bring awareness to accessibility and make website accessibility easier, ever since. 

Brought to you by:

Make your WordPress website accessible and ensure all people have equal access to your products or services, regardless of ability. Reach more customers, reduce liability, and increase conversions.

Come Join Us!

Join the #1 WordPress Community and dive into conversations covering every aspect of running an agency!

Kyle Van Deusen

Community Manager

More from Accessibility Weekly

Week 51

How Accessible is “Accessible Enough”

In an ideal world where clients have unlimited budgets and everything is custom, every website would …

Week 50

How to Sell Accessibility in New Builds

Creating websites that prioritize accessibility is no longer just a best practice—it’s a business must, especially …

Week 49

Accessibility in Web Development Contracts

Whether you’re running an agency or freelancing, having a clear contract for your web development and …