Automated infinite scrolling is a popular web design technique even though it creates difficult accessibility problems for keyboard users.

Recently, while delivering an accessibility training course, the subject of infinite scrolling came up.

I cringed a little. Okay, maybe a lot. And a few participants laughed. I asked why, and was told they were “working on it” for an upcoming release. Oops.

While I don’t have any disabilities that influence my use of computers, I am predominantly a keyboard user. I have been since the mid 1990s. And I have to tell you that as a keyboard user, infinite scrolling pages are never easy to use. I suppose I’d actually say the same if I weren’t mostly a keyboard user, but lets focus on the keyboard usage part of the infinite scroll interaction. Let’s say that you are a keyboard user.

Will it ever end? The page, that is

The most important issue with infinite scrolling pages that you face as a physical keyboard user is that you can’t get to the end. And sometimes, you actually want to get to the end. Sometimes the link want to get to is in the footer. Or maybe you don’t know what’s in the footer so you want to see what’s there. As a keyboard user, you just can’t get to the end.

What if you try to sneak up on the link from behind and use Shift + tab to get to the link from the top of the page? You can’t. Because the script usually detects you’re at the end of the page so it loads more results and pushes the bottom of the page away from you—like you’d never even pressed Shift + tab in the first place.

Next time you’re setting up user tests (formal or informal), make sure to include a task that requires the user to click a link that is near the bottom of the page in the footer of the site. Record the session. There is very little doubt that people will get frustrated with this task. For added effect, review the video with whomever had the idea to implement automatic infinite scrolling in the first place. Let the data speak for itself (unless the data says automatic infinite scrolling is okay, in which case I’d like to you ignore that data, okay?).

A better way to infinite scroll

You should consider at least one of the following (especially numbers 1 or 3):

  1. Just don’t implement infinite scrolling.
  2. Replace automatic infinite scrolling with a “Load more results…” button or link that explicitly invites the user to add more. Once they do a few times, prompt them to ask if they’d like to turn auto-loading of more results on.
  3. No, really, just don’t implement infinite scrolling.

9 thoughts on “Automatic infinite scrolling & accessibility”

