Skip to content

Commit

Permalink
Breadcrumb Example Updates for issue #187
Browse files Browse the repository at this point in the history 
* Update to new template
* Fix typos
* Changed crumb links to better represent the position of this page in APG architecture:
   * First crumb now points to APG main doc, not outside APG.
    * Second crumb points to the design pattern section in main doc
    * Third crumb points to the breadcrumb pattern in design pattern section
    * final crumb points to the breadcrumb example page.
* Editorial revisions to intro and accessibility features.
* Editorial revisions to breadcrumb example property table
    * Remove links from states and properties in Breadcrumb example. We are not maintaining links to the aria spec or html spec from example pages; they are not respec documents.
    * Editorial revision to description in aria-current row.

* Added aria-label for the nav element to breadcrumb example properties table
  • Loading branch information
@mcking65
Michiel Bijl authored and mcking65 committed Feb 6, 2017
1 parent 7898a65 commit d0f7ae4
Showing 1 changed file with 75 additions and 39 deletions.
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>

0 comments on commit d0f7ae4

Please sign in to comment.