From 346556b3284dd830db048a118ef5e4bebfcb2fd3 Mon Sep 17 00:00:00 2001 From: Matt King Date: Wed, 6 Dec 2017 22:50:55 -0800 Subject: [PATCH] Feed Example: Complete Documentation For issue #246, modified examples/feed/feed.html: * Completed description. * Completed keyboard documentation * Completed roles, states, and properties documentation* Completed links to javascript and css files * Updated HTML source section * Added link to review issue. Also deleted unused file examples/feed/css/feed.css. --- examples/feed/css/feed.css | 4 - examples/feed/feed.html | 171 +++++++++++++++++++++++-------------- 2 files changed, 106 insertions(+), 69 deletions(-) delete mode 100644 examples/feed/css/feed.css diff --git a/examples/feed/css/feed.css b/examples/feed/css/feed.css deleted file mode 100644 index 85c190566f..0000000000 --- a/examples/feed/css/feed.css +++ /dev/null @@ -1,4 +0,0 @@ -.annotate{ - font-style: italic; - color: #366ED4; -} diff --git a/examples/feed/feed.html b/examples/feed/feed.html index 66d82c1ab8..59745032ab 100644 --- a/examples/feed/feed.html +++ b/examples/feed/feed.html @@ -10,26 +10,24 @@ - - - -

Feed Example

- NOTE: This page is work in progress; is not ready for review. - Work on this example is tracked by - issue 246. + NOTE: Please provide feedback on this example in + issue 565.

The example below implements the feed design pattern. for a restaurant review site. - To immitate an infinitely scrolling set of data, information about ten restaurants is repeated infinitely. + To immitate 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

@@ -42,18 +40,6 @@

Example

-
-

Accessibility Features

-

Optional section: If appropriate, please replace this content with a list of any special or noteworthy accessibility features - demonstrated in this implementation, such as:

-
    -
  1. What distinguishes this example from related examples.
    2. -
  2. Keyboard chortcuts, live regions, unusual event handling, or other ancillary best practices that are employed.
    3. -
  3. Do not include information that would be repeated in the following keyboard and attribute sections.
    4. -
  4. Delete this section if not needed.
    5. -
-
-

Keyboard Support

@@ -65,21 +51,20 @@

Keyboard Support

- - + + - - + + + + + + + + + +
KeyName - Description of key function. - - Page DownMove focus to next article.
KeyName -
    -
  • If condition 1, performs function 1.
    • -
  • If condition 2, performs function 2.
    • -
  • Only use a list if multiple statements are needed.
    • -
- 		Page UpMove focus to previous article.
Control + EndMove focus to the first focusable element after the feed.
Control + HomeMove focus to the first focusable element before the feed.
@@ -87,9 +72,6 @@

Keyboard Support

Role, Property, State, and Tabindex Attributes

- @@ -101,61 +83,120 @@

Role, Property, State, and Tabindex Attributes

- - - + + + + + + + + + + + + + + + + + + + + + + + + - - + + + + + + + + + + + + + + + + + + + + + + +
RoleNameHTML_ELEMENTfeeddiv +
    +
  • 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"divProvides 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.
    • +
+
articlediv - Describe usage/purpose, e.g., indicates the focusable element that serves as the ... +
    +
  • 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.
    • +
AttributeName=AttributeValueHTML_ELEMENT
aria-labelledby="IDREF_LIST"div
    -
  • explanation of usage, purpose, benefit, and/or guidance relevant to this implementation.
    • -
  • If making multiple statements, use list for brevity and clarity
    • -
  • Do not make a single item list.
    • +
  • 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"divSet 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 feedDisplay.html page:

HTML Source Code

- -
- - +

Please open feedDisplay.html and view source.