Read comments

  1. Amanda Rush says:

    I hate infinite scrolling. As a screen reader user, it’s impossible to navigate pages with infinite scrolling implemented, even if you tell the screen reader to ignore page refreshes, and these pages refresh, all the time. I’d like to say I’ll be glad when this trend goes away, but the only problem is, I don’t know what’s coming next, and it could be even worse. when working with clients, I do my best to explain to them why infinite scrolling is a bad idea.

  2. Stomme poes says:

    4. When your bosses still force you to make Endless Scroll, you must never have a footer. That’s a rule that’s easier to squeak by a boss than banning the scroll itself.

    My bosses think infinite scrolling is awesome for e-commerce, no matter how many articles showing companies switching away from it/sticking to paging I present to them: Amazon, Etsy, studies by Baymard. One boss says “well if your target group is women, they like to shop, which means scrolling around and looking at stuff.” I’m a very non-girly woman so my view doesn’t count, since they know I hate shopping. But I pointed out how user testing shows trouble the moment anyone wants to do something other than browse, that users get lost, can’t use the back button, can’t find that thing they saw but didn’t remember its exact name, have no sense of space and of course suffer from Infinite Choice which decreases purchasing as shown in many studies but most famously the many-jam-jars one by Sheena Iyengar at Columbia U.

    I’ve been forced to implement carousels and sliders and popups on sites for these same reasons: someone else has an idea that it’s good, even when user testing (which of course *we* don’t do) shows otherwise.

    The advice you *should* have given your audience is, how to circumvent these policies in a devious way that still lets us keep our jobs. Developers are not the ones deciding to add this crap. Bosses are. How do we sneak past them?

    @Rush your reader shouldn’t be considering an ajax request added to the DOM as a page refresh, though I’ve seen this in Orca sometimes when something elsewhere on the page is updating. But it should be a bug.

  3. Richard says:

    Stomme Poes point is good. When your boss asks you to implement infinite scroll then answer “that’s fine. By the way, you are OK with having no footer on the page because they can’t work together?”. Of course the bluff may not work or the boss may be tech savvy and say “how about a footer that stays fixed at the bottom of the viewport while the rest of the page can infinitely scroll.

    The other big issue with infinite scroll is that the vast amounts of content can eventually cause the browser to crash, particularly on mobile.

  4. This is what I think infinite scrolling feels like for a keyboard user… http://denisboudreau.org/stuff/dump/infinite-scrolling.jpg (alt=”man crawling in the desert”)

  5. Richard says:

    And for a mouse scroll wheel user, the obvious image would be a mouse in a wheel running fast but seeing no end in sight.

  6. I spent a lot of time thinking through the issues of infinite scrolling when we implemented it on PewResearch.org and it’s sister sites. For one thing, infinite scroll on an unfocused section of a website with lots of different choices of content to visit is certainly a recipe for disaster.

    On our site there are really only two types of pages: pages geared toward reading information and pages geared towards finding something to read. We added infinite scrolling to our archive pages which list a headline and blurb and linking to something else that is meant to be read (example http://www.pewresearch.org/category/publications/). The bottom of the archive page displays a classic pagination pattern with page numbers, next, and previous links. When on an archive page and you make it to the bottom what we really want you to do is to find something to read. We implemented infinite scroll here so it automatically loads the next page of items once you scroll past a certain depth of the page. When you’re thinking about pagination you’re not focused on finding that next interesting link that you want to follow. We theorized that adding infinite scroll would help people find what they were looking for by eliminating the need to fiddle with pagination.

    My biggest pet peeve is infinite scrolling done poorly and breaking the back button. The way we implemented infinite scrolling on the archive pages works with the back button so you won’t lose your place (inspired by http://tumbledry.org/2011/05/12/screw_hashbangs_building). I tried hard to make it as transparent of an experience as possible and “just work.” Does it have some weaknesses? Probably. A screen reader might completely miss the filtering options on the side since they come after the main content area (which keeps getting content appended to it) in the source order. This is also true on narrower viewports since it responsively collapses down to a single column. We feel that’s an acceptable trade off and we will eventually rethink how we handle sidebars on mobile screen widths potentially using off-canvas techniques.

    We also do have a footer on the archive pages and it’s probably impossible to reach with infinite scroll as well. To be honest though our footer content is quite bare and people who even see our archive pages is such a small slice of our overall traffic that the number of people who landed on an archive page and wanted to go to a link in the footer would be such a minuscule number of visitors that it wasn’t a problem. It certainly wouldn’t be worth abandoning infinite scroll altogether for since you could easily click back to the homepage and then navigate to the footer area.

    If you really, really, really dislike the infinite scroll on our archive pages you can disable JavaScript and the pages will continue to work as you want them with fully functioning pagination links (progressive enhancement, hooray!).

    I welcome your feedback on our infinite scroll enabled archives (especially accessibility issues). You can email at pewresearch.org (rheimlich@) or tweet me @kingkool68. I hope I have shed some light on reasons why infinite scroll shouldn’t be instantly shunned for every single problem.

    1. Russell,

      You said readers could offer feedback on your infinite scroll implementation. I choose to do it here so that others (including you) can correct me if they disagree.

      I started off with an open mind, but quickly discovered that what sounded like might be an enlightened infinite scroll implementation (based on your tone) is actually very much an ideal example of what not to do and how easily a developer can trick him/herself into thinking that he or she is considering users and building something that users want.

      Apologies for my tone, but I feel I would be dishonest if I didn’t allow you to see my rising frustration as I tried to use your infinite scroll implementation. I’ve been on the receiving end during user tests, so I also think it’s fair.

      I am not sure why you start by calling attention to the classic paginated navigation at the bottom of your infinite scroll page. By the time I get to it via keyboard or mouse it has been pushed off screen again. I cannot actually use it.

      Changing the URL as I scroll to the current “page” is a pointless effort because you have hijacked the valuable anchor link. Using that URL drops me at the top of the page instead of at the section of the screen that may have the content I want (or that I want to share).

      You have made an assertion about how I surf (“When you’re thinking about pagination you’re not focused on finding that next interesting link that you want to follow.”) that doesn’t reference any supporting data. I can tell you that I *am* focused on getting to the next bit of information, otherwise I wouldn’t click for the next page. Instead, when the page jumps, my trust for the site drops and I leave.

      You’ve also prevented me from jumping ahead, perhaps to see headlines from a few months ago by jumping ahead 10 pages at a time until I find it. Your belief that you are helping me by not making me “fiddle with pagination” is flat-out wrong in that case.

      You note that your footer is “probably impossible to reach with infinite scroll,” but I can assure you (since I didn’t speculate, I tried it), I can see it for a split second when I ctrl-End before it wooshes out of site and access.

      You acknowledge that your solution is probably inaccessible given how the sidebar can never be reached when tabbing through the page (“We feel that’s an acceptable trade off…”), but that reason alone (though you can add the responsive problem) would be enough for me to walk away from this solution as a developer from the get-go. I don’t consider making the page inaccessible to be an acceptable trade-off for a feature that nobody requested and hasn’t been user tested.

      You suggest that I can disable JavaScript if I don’t like the infinite scroll. Before you pat yourself on the back for progressive enhancement (which I don’t counts here), how about you tell the user, for each browser, how he or she can disable JavaScript. Suggesting a user can get the experience he or she wants by disable browser features is quite the opposite of usable.

      Yeah, that got ranty much more quickly than I intended. To be fair, infinite scroll has caused me a lot of hassle (both me personally and as tech support for my parents), so I have a pretty low threshold here.

  7. Stomme poes says:

    It would be interesting to see user data for those sites where most of us think infinite scroll is okay (browse-sites like twitter). I mean, *i* hate that I can’t ctrl-f stuff, but I’m always reminded that “most users” don’t even know what that is (depending on who your users are).

  8. Günther Leenaert says:

    Some suggestions for the infinite scrolling devs:

    – Please fix everything except the scrolling content for ease of navigation, or…
    – At least fix all navigational elements
    – Put your pagination at the top, not at the bottom, or …
    – Bind arrow keys to the pagination
    – Allow the user or guest to favorite/like and/or separate content. This can generate (marketable) data for you and gives the user a better overview, reducing excessive navigation.
    – Make sure, since this is an accessibility website, to include a proper ‘tab’ and ‘alt’ functionality.
    – Consider a search function that only loads relevant blocks, instead of having your users load content that essentially spans dozens of pages.
    – The combination of all the above = GOLD

Comments are closed.