Skip to content

Commit

Permalink
Action-1725: Create a proposal for an article feed
Browse files Browse the repository at this point in the history 
* Add "feed" role (renamed as per group consensus during today's concall)
* Make aria-posinset and aria-setsize supported properties of article
* Changed aria-busy so that it can be applied to all elements rather than
  limited to live regions
* Add normative requirement that authors MUST set aria-busy to true if
  changes to a rendered widget would result in that widget missing
  required owned elements during the update process
  • Loading branch information
@mcking65 @joanmarie
mcking65 authored and joanmarie committed Nov 12, 2015
1 parent 6ba5f3d commit fce8f4a
Showing 1 changed file with 104 additions and 5 deletions.
109 changes: 104 additions & 5 deletions aria/aria.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -560,6 +560,7 @@ <h3>Document Structure</h3>
<li><rref>definition</rref></li>
<li><rref>directory</rref></li>
<li><rref>document</rref></li>
<li><rref>feed</rref></li>
<li><rref>figure</rref></li>
<li><rref>group</rref></li>
<li><rref>heading</rref></li>
Expand Down Expand Up @@ -886,6 +887,7 @@ <h2>Definition of Roles</h2>
<p>A section of a page that consists of a composition that forms an independent part of a document, page, or site.</p>
<p>An article is not a navigational <a>landmark</a>, but may be nested to form a discussion where assistive technologies could pay attention to article nesting to assist the user in following the discussion. An article could be a forum post, a magazine or newspaper article, a web log entry, a user-submitted comment, or any other independent item of content. It is <em>independent</em> in that its contents could stand alone, for example in syndication. However, the <a>element</a> is still associated with its ancestors; for instance, contact information that applies to a parent body element still covers the article as well. When nesting articles, the child articles represent content that is related to the content of the parent article. For instance, a web log entry on a site that accepts user-submitted comments could represent the comments as articles nested within the article for the web log entry. Author, heading, date, or other information associated with an article does not apply to nested articles.</p>
<p>When the user navigates an element assigned the role of <rref>article</rref>, <a>assistive technologies</a> that typically intercept standard keyboard events SHOULD switch to document browsing mode, as opposed to passing keyboard events through to the web application. Assistive technologies MAY provide a feature allowing the user to navigate the hierarchy of any nested <rref>article</rref> elements.</p>
<p>When an <code>article</code> is in the context of a <rref>feed</rref>, the author MAY specify values for <pref>aria-posinset</pref> and <pref>aria-setsize</pref>.</p>
</div>
<table class="role-features">
<caption>Characteristics:</caption>
Expand Down Expand Up @@ -930,7 +932,12 @@ <h2>Definition of Roles</h2>
</tr>
<tr>
<th class="role-properties-head" scope="row">Supported States and Properties:</th>
<td class="role-properties"> </td>
<td class="role-properties">
<ul>
<li><pref>aria-posinset</pref></li>
<li><pref>aria-setsize</pref></li>
</ul>
</td>
</tr>
<tr>
<th class="role-inherited-head" scope="row">Inherited States and Properties:</th>
Expand Down Expand Up @@ -2197,6 +2204,94 @@ <h2>Definition of Roles</h2>
</table>
</div>
<hr/>
<div class="role" id="feed">
<rdef>feed</rdef>
<div class="role-description">
<p>A scrollable <rref>list</rref> of <rref>articles</rref> where scrolling may cause <rref>articles</rref> to be added to or removed from either end of the list.</p>
<p>A <code>feed</code> enables users of <a>assistive technologies</a> that have a document browse mode, such as screen readers, to use the browse mode reading cursor to both read and scroll through a stream of rich content that may continue scrolling infinitely by loading more content as the user reads. In a <code>feed</code>, <a>assistive technologies</a> provide a web application with signals of the user's reading cursor movement by moving <a>user agent</a> focus, enabling the application to both add new content and visually position content as the user browses the page. The <code>feed</code> also lets authors inform assistive technologies when additions and removals are occurring so assistive technologies can more reliably update their reading view without disrupting reading or degrading performance.</p>
<p>For example, a <code>feed</code> could be used to present a stream of news stories where each <rref>article</rref> contains a story with text, links, images, and comments as well as widgets for sharing and commenting. As a screen reader user reads and interacts with each story and moves the screen reader reading cursor from story to story, each story scrolls into view and, as needed, new stories are loaded.</p>
<p>A <code>feed</code> is a container element whose children have role <rref>article</rref>. When <rref>articles</rref> are added or removed from either or both ends of a <code>feed</code>, authors SHOULD set <sref>aria-busy</sref> to <code>true</code> on the <code>feed</code> element before the changes are made and set it to <code>false</code> after the changes are complete. Authors SHOULD avoid inserting or removing <rref>articles</rref> in the middle of a <code>feed</code>. These requirements help <a>assistive technologies</a> gracefully respond to changes in the <code>feed</code> content that occur simultaneously with user commands to move the reading cursor within the <code>feed</code>.</p>
<p>Authors SHOULD make each <rref>article</rref> in a <code>feed</code> focusable and ensure that the application scrolls an <rref>article</rref> into view when <a>user agent</a> focus is set on the <rref>article</rref> or one of its descendant elements. For example, in HTML, each <rref>article</rref> element should have a <code>tabindex</code> value of either <code>-1</code> or <code>0</code>.</p>
<p> When an <a>assistive technology</a> reading cursor moves from one <rref>article</rref> to another, <a>assistive technologies</a> SHOULD set user agent focus on the <rref>article</rref> that contains the reading cursor. If the reading cursor lands on a focusable element inside the <rref>article</rref>, the assistive technology MAY set focus on that element in lieu of setting focus on the containing <rref>article</rref>.</p>
<p>Because the ability to scroll to another <rref>article</rref> with an <a>assistive technology</a> reading cursor depends on the presence of another <rref>article</rref> in the page, authors SHOULD attempt to load additional <rref>articles</rref> before <a>user agent</a> focus reaches an <rref>article</rref> at either end of the set of <rref>articles</rref> that has been loaded. Alternatively, authors MAY include an <rref>article</rref> at either or both ends of the loaded set of <rref>articles</rref> that includes an element, such as a <rref>button</rref>, that lets the user request more <rref>articles</rref> to be loaded.</p>
<p>In addition to providing a brief label, authors MAY apply <pref>aria-describedby</pref> to <rref>article</rref> elements in a <code>feed</code> to suggest to screen readers which elements to speak after the label when users navigate by <rref>article</rref>. Screen readers MAY provide users with a way to quickly scan <code>feed</code> content by speaking both the label and accessible description when navigating by <rref>article</rref>, enabling the user to ignore repetitive or less important elements, such as embedded interaction widgets, that the author has left out of the description.</p>
<p> Authors SHOULD provide keyboard commands for moving focus among <rref>articles</rref> in a <code>feed</code> so users who do not utilize an assistive technology that provides <rref>article</rref> navigation features can use the keyboard to navigate the <code>feed</code>.</p>
<p>If the number of articles available in a <code>feed</code> supply is static, authors MAY specify <pref>aria-setsize</pref> on <rref>article</rref> elements in that <code>feed</code>. However, if the total number is extremely large, indefinite, or changes often, authors MAY set <pref>aria-setsize</pref> to <code>-1</code> to communicate the unknown size of the set.</p>
<p>See the <cite><a href="http://www.w3.org/TR/wai-aria-practices/"><abbr title="Accessible Rich Internet Applications">WAI-ARIA</abbr> Authoring Practices Guide</a></cite> [[WAI-ARIA-PRACTICES]] for additional details on implementing a feed design pattern.</p>
</div>
<table class="role-features">
<caption>Characteristics:</caption>
<thead>
<tr>
<th scope="col">Characteristic</th>
<th scope="col">Value</th>
</tr>
</thead>
<tbody>
<tr>
<th class="role-abstract-head" scope="row">Is Abstract:</th>
<td class="role-abstract"> </td>
</tr>
<tr>
<th class="role-parent-head" scope="row">Superclass Role:</th>
<td class="role-parent"><rref>list</rref></td>
</tr>
<tr>
<th class="role-children-head" scope="row">Subclass Roles:</th>
<td class="role-children">Placeholder</td>
</tr>
<tr>
<th class="role-base-head" scope="row">Base Concept:</th>
<td class="role-base"> </td>
</tr>
<tr>
<th class="role-related-head" scope="row">Related Concepts:</th>
<td class="role-related"></td>
</tr>
<tr>
<th class="role-scope-head" scope="row">Required Context Role:</th>
<td class="role-scope"> </td>
</tr>
<tr>
<th class="role-mustcontain-head" scope="row">Required Owned Elements:</th>
<td class="role-mustcontain"><rref>article</rref></td>
</tr>
<tr>
<th class="role-required-properties-head">Required States and Properties:</th>
<td class="role-required-properties"> </td>
</tr>
<tr>
<th class="role-properties-head" scope="row">Supported States and Properties:</th>
<td class="role-properties"></td>
</tr>
<tr>
<th class="role-inherited-head" scope="row">Inherited States and Properties:</th>
<td class="role-inherited">Placeholder</td>
</tr>
<tr>
<th class="role-namefrom-head" scope="row">Name From:</th>
<td class="role-namefrom">author</td>
</tr>
<tr>
<th class="role-namerequired-head" scope="row">Accessible Name Required:</th>
<td class="role-namerequired">False</td>
</tr>
<tr>
<th class="role-namerequired-inherited-head" scope="row">Inherits Name Required:</th>
<td class="role-namerequired-inherited"> </td>
</tr>
<tr>
<th class="role-childpresentational-head" scope="row">Children Presentational:</th>
<td class="role-childpresentational"> </td>
</tr>
<tr>
<th class="role-presentational-inherited-head" scope="row">Inherits Presentational:</th>
<td class="role-presentational-inherited"> </td>
</tr>
</tbody>
</table>
</div>
<hr/>
<div class="role" id="figure">
<rdef>figure</rdef>
<div class="role-description">
Expand Down Expand Up @@ -8185,8 +8280,11 @@ <h2>Definitions of States and Properties (all aria-* attributes)</h2>
<div class="state" id="aria-busy">
<sdef>aria-busy</sdef>
<div class="state-description">
<p>Indicates that a <a>live region</a> or <a>widget</a> is being populated.</p>
<p>The default is that <sref>aria-busy</sref> is <code>false</code>. If authors know that multiple parts of the same element need to be loaded or modified, they can set <sref>aria-busy</sref> to <code>true</code> when the first part is loaded, and then set <sref>aria-busy</sref> to <code>false</code> when the last part is loaded. When a widget is missing <a href="#mustContain">required owned elements</a> due to script execution or loading, authors MUST mark a containing element with <sref>aria-busy</sref> equal to <code>true</code>. For example, until a section of a page is fully initialized and complete, an author could mark the document element as busy. If there is an error updating the element, authors MAY set the <sref>aria-invalid</sref> attribute to <code>true</code>.</p>
<p>Indicates an element is being modified and that assistive technologies MAY want to wait until the modifications are complete before exposing them to the user.</p>
<p>The default value of <code>aria-busy</code> is <code>false</code> for all elements. When <code>aria-busy</code> is <code>true</code> for an element, assistive technologies MAY ignore changes to content owned by that element and then process all changes made during the busy period as a single, atomic update when <code>aria-busy</code> becomes <code>false</code>.</p>
<p>If it is necessary to make multiple additions, modifications, or removals within a container element that is already either partially or fully rendered, authors MAY set <code>aria-busy</code> to <code>true</code> on the container element before the first change, and then set it to <code>false</code> when the last change is complete. For example, if multiple changes to a <a>live region</a> should be spoken as a single unit of speech, authors MAY set <code>aria-busy</code> to <code>true</code> while the changes are being made and then set it to <code>false</code> when the changes are complete and ready to be spoken.</p>
<p>If an element with role <rref>feed</rref> is marked busy, assistive technologies MAY defer rendering changes that occur inside the <code>feed</code> with the exception of user-initiated changes that occur inside the <rref>article</rref> that the user is reading during the busy period.</p>
<p>If changes to a rendered <rref>widget</rref> would create a state where the <rref>widget</rref> is missing <a href="#mustContain">required owned elements</a> during script execution, authors MUST set <code>aria-busy</code> to <code>true</code> on the <rref>widget</rref> during the update process. For example, if a rendered tree grid required a set of simultaneous updates to multiple discontiguous branches, an alternative to replacing the complete tree element with a single update would be to mark the tree busy while each of the branches are modified.</p>
</div>
<table class="state-features">
<caption>Characteristics:</caption>
Expand Down Expand Up @@ -8226,11 +8324,11 @@ <h2>Definitions of States and Properties (all aria-* attributes)</h2>
<tbody>
<tr>
<th class="value-name" scope="row"><strong class="default">false (default)</strong>:</th>
<td class="value-description">There are no more expected updates for the element.</td>
<td class="value-description">There are no expected updates for the element.</td>
</tr>
<tr>
<th class="value-name" scope="row">true</th>
<td class="value-description">The element is still being updated.</td>
<td class="value-description">The element is being updated.</td>
</tr>
</tbody>
</table>
Expand Down Expand Up @@ -10958,6 +11056,7 @@ <h2>Substantive changes since the <a href="http://www.w3.org/TR/2015/WD-wai-aria
<li>31-Jul-2015: Added <rref>term</rref> role.</li>
<li>27-Aug-2015: Added statement that <pref>aria-readonly</pref> and <pref>aria-required</pref> SHOULD NOT be used or exposed on <rref>columnheader</rref> or <rref>rowheader</rref> when those headers descend from a non-interactive <rref>table</rref>.</li>
<li>15-Oct-2015: Added <rref>figure</rref> role.</li>
<li>12-Nov-2015: Added <rref>feed</rref> role; made <pref>aria-posinset</pref> and <pref>aria-setsize</pref> supported properties of <rref>article</rref>; changed <sref>aria-busy</sref> so that it could be applied to all elements rather than limited to <a>live regions</a>; added normative requirement that authors MUST set <sref>aria-busy</sref> to <code>true</code> if changes to a rendered <rref>widget</rref> would result in that <rref>widget</rref> missing required owned elements during the update process.</li>
</ul>
</section>
<section>
Expand Down

0 comments on commit fce8f4a

Please sign in to comment.