Infinite Scroll & Accessibility! Is It Any Good?
I was thinking of implementing infinite scroll on my home page & remove pagination but then I thought I need to make this accessible. There is no point providing a feature & later realizing that it is not accessible for majority of users. My main goal was to see if I can make infinite scroll accessible for people with disabilities to use & then I went on bit of hunt to research on Google. What I found changed my mind & I think infinite scroll is bad for people with disabilities & wide variety of users.
What is Infinite Scroll?
Infinite scrolling is a web-design technique that loads content continuously as the user scrolls down the page, eliminating the need for pagination. The success of infinite scrolling on social media sites such as Twitter have made this technique popular, but that doesn’t mean you should do it too.
Source: Infinite Scrolling is Not for Every Website
While ARIA 1.1 introduced a Feed role which enables infinite scroll accessible for screen reader users, reading the blog post by Adrian “So You Think you’ve built a Good Infinite Scroll” changed my mind.
Here is a checklist that Adrian provided that one can refer before implementing infinite scroll.
- Can the user hit “back” and return to the exact same place?
- Is there paging for when the JavaScript breaks?
- Does the page have footer?
- Can a keyboard user access all other content on the page?
- Can you share a URL to a specific place on the page?
- Can a user easily jump ahead a few “pages” to quickly get to content much further down the list?
- Does the memory footprint of the page dramatically increase after just a couple new “pages?”
- Is there a way to disable automatic infinite scrolling and lean on standard paging?
- Have you conducted any user tests?
- Are you satisfying a use case that has come from research or user request?
- Do you have any analytics/tracking to measure success?
As a screen reader user I wanted to experience this for myself & found an accessible infinite scroll example here & here are my thoughts.
Screen Reader Users Perspective Using a Infinite Scroll
- I was unable to figure out if there is footer or not.
- Screen reader kept on going through the content & I got little frustrated after few minutes. There was no end.
- When I activated the keystroke ctrl+end key to move to end of the page & then use up arrow to navigate the content. Content is not exposed to screen reader. It looks like focus doesn’t move into feed region using this method. It works fine while navigating from top of the page using down arrow. (Scenario fails with Jaws! Works as expected with NVDA)
- There is no way I can guide another assistive technology user on where the content is or in how many keystrokes he might need to reach that particular content. My current blog shows 5-6 posts on a page & it is easy to guide someone.
- If infinite scroll is must then I prefer a load more button to load new results in to the feed. But then I might not know how many pages of content is available & how many times I need to activate load more button.
- I cannot start from where I left off. Suppose I am on 30th post & left the site I need to scroll all 30 posts to get to that content.
- Each article region is provided with tabindex=0 so that’s an extra tab stop that assistive technology & keyboard only users have to go through. Not ideal but there is no work around for it.
- Infinite scroll is more distracting on mobile as it is touch dependent.
While infinite scroll can be made accessible for people who use screen readers using various ARIA Roles, States & Properties it is not a great user experience for other users. For more information refer to the following posts & make your own judgement.
Update: we wrote a follow-up article on how role=feed does not solve the accessibility challenges posed by the infinite scroll.
