Skip to content

Commit

Permalink
Resolve merge conflicts in tabs examples/breadcrumb/index
Browse files Browse the repository at this point in the history 
Modified examples/tabs/tabs-1/tabs.html to resolve conflicts when merging tabs branch with master for pull request #269:
* Update href of design pattern link in intro paragraph
* Update href of design pattern in link in footer nav
* Delete some template comments
  • Loading branch information
@mcking65
mcking65 committed Feb 9, 2017
2 parents eb14297 + 85aab94 commit a6bc19d
Show file tree
Hide file tree
Showing 22 changed files with 1,963 additions and 820 deletions.
156 changes: 155 additions & 1 deletion aria-practices.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -562,6 +562,160 @@ <h4>Examples</h4>
</section>
</section>

<section class="widget" id="feed">
<h3 class="widget-name">Feed</h3>
<p class="note">
This section contains an early draft of new content.
Feedback is welcom in
<a href="https://github.com/w3c/aria-practices/issues/245">issue 245.</a>
</p>
<p>
A feed is a section of a page that automatically loads new content as the user reads.
Content in a feed is segmented into article elements. Thus, it can be thought of as a dynamic list of articles
that often appears to scroll infinitely.
</p>
<p>
The primary difference between a feed and other ARIA patterns that support loading data as users scroll,
e.g., a <a href="#grid">grid</a>, is that a feed is a structure, not a widget. This means assistive
technologies with a reading mode, such as screen readers, will default to reading mode when
interacting with feed content, making the feed pattern most useful for blocks of
unstructured information that may contain links or other interactive elements.
</p>
<p>
For example, a product page on a shopping site has a related products section that
displays five product suggestions at a time. As the user scrolls, more suggestions are requested and loaded into the DOM.
While a static design might include a next button for loading five more product suggestions, a dynamic implementation
that automatically loads data as needed simplifies the user
experience and reduces the inertia of viewing more than the first five suggestions.
</p>
<p>
Unfortunately, when web pages load content dynamically based on scroll events, it
creates interoperability difficulties for users of assistive technologies that cannot
sufficiently mimic visual scrolling.
Even if the page also observes focus movements in
order to identify when more content is needed,
there can still be problems because requiring assistive technologies to
move DOM focus in response to every reading cursor movement, regardless of context,
can also negatively impact a screen reading experience.
</p>
<p>
The feed pattern enables reliable assistive technology reading mode interaction by
establishing the following interoperability agreement between the web page and assistive
technologies:
</p>
<ol>
<li>In the context of a feed, the web page code is responsible for:
<ul>
<li>
Appropriate visual scrolling of the content based on which article contains DOM focus.
</li>
<li>Loading or removing feed articles based on which article contains DOM focus.</li>
</ul>
</li>
<li>In the context of a feed, assistive technologies with a reading mode are responsible for:
<ul>
<li>Indicating which article contains the reading cursor by ensuring the article element or one of its descendants has DOM focus.</li>
<li>providing reading mode keys that move DOM focus to the next and previous articles.</li>
<li>Providing reading mode keys for moving the reading cursor and DOM focus past the end and before the start of the feed.</li>
</ul>
</li>
</ol>
<p>
Thus, implementing the feed pattern allows a screen reader to reliably read and trigger the loading
of feed content while staying in its reading mode.
</p>
<p>
Another feature of the feed pattern is its ability to facilitate skim reading by
assistive technology users. Web page authors may provide both an accessible name and
description for each article. By identifying the elements inside of an
article that provide the title and the primary content, assistive technologies can provide
functions that enable users to jump from article to article and efficiently discern which
articles may be worthy of more attention.
</p>
<section class="notoc">
<h4>Keyboard Interaction</h4>
<p>
The feed pattern is not based on a desktop GUI widget so the <code>feed</code> role is not associated with any well-established keyboard conventions.
Supporting the following, or a similar, interface is recommended.
</p>
<p>When focus is inside the feed:</p>
<ul>
<li><kbd>Page Down</kbd>: Move focus to next article.</li>
<li><kbd>Page Up</kbd>: Move focus to previous article.</li>
<li><kbd>Control + End</kbd>: Move focus to the first focusable element after the feed.</li>
<li><kbd>Control + Home</kbd>: Move focus to the first focusable element before the feed.</li>
</ul>
<ol class="note">
<li>Due to the lack of convention, providing easily discoverable keyboard interface documentation is especially important.</li>
<li>
In some cases, a feed may contain a nested feed.
For example, an article in a social media feed may contain a feed of comments on that article.
To navigate the nested feed, users first move focus inside the nested feed.
Options for supporting nested feed navigation include:
<ul>
<li>
Users move focus into the nested feed from the content of the containing article with <kbd>Tab</kbd>.
This may be slow if the article contains a significant number of links, buttons, or other widgets.
</li>
<li>Provide a key for moving focus from the elements in the containing article to the first item in the nested feed, e.g., <kbd>Alt + Page Down</kbd>.</li>
<li>To continue reading the outer feed, <kbd>Control + End</kbd> moves focus to the next article in the outer feed.</li>
</ul>
</li>
<li>In the rare circumstance that a feed article contains a widget that uses the above suggested keys, the feed navigation key will operate the contained widget, and the user needs to move focus to an element that does not utilize the feed navigation keys in order to navigate the feed.</li>
</ol>
</section>
<section class="notoc">
<h4>WAI-ARIA Roles, States, and Properties</h4>
<ul>
<li>The element that contains the set of feed articles has role <a href="#feed" class="role-reference">feed</a>.</li>
<li>
If the feed has a visible title, the <code>feed</code> element has <a href="#aria-labelledby" class="property-reference">aria-labelledby</a> referring to the element containing the title.
Otherwise, the <code>feed</code> element has a label specified with <a href="#aria-label" class="property-reference">aria-label</a>.
</li>
<li>
Each unit of content in a feed is contained in an element with role <a href="#article" class="role-reference">article</a>.
All content inside the feed is contained in an <code>article</code> element.
</li>
<li>
Each <code>article</code> element has
<a href="#aria-labelledby" class="property-reference">aria-labelledby</a>
referring to elements inside the article that can serve as a distinguishing label.
</li>
<li>
It is optional but strongly recommended for Each <code>article</code> element to have
<a href="#aria-describedby" class="property-reference">aria-describedby</a>
referring to one or more elements inside the article that serve as the primary content of the article.
</li>
<li>
Each <code>article</code> element has
<a href="#aria-posinset" class="property-reference">aria-posinset</a>
set to a value that represents its position in the feed.
</li>
<li>
Each <code>article</code> element has
<a href="#aria-setsize" class="property-reference">aria-setsize</a>
set to a value that represents either the total number of articles that have been loaded or the total number in the feed,
depending on which value is deemed more helpful to users.
If the total number in the feed is undetermined, it can be represented by a <code>aria-setsize</code> value of <code>-1</code>.
</li>
<li>
When <code>article</code> elements are being added to or removed from the <code>feed</code> container,
and if the operation requires multiple DOM operations,
the <code>feed</code> element has
<a href="#aria-busy" class="state-reference">aria-busy</a>
set to <code>true</code> during the update operation.
Note that it is extremely important that <code>aria-busy</code> is set to <code>false</code> when the operation is complete or the changes may not become visible to some assistive technology users.
</li>
</ul>
</section>
<section class="notoc">
<h4>Example</h4>
<p>
<a href="examples/feed/feed.html">Example Implementation of Feed Pattern</a>
</p>
</section>
</section>

