Accessibility solution for infinite scrolling

Intro

Social media changed the way we experience the world, notably how we consume content on the internet. If you look at almost any platform or website today, you will see feeds and pages filled with never-ending content. These feeds intend to capture your attention and keep you engaged. This pattern for displaying content is commonly known as infinite scroll. It is defined as “a listing-page design approach which loads content continuously as the user scrolls down”(Tim Neusesser, 2022). Infinite scroll, ubiquitous in nature and adopted by the most popular sites in the world, has become a dominant feature and design pattern. A crucial question I aim to address in this blog post amid its widespread usage is: Is it accessible?

Let’s imagine you are navigating the web keyboard-only, your mouse off on a tropical vacation, perhaps sipping a piña colada. As you encounter an endless scroll, you find yourself tediously tabbing through an infinite cascade of data. You wonder how to access the sidebar, footer, or the start of the page. You may find yourself saying “tabbing is taking way too long to get to the content I like.”  Navigating this scenario may raise several questions. Simply put, infinite scroll poses significant accessibility challenges for a variety of reasons, impacting countless numbers of users. For a deeper dive into these accessibility concerns, the following resources offer valuable insights:

• Deque
• WebAxe
• Bureau of Internet Accessibility
• Nielsen Norman Group

Problem and benefit of infinite scroll

Let's break down the reasons behind infinite scrolling's popularity and the challenges it presents.

Benefits 

In a 2022 article, Tim Neusesser highlights the advantages of implementing infinite scroll, noting its potential to: 

• Boost engagement: Seamless viewing is addictive! With no pages to click through, users naturally keep scrolling, discovering more content and spending longer on the site.
• Create a faster experience for many: Reduced interaction costs. Infinite scroll removes the wait associated with page loads. This smooth flow offers a sense of immediate gratification.
• Optimize mobile browsing: This seamless interface contributes to its strong adoption on mobile-first platforms.

Problems

According to various sources, the common problems that are usually associated with the infinite scroll when using keyboard/other assistive device are (Bureau of Internet Accessibility, 2021; Dennis, 2015; Peri, 2019; Tim Neusesser, 2022):

• Users are unable to reach the end of the page
• Unable to navigate quickly
• Users do not feel in control
• Users lose their place in the scroll when they leave
• Focus problems when tabbing

Why not use pagination instead? According to Sharma & Murano (2020), users prefer infinite scroll, rating it highly for its pleasantness, with many favoring it as their browsing method of choice. If we opt to retain the infinite scroll feature, how might we improve its usability for everyone? A "load more" button may seem like a middle ground, allowing users to pause content loading. However, similar to pagination, this method causes interruptions which have been shown to decrease content appreciation (Zhang et al., 2020).

An example of the problem we are trying to solve is showcased in the following Facebook video:

Solutions/Approaches

As a developer at Benevity, I work on one of our products called Affinity Groups. Affinity Groups is an internal social network. It gives Employee Resource Groups (ERGs) one spot to organize, socialize, educate and drive change. Group members can share discussions, plan events, and share resources with each other. Content on Affinity Groups is primarily shared through a news feed, offering updates unique to each user's experience. Affinity Groups and other products here at Benevity strive to make accessibility at the core of our product experience. We want employees in our clients' workforce to have the opportunity to do good (Benevity, n.d.).

It was crucial for us to question infinite scroll's accessibility and creatively overcome its outlined challenges. So what did we do? The Affinity Groups team addressed the accessibility challenges of infinite scrolling by creating an Accessibility Menu.

How does it work?

Before entering the column, keyboard/screen reader users will be shown a message explaining that a menu will appear every five tiles (see Figure 1). 

Figure 1 

Infinite Scroll message

Only the titles of these tiles are read aloud when tabbed to, so screen reader users can bypass most of the content of each tile until they get to a tile that interests them. When they find a tile they want to read further, they can press enter to access the content within that tile.

Once the user reaches the menu they can enter and use the arrow keys to navigate three different buttons as shown in Figure 2.

Figure 2 

Accessibility Menu

Users can move to the left column, to the top of the infinite scroll or to the right column where they can access the footer. This is achieved by setting the focus to the respective area of the page. Additionally, if the user navigates to the right or left column they will be able to enter the same area in the infinite scroll to continue to navigate where they left off. However, this capability is reset once the user leaves the page. If a user accidentally misses the menu, they can go back and access it or continue on and see it in the next five tiles. This is important because it leaves room for mistakes. For example, take a user who has a tremor and accidentally hits enter on the left navigation button, or misses the menu. This functionality ensures they can always return to what they were previously viewing.

The feature is designed to not impact mouse users, activating only for those navigating via keyboard or screen reader. This ensures the browsing experience for mouse users remains consistent.

Let's see our solution in action:

Code sample

Let’s take a look at one of the buttons on the accessibility menu for an example. This button allows users to navigate to the right-hand column of the page. It is conditionally rendered (v-if="hasRightColumn") to ensure it only appears when a right-hand column is present in the layout. It's designed to be fully accessible, with attributes like aria-label for screen readers and tabindex for keyboard navigation. The role="menuitem" further semantically identifies the button's function within a navigation menu.

