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 is a new WAI-ARIA feature, introduced by WAI-ARIA 1.1. This page provides a proposed implementation of a feed component. This proposal does not yet have ARIA Practices Task Force consensus. 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. Outside of the feed, an article load time selector is available for simulating data fetch delays.

Unlike other examples in the WAI-ARIA Authoring Practices, the example experience has its own page separate from this documentation page.

Example

The example feed experience is presented on a separate feed display 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 before 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.