<section class="widget" id="grid">
<h3>Grids : Interactive Tabular Data and Layout Containers</h3>

Expand Down Expand Up @@ -938,7 +1092,7 @@ <h3>Link</h3>
<h4>Keyboard Interaction</h4>
<ul>
<li><kbd>Enter</kbd>: Executes the link and moves focus to the link target.</li>
<li><kbd>Shift + F10</kbd>: Opens the link's context menu.</li>
<li><kbd>Shift + F10</kbd> (Optional): Opens a context menu for the link.</li>
</ul>
</section>
<section class="notoc">
Expand Down
114 changes: 75 additions & 39 deletions examples/breadcrumb/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,83 +2,119 @@
<html lang="en">
<head>
<meta charset="utf-8" />
<title>ARIA Breadcrumb Design Pattern Example</title>
<title>Breadcrumb Example | WAI-ARIA Authoring Practices 1.1</title>

<link href="../css/core.css" rel="stylesheet">
<link href="../css/table.css" rel="stylesheet">
<script src="../js/examples.js" type="text/javascript"></script>
<link href="css/breadcrumb.css" rel="stylesheet">
</head>
<body>
<main>
<h1>ARIA Breadcrumb Design Pattern Example</h1>
<p>
This page requires updates per
<a href="https://github.com/w3c/aria-practices/issues/187">issue 187.</a>
Please provide any additional feedback in this issue.
</p>
<p>This example shows the <a href="../../#breadcrumb">breadcrumb design pattern</a>.</p>

<p>
It is recommended authors use an ordered list to structure the list of links.
Visual separators should be added through <abbr title="Cascading Style Sheets">CSS</abbr>.
</p>

<div id="example">

<h1>Breadcrumb Example</h1>
<p>The following example demonstrates the <a href="../../#breadcrumb">breadcrumb design pattern</a>.</p>
<section>
<h2 id="ex_label">Example</h2>
<div role="separator" id="ex_start_sep" aria-labelledby="ex_start_sep ex_label" aria-label="Start of"></div>
<div id="ex1">
<nav aria-label="Breadcrumb" class="breadcrumb">
<ol>
<li>
<a href="https://www.w3.org/TR/wai-aria-1.1/">WAI-ARIA</a>
<a href="../../">WAI-ARIA Authoring Practices 1.1</a>
</li>
<li>
<a href="../../">Authoring Practices</a>
<a href="../../#aria_ex">Design Patterns</a>
</li>
<li>
<a href="../../#aria_ex">Design Pattern Examples</a>
<a href="../../#breadcrumb">Breadcrumb Pattern</a>
</li>
<li>
<a href="./index.html" aria-current="page">Breadcrumb</a>
<a href="./index.html" aria-current="page">Breadcrumb Example</a>
</li>
</ol>
</nav>

</div>
<div role="separator" id="ex_end_sep" aria-labelledby="ex_end_sep ex_label" aria-label="End of"></div>
</section>

<h2 id="id_a11yfeature">Accessibility Feature</h2>

<p>If markedup with a labelled <code>nav</code> element, the breadcrumb will be exposed as such.</p>

<h2 id="id_kbd">Keyboard Support</h2>
<section>
<h2>Accessibility Features</h2>
<ul>
<li>The set of links is structured using an ordered list .</li>
<li>The visual separators between links are added through <abbr title="Cascading Style Sheets">CSS</abbr> so they do not add unnecessary screen reader verbosity.</li>
<li>A labelled <code>nav</code> element identifies the structure and makes it easy to identify and locate.</li>
</ul>
</section>

<section>
<h2 id="kbd_label">Keyboard Support</h2>
<p>No keyboard interaction needed.</p>
</section>

<h2 id="id_rps">ARIA Roles, Properties and States</h2>

<table aria-labelledby="id_rps">
<section>
<h2 id="rps_label">Role, Property, State, and Tabindex Attributes</h2>
<table aria-labelledby="rps_label">
<thead>
<tr>
<th>Role</th>
<th>Property/State</th>
<th>Usage</th>
<th scope="col">Role</th>
<th scope="col">Attribute</th>
<th scope="col">Element</th>
<th scope="col">Usage</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td><a href="http://www.w3.org/TR/wai-aria-1.1/#aria-current"><code>aria-current</code></a> with a value of <code>page</code></td>
<th scope="row">
<code>aria-label=<q>Breadcrumb</q></code>
</th>
<td>
<code>nav</code>
</td>
<td>
Mark the current page within the widget.
Provides a label that describes the type of navigation provided in the <code>nav</code> element.
</td>
</tr>
<tr>
<td></td>
<th scope="row">
<code>aria-current=<q>page</q></code>
</th>
<td>
<code>a</code>
</td>
<td>
Applied to the last link in the set to indicate that it represents the current page.
</td>
</tr>
</tbody>
</table>
</section>

<script src="../js/examples.js" type="text/javascript"></script>

<h2>Source Code</h2>

<section>
<h2>Javascript and CSS Source Code</h2>
<ul>
<li>CSS: <a href="css/breadcrumb.css" type="tex/css">breadcrumb.css</a></li>
<li>
CSS:
<a href="css/breadcrumb.css" type="tex/css">breadcrumb.css</a>
</li>
</ul>
</section>

<section>
<h2 id="sc1_label">HTML Source Code</h2>
<div role="separator" id="sc1_start_sep" aria-labelledby="sc1_start_sep sc1_label" aria-label="Start of"></div>
<pre id="sc1"></pre>
<div role="separator" id="sc1_end_sep" aria-labelledby="sc1_end_sep sc1_label" aria-label="End of"></div>
<script>
sourceCode.add('sc1', 'ex1');
sourceCode.make();
</script>
</section>
</main>

<nav>
<a href="../../#breadcrumb">Breadcrumb Design Pattern in WAI-ARIA Authoring Practices 1.1</a>
</nav>
</body>
</html>
Loading

0 comments on commit a6bc19d

Please sign in to comment.