Skip to content

Commit

Permalink
Toolbar Example Draft HTML for issue #126
Browse files Browse the repository at this point in the history 
In aria-practices.html toolbar section,
added link to toolbar example page and removed link to exterrnal example.

In examples/toolbar/toolbar.html:
1. Wrote an example overview and Added link to issue 126.
2. Added accessibility feature descriptions.
3. Added keyboard support description.
4. Added role, state, and property information.
5. Updated links to js and css files.
6. Updated link in nav section to toolbar design pattern.
  • Loading branch information
@mcking65
mcking65 committed Nov 13, 2016
1 parent 2bb9c40 commit 0e2bd2f
Show file tree
Hide file tree
Showing 2 changed files with 50 additions and 51 deletions.
7 changes: 1 addition & 6 deletions aria-practices.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1557,7 +1557,6 @@ <h4>Example</h4>

<section class="widget" id="toolbar">
<h3>Toolbar</h3>

<p>A <a class="role-reference" href="#toolbar">toolbar</a> is a container for grouping a set of controls, such as buttons, menubuttons, or checkboxes.</p>
<p>
When a set of controls is visually presented as a group, the <code>toolbar</code> role can be used to communicate the presence and purpose of the grouping to screen reader users.
Expand All @@ -1572,7 +1571,6 @@ <h3>Toolbar</h3>

<section class="notoc">
<h4>Keyboard Interaction</h4>

<ul>
<li>
<kbd>Tab</kbd>: Moves focus into and out of the toolbar.
Expand Down Expand Up @@ -1609,10 +1607,7 @@ <h4>WAI-ARIA Roles, States, and Properties</h4>

<section class="notoc">
<h4>Example</h4>
<p class="note">Any examples referenced here that are hosted outside www.w3.org may have changed and may not accurately exemplify the guidance in this section. The APG task force is developing examples for APG version 1.1 that will be directly incorporated into the guide.</p>
<ul>
<li><a href="http://www.oaa-accessibility.org/examplep/toolbar1/" target="_blank" rel="nofollow">Open Ajax Alliance toolbar</a></li>
</ul>
<p><a href="examples/toolbar/toolbar.html">Toolbar Example</a>: A toolbar including buttons, links, and checkboxes that uses roving tabindex to manage focus.</p>
</section>
</section>

Expand Down
94 changes: 49 additions & 45 deletions examples/toolbar/toolbar.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,24 +16,20 @@
<body>
<main>
<h1>Toolbar Example</h1>

<p>
<!-- Provide an overview of the example where the first sentence provides a link to the section of aria-practices.html that describes the pattern this example implements. -->
Replace this paragraph with an overview of the example that is something like the following. The
below example section demonstrates a simple checkbox that implements the
<a href="../../#checkbox">design pattern for checkbox</a>
.
<strong>NOTE:</strong> This example is not yet complete.
When it is ready for review, feedback will be welcom in
<a href="https://github.com/w3c/aria-practices/issues/126">issue 126.</a>
</p>
<p>
Following is an example implementation of the
<a href="../../#toolbar">design pattern for toolbar</a>
that demonstrates how a toolbar can group buttons, links, and checkboxes into a single tab stop.
It also illustrates the roving tabindex method for managing focus in a composite component.
</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>
<!--
Note the ID of the following div that contains the example HTML is used as a parameter for the sourceCode.add() function.
The sourceCode functions in the examples/js/examples.js render the HTML source to show it to the reader of the example page.
If you change the ID of this div, be sure to update the parameters of the sourceCode.add() function call, which is made following the div with id="sc1" where the HTML is render.
The div for the rendered HTML source is in the last section of the page.
-->
<div id="ex1">
<!-- Replace content of this div with the example. -->
<p>This is the place where the reader will experience the functioning example.</p>
Expand All @@ -53,35 +49,40 @@ <h2 id="ex_label">Example</h2>

<section>
<h2>Accessibility Features</h2>
<p class="annotate">Please replace this content with a list of accessibility features
demonstrated in this implementation, such as:</p>
<ol>
<li>ARIA roles</li>
<li>property and state information</li>
<li>Event handlers</li>
<li><code>tabindex</code> values</li>
<li>
The focus is managed using <a href="../../#kbd_roving_tabindex">roving tabindex</a>.
Because the control that most recently had focus has <code>tabindex=&quot;0&quot;</code>,
focus returns to the control that last had focus when tabbing into the toolbar.
</li>
<li>Since there is only a single disabled control, to ensure screen reader users are aware of its presence, it is focusable.</li>
<li>The menubutton can be opened with either <kbd>Enter</kbd> or <kbd>Down Arrow</kbd> since <kbd>Down Arrow</kbd> is not needed to navigate a horizontal toolbar.</li>
</ol>
</section>

<section>
<h2 id="kbd_label">Keyboard Support</h2>
<!--
List the keys supported in this example.
Recommendation: Copy the list from the keyboard section of the design pattern in aria-practices.html
and then reduce/simplify it to describe only what this example supports and how it behaves.
-->
<ul>
<li><kbd>KEY_NAME</kbd>: function</li>
<li><kbd>KEY_NAME</kbd>: function</li>
<li>
<kbd>Tab</kbd>: Moves focus into and out of the toolbar.
When focus moves into the toolbar, the first enabled control receives focus.
If the toolbar has previously contained focus, the control that last had focus receives focus.
</li>
<li>
<kbd>Left Arrow</kbd>: Moves focus to the previous control,
wrapping from the first control to the last.
</li>
<li>
<kbd>Right Arrow</kbd>: Moves focus to the next control,
wrapping from the last control to the first.
</li>
<li><kbd>Home</kbd>: Moves focus to the first control.</li>
<li><kbd>End</kbd>: Moves focus to the last control.</li>
</ul>
</section>

<section>
<h2 id="rps_label">Role, Property, State, and Tabindex Attributes</h2>
<!--
Update this table to describe how roles, properties, states, and tabindex are used in this example.
If the content will vary significantly for the above implementations, make this a level 4 section inside each of the above level 3 implementation sections.
-->
<table aria-labelledby="rps_label">
<thead>
<tr>
Expand All @@ -92,38 +93,42 @@ <h2 id="rps_label">Role, Property, State, and Tabindex Attributes</h2>
</thead>
<tbody>
<tr>
<th><code>role=&quot;ROLE_NAME&quot;</code></th>
<td><code>HTML_ELEMENT</code></td>
<td>Brief explanation of usage, purpose, benefit, and/or guidance that is relevant to this specific implementation.</td>
<th><code>role=&quot;toolbar&quot;</code></th>
<td><code>div</code></td>
<td>
Identifies the toolbar container for assistive technologies.
Because focus is managed with a roving tabindex instead of <code>aria-activedescendant</code>, the toolbar div is not focusable.
</td>
</tr>
<tr>
<th>
<!-- Specify states and properties used like this; replace with the attributes that are relevant. -->
<code>aria-labelledby=&quot;ID_REF&quot;</code>
<code>aria-label=&quot;LABEL_STRING&quot;</code>
</th>
<td><code>HTML_ELEMENT</code></td>
<td>Brief explanation of usage, purpose, benefit, and/or guidance that is relevant to this specific implementation.</td>
<td><code>div</code> with <code>toolbar</code> role</td>
<td>
Since the toolbar does not have a visible label, provides an accessible label that helps screen reader users understand the purpose of the toolbar.
Invisible labels are used when sighted users can derive purpose from visual context.
</td>
</tr>
<tr>
<th>And so on ... covering all relevant attributes</th>
<td>...</td>
<td>...</td>
<th><code>aria-disabled=&quot;true&quot;</code></th>
<td><code>button</code></td>
<td>Informs assistive technologies of the disabled state.</td>
</tr>
</tbody>
</table>
</section>

<section>
<h2>Javascript and CSS Source Code</h2>
<!-- After the js and css files are named with the name of this example, change the href and text of the following 2 links to refer to the appropriate js and css files. -->
<ul>
<li>
CSS:
<a href="css/example_name.css" type="tex/css">example_name.css</a>
<a href="css/toolbar.css" type="tex/css">toolbar.css</a>
</li>
<li>
Javascript:
<a href="js/example_name.js" type="text/javascript">example_name.js</a>
<a href="js/toolbar.js" type="text/javascript">toolbar.js</a>
</li>
</ul>
</section>
Expand All @@ -136,7 +141,6 @@ <h2 id="sc1_label">HTML Source Code</h2>
<!--
The following script will show the reader the HTML source for the example that is in the div with ID 'ex1'.
It renders the HTML in the preceding div with ID 'sc1'.
If you change the ID of either the 'ex1' div or the 'sc1' div, be sure to update the sourceCode.add function parameters.
-->
<script>
sourceCode.add('sc1', 'ex1');
Expand All @@ -146,7 +150,7 @@ <h2 id="sc1_label">HTML Source Code</h2>
</main>
<nav>
<!-- Update the pattern_ID parameter of this link to refer to the APG design pattern section related to this example. -->
<a href="../../#pattern_ID">EXAMPLE_NAME Design Pattern in WAI-ARIA Authoring Practices 1.1</a>
<a href="../../#toolbar">Toolbar Design Pattern in WAI-ARIA Authoring Practices 1.1</a>
</nav>
</body>
</html>

0 comments on commit 0e2bd2f

Please sign in to comment.