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 |
|
|
aria-labelledby="IDREF" |
div |
Provides an accessible name for the feed element. | |
aria-busy="true" |
div |
|
|
article |
div |
|
|
tabindex="0" |
div |
|
|
aria-labelledby="IDREF_LIST" |
div |
|
|
aria-describedby="IDREF_LIST" |
div |
|
|
aria-posinset="INTEGER" |
div |
|
|
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.