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.

There may be support gaps in some browser and assistive technology combinations, especially for mobile/touch devices. Testing code based on this example with assistive technologies is essential before considering use in production systems.
The ARIA and Assistive Technologies Project is developing measurements of assistive technology support for APG examples.
Robust accessibility can be further optimized by choosing implementation patterns that maximize use of semantic HTML and heeding the warning that No ARIA is better than Bad ARIA.

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.

Loading delay

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:

CSS: feedDisplay.css
Javascript: feed.js, feedDisplay.js, main.js, utils.js

HTML Source Code

Please open feed-display.html and view source.