Skip to content

Infinite Scrolling Feed Example

Infinite Scrolling Feed Example

Read This First

The code in this example is not intended for production environments. Before using it for any purpose, read this to understand why.

This is an illustrative example of one way of using ARIA that conforms with the ARIA specification.

About This Example

NOTE: The feed role was introduced by WAI-ARIA 1.1. Since native desktop operating systems offer only a few conventions that are applicable to the feed pattern, the implementation of a feed illustrated by this example is intended to serve as as a proposal. Feedback is welcome in issue 565.

The example below implements the Feed Pattern for a restaurant review site. To imitate an infinitely scrolling set of data, information about ten restaurants is repeatedly loaded as the user reads the feed. This example includes an article load time selector that simulates data fetch delays.

Example Usage Option

The following article loading delay time selector enables simulation of different amounts of latency introduced by data fetches. Such latency can affect assistive technology behavior when using assistive technology functions for navigating by article.

Example

The example feed experience below is presented in an iframe in order not to obstruct from the rest of the content of the page.

Keyboard Support

Key Function
Page Down Move focus to next article.
Page Up Move focus to previous article.
Control + End Move focus to the first focusable element after the feed.
Control + Home Move focus to the first focusable element in the feed.

Role, Property, State, and Tabindex Attributes

Role Attribute Element Usage
feed div
  • Identifies the element that contains the set of feed articles.
  • The feed element is a structural container that it is not focusable.
aria-labelledby="IDREF" div Provides an accessible name for the feed element.
aria-busy="true" div
  • Set during the process of loading additional articles.
  • Removed when the article load process is complete.
  • Enables assistive technologies to ignore DOM changes during the load process and then render the changes when the DOM is stable.
article div
  • Identifies an element that contains content for a feed article.
  • Feed articles and their content are Dynamically created in the JavaScript.
tabindex="0" div
  • Makes the article element focusable and includes it in the page Tab sequence.
  • As the user reads, the feed loads additional articles based on either focus position or scroll position.
  • Assistive technologies can ensure new articles are loaded and correctly visually positioned by ensuring that the article containing the assistive technology reading cursor has or contains DOM focus.
aria-labelledby="IDREF_LIST" div
  • Identifies one or more elements in the article that provide a distinguishing label.
  • In this example, the restaurant name sufficiently identifies each article.
  • Note: due to the nature of feeds, labels are often not unique.
aria-describedby="IDREF_LIST" div
  • Refers to the list of elements that provide the main content of the article.
  • Does not include elements that are identically repeated in every article, e.g., does not include the "Bookmark" button.
  • Enables assistive technology users to skim the feed.
aria-posinset="INTEGER" div
  • Indicates the position of the article in the feed.
  • Numbering starts with 1.
  • Note: If articles are added to the beginning of the feed, all articles are renumbered.
aria-setsize="INTEGER" div Set to the total number of articles currently contained by the feed element.

JavaScript and CSS Source Code

The following Javascript and CSS is used by the feed-display.html page:

HTML Source Code

Please open feed-display.html and view source.

Back to Top