Through Vue's event modifiers, we prevent the default action on click and keypresses (Enter and Space). Pressing Enter or Space triggers a method to shift focus to the right column. Escape and left arrow keypresses facilitate navigation between menu buttons and exiting the menu. The @focus and @blur events are used to manage visual cues when the button gains or loses focus. This is important for keyboard users who rely on sight to navigate.

<CxButton
       v-if="hasRightColumn"
       ref="menuItem-2"
       href="#"
       :aria-label="Navigate right"
       :tabindex="tabIndices[2]"
       role="menuitem"
       @click.prevent="switchToRightColumn"
       @keydown.enter.stop.prevent="switchToRightColumn"
       @keydown.space.stop.prevent="switchToRightColumn"
       @keydown.esc="escape"
       @keydown.left="moveTabIndex(1)"
       @focus="onLinkFocus"
       @blur="onLinkBlur">
       ❴❴ Navigate right ❵❵
   </CxButton>

For a deeper dive, here are some additional snippets focusing on the key props and methods of the menu (not all are included):

props: {
    backToTopFocusSelector: { type: String, default: "" },
    hasLeftColumn: { type: Boolean, default: true },
    hasRightColumn: { type: Boolean, default: true },
    leftColumnSelector: { type: String, default: "#top_of_left_column" },
    rightColumnSelector: { type: String, default: "#top_of_right_column" },
    topSelector: { type: String, default: "#main-content-container" },
 },

 methods: {
      backToTop() {
          scrollToTop(this.topSelector);
          $(this.backToTopFocusSelector).focus();
          this.resetTabIndex();
      },
      switchColumns(selector) {
          scrollToTop(selector);
          $(selector).focus();
          this.resetTabIndex();
      },
      switchToLeftColumn() {
          this.switchColumns(this.leftColumnSelector);
      },
      switchToRightColumn() {
          this.switchColumns(this.rightColumnSelector);
      },
 },

Next, we explore Vue properties that aid in the navigation via the accessibility menu.

To integrate user navigation, we implement several methods in our Vue component, each tailored to improve accessibility and user flow. Let's examine these methods and their roles:

Future additions

An addition that would be beneficial to users is a menu button to jump 10 tiles forward or back. More useability testing would be beneficial and could further add to the development of this menu. Testing with other assistive technologies such as eye and head movement input tools, braille and others could aid in this.

Conclusion

In summary, it's important to acknowledge the impact that UX patterns like infinite scroll have had on accessibility. The World Wide Web Consortium (W3C, 2005) and scholars like Navarrete and Luján-Mora (2018) emphasize the following: that web accessibility is about empowering people with disabilities to engage online just like anyone else. Their words remind us of the fundamental importance of infusing a culture of Goodness into the world.

As we grapple with the complexities of infinite scrolling and similar design choices, it's evident that inclusivity must be woven into the fabric of web development and user interfaces from the very beginning. We need to reevaluate UX patterns and features to remove barriers and design inclusively for all users. By embracing web accessibility as a core principle, we not only meet the ethical and legal standards outlined by organizations like the W3C, but also foster a more vibrant, inclusive online community. Taking proactive steps to ensure that all users can seamlessly access and engage with content is a significant stride toward this collective vision.

References

Benevity. (n.d.). Accessibility. Retrieved February 15, 2024, from https://benevity.com/accessibility

Benevity. (n.d.). Affinity Groups. Retrieved February 15, 2024, from https://benevity.com/products/affinitygroups 

Bureau of Internet Accessibility. (2021, January 5). Is Infinite Scrolling Accessible? BOIA. https://www.boia.org/blog/is-infinite-scrolling-accessible

Dennis, D. (2015, August 25). Infinite scrolling and accessibility. Web Axe. Retrieved February 7, 2024, from https://www.webaxe.org/infinite-scrolling-and-accessibility/

Figure 1. Infinite Scroll message. From "Accessibility Solution for Infinite Scrolling," by Kayla Grieve, 2024.

Figure 2. Accessibility Menu. From "Accessibility Solution for Infinite Scrolling," by Kayla Grieve, 2024.

Navarrete, R., & Luján-Mora, S. (2018). Bridging the accessibility gap in Open Educational Resources. Universal Access in the Information Society, 17(4), 755–774. https://doi.org/10.1007/s10209-017-0529-9

Tim Neusesser. (2022, September 4). Infinite Scrolling: Pros and Cons. Nielsen Norman Group. https://www.nngroup.com/articles/infinite-scrolling-tips/

Peri, R. S. (2019, October 2). Infinite Scrolling & Role=Feed Accessibility Issues. Deque. Retrieved February 7, 2024, from https://www.deque.com/blog/infinite-scrolling-rolefeed-accessibility-issues/

Sharma, S., & Murano, P. (2020). A usability evaluation of Web user interface scrolling types. First Monday, 25(3). https://doi.org/10.5210/fm.v25i3.10309

W3C (2005), Introduction to Web Accessibility. http: //www.w3.org/standards/webdesign/accessibility.

Zhang, Y., Liu, L., & Ho, S. Y. (2020). How do interruptions affect user contributions on social commerce? Information Systems Journal (Oxford, England), 30(3), 535–565. https://doi.org/10.1111/isj.12266