PAUSE: Before we dive into the content below, feel free to check out our blog post that is an introduction to feed role attribute.
GO: The digital landscape is constantly growing and evolving in the ways it delivers content. With fewer clicks, but more of scroll wheels, designers are experimenting more and more, trying to make users happy with different experiences.
One such design is the ‘Infinite Scrolling’ – one that loads the content continuously as users scroll down the webpage/screen. This was designed to eliminate the need for paginations, and it had great success in social media by and large.
While eliminating paginations, this design, when implemented in eCommerce and other domains, eliminated certain user groups like people with disabilities from accessing such sites at length. The World Wide Web Consortium’s (W3C) WAI-ARIA 1.1 came to the rescue with role=”feed”, which would help screen reader users access the infinite scrolling content. But does that fix the accessibility of infinite scrolling for types of disabilities? Let’s examine!
Making Infinite Scroll Accessible
Role=feed makes infinite scroll accessible for screen reader users. Infinite scrolling allows a user to continuously scroll through a web page without having to click through pages of content. Infinite scrolling can be found on many popular social media sites, like Twitter. However, Infinite scrolling is not always the best option for your website.
Source: Infinite Scrolling is Not for Every Website
Why the Infinite Scroll is an Accessibility Violation
Infinite scroll helps us avoid pagination so users can keep on scrolling our content without clicking another link. Because of this, marketing and design teams jumped on this technique when this design pattern came into existence. The infinite scroll was not just on Twitter and Facebook– soon it moved to content-rich sites like news portals, blogs, and e-commerce stores. However, infinite scroll is not perfect, and, depending on who you ask, it can actually be problematic.
Infinite scroll was and is not accessible to a wide variety of users with disabilities. While role=feed makes infinite scroll accessible for screen reader users, it leaves a number of users with disabilities behind:
- Keyboard-Only Users: keyboard-only users cannot access the content inside an infinite scrolling feed. When tabbing from element to another element, the focus moves from the last element that is currently visible on the screen to the next element in the DOM order.
- Speech Recognition: users who use Dragon naturally or any other speech recognition software are completely left out of the infinite scroll experience.
- Screen Reader Users: while infinite scroll becomes accessible to screen reader users in browse/reading mode, only those are very comfortable with screen readers (or power users) will be able to identify these widgets. Some less experienced screen reader users might think the page is very long and might miss the complementary/footer region completely.
- Users who use a Switch Device (people with a motor disability): Imagine the amount of stress and effort you’d encounter if you were a switch control user forced to use infinite scroll to access content. The endless navigation would be extremely time consuming and difficult to navigate if you could only navigate through a series of clicks.
- Users with a motor disability who don’t use a Switch Device: Image you are a person with a motor disability that is forced to browse through a set of content in the infinite scroll and found an item you wished to checkout. If you have a tremor and you’re a mouse user, you could accidentally move the mouse past the item and the navigation would trigger more content to load.
- Low Vision Users: users who have low vision tend to use screen readers, screen magnification software, or windows high contrast mode. It is extremely difficult for a low vision user to access content wrapped inside an infinite scroll. Being a low vision user myself, I can say with certainty that it is very, very difficult for me to use infinite scroll because I tend to use a mouse with screen magnification. My hand and eye are in continuous coordination because my screen is magnified up to 6x times. When content is continuously loading, it is very stressful on my eyes to find the right content on the screen.
- Users with Cognitive Disabilities: ADHD, Short term memory loss, etc. are often forgotten about in design and development. Infinite scroll has a high cognitive load that is extremely taxing for people with cognitive difficulties.
- Web/Native Mobile Usability: Infinite scrolling on a responsive web or a native mobile app can lead to never-ending swipes or scrolls. With a smaller screen real-estate filled with many controls, an infinite scroll of content adds a layer of difficulty to a usable experience.
- People without disabilities: I have personally seen people without disabilities struggling to understand and use infinite scroll. You can read more on why infinite scroll has usability issues here:
Do Screen Readers Support Role=Feed?
Just like many developers and the accessibility professionals, I initially believed that role=”feed” would solve any accessibility-related problems for infinite scrolling. However, this excitement only lasted until I tested how a screen reader interacted with this new role. Here’s what I found:
| Assistive Technology | Internet Explorer | FireFox | Chrome | Mobile chrome | Mobile Safari |
|---|---|---|---|---|---|
| JAWS | Supports | Supports | Supports | NA | NA |
| NVDA | Supports | Supports | Supports | NA | NA |
| Talk back | NA | Supports | NA | Supports | NA |
| Voice over | NA | NA | NA | Supports | Supports |
The table explains which screen readers are supporting the role=feed currently. As of now, all the screen readers on various platforms seem to support role=feed.
Note: While the role=feed is currently supported, there is a high probability a browser or screen reader update might change this compatibility at any moment.
Accessibility Shortcomings of Role=Feed
Now that we discussed a few pitfalls of infinite scroll, let’s address building a design pattern for an infinite scroll that can address most or all accessibility needs.
The role=feed specification only addresses the needs of screen reader users who browse the web in browse/reading mode. Furthermore, the design pattern “Feed Example by WAI-ARIA Authoring Practices” does not yet have ARIA Practices Task Force consensus. However, this has not stopped web developers from adopting the usage of role=feed on the infinite scroll. Many developers are not aware of the other groups of people with disabilities that are negatively impacted by infinite scroll.
Reimagining Infinite Scroll as an Accessible Design Pattern
If I were to reimagine an infinite scroll so that would be accessible to groups that we discussed above, I would follow this design pattern:
- A switch control that can toggle on/off the infinite scroll even before interacting with infinite scroll content. Ideally, the switch control can be placed before the role=feed and can be made visible when it receives keyboard focus.
- Load more or pagination links must appear once the infinite scroll is switched-off so that user has the luxury of navigating the content at leisure.
In Summary
Web design innovations like the infinite scroll are not inherently bad. However, we need to pause and think whether such innovations allow all users to access our web content and functionality. In this journey, it is not only the ARIA working group, the designers, or the leaders who drive digital inclusion. Rather, it is a cross-functional effort from all teams in an organization that has to, again and again, reinforce that one size doesn’t fit all. Infinite scrolling is one such innovation that with the right mixture of rethinking and empathetic redesign, would become a more inclusive and beneficial web development technique.