Skip to content

Commit

Permalink
Horizontal Slider Example: Revised for Consistency with Editorial Gui…
Browse files Browse the repository at this point in the history 
…delines and Example Template

For issue #229, modified examples/slider/slider-1.html and examples/slider/css/slider.css:
1. Changed title from "Color Picker Using Slider Widgets" to "Horizontal Slider Example".
2. Made H1 consistent with title element.
3. Added link to review issue.
4. Added link to design pattern in intro paragraph and made editorial revisions and corrections.
5. Made editorial revisions and corrections to vertical slider link and description.
6. Moved stylles for idColorBox and idColorInfo divs to slider.css from `<head>` element so they are viewable by the reader as part of the example.
7. Changed the heading inside of the example to H3 from H2 so it fits in the structure of the page.
8. Added missing screen reader separator element that marks the end of the example code.
9. Fixed H2 for roles, states, and properties to be consistent with template.
10. Added a row for tabindex to the attributes table and made other editorial revisions and corrections.
11. Fixed href value of design pattern link in nav footer.
  • Loading branch information
@mcking65
mcking65 committed Mar 11, 2017
1 parent 16b75b4 commit a7cca9c
Show file tree
Hide file tree
Showing 2 changed files with 128 additions and 90 deletions.
10 changes: 10 additions & 0 deletions examples/slider/css/slider.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,4 +54,14 @@ label {
margin-bottom: 0.5em;
}

#idColorBox {
width: 200px;
height: 200px;
border: black solid medium;
text-align: center;
padding: 0.25em;
}

#idColorInfo {
padding-top: 5px;
}
208 changes: 118 additions & 90 deletions examples/slider/slider-1.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Color Picker Using Slider Widgets | WAI-ARIA Authoring Practices 1.1</title>
<title>Horizontal Slider Example | WAI-ARIA Authoring Practices 1.1</title>

<!-- Core js and css shared by all examples; do not modify when using this template. -->
<link rel="stylesheet" href="https://www.w3.org/StyleSheets/TR/2016/base.css">
Expand All @@ -14,40 +14,28 @@
<!-- example js and css files -->
<link rel="stylesheet" href="css/slider.css">
<script src="js/slider.js" type="text/javascript"></script>


<style type="text/css">
#idColorBox {
width: 200px;
height: 200px;
border: black solid medium;
text-align: center;
padding: 0.25em;
}

#idColorInfo {
padding-top: 5px;
}
</style>
</head>
<body>

<main>

<h1>ARIA Example: Color Picker Using Slider Widgets</h1>
<p>This example implements the slider design pattern
that is often found in color pickers. Change the sliders to update the background color of box (note: the box is visually below the 3 slider controls), with the HEX and RGB values in form controls.</p>

<h1>Horizontal Slider Example</h1>
<p>
<strong>NOTE:</strong> This example has been recently updated.
Please provide feedback in
<a href="https://github.com/w3c/aria-practices/issues/229">issue 229.</a>
</p>
<p>
Following is an example of a color picker that demonstrates the
<a href="../../#slider">slider design pattern.</a>
Change the background color of the box below the picker by adjusting the sliders for red, green, and blue values.
The HEX and RGB values of the chosen color are displayed by the color box.
</p>
<p>Similar examples include: </p>
<ul>
<li><a href="slider-2.html">Vertical Slider and Sliders Using ARIA-Valuetext</a>: Demonstrates a veritcally aligned slider and sliders with text values.</li>
<!-- list other examples that implement the same design pattern. -->
<li><a href="slider-2.html">Vertical Slider Examples Using aria-valuetext</a>: Vertical sliders that demonstrate using aria-valuetext to translate numeric values into user-friendly strings. </li>
</ul>

<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">
<div id="idSliders">
<div id="idRed" class="label">Red</div>
Expand Down Expand Up @@ -93,19 +81,18 @@ <h2 id="ex_label">Example</h2>
</div>
</div>

<h2>Color Box</h2>
<h3>Color Box</h3>
<div id="idColorInfo">
<div id="idColorBox"></div>
<label>Color (HEX): <input type="text" readonly id="idColorValueHex" value=""></label>
<label>Color (RGB): <input type="text" readonly id="idColorValueRGB" value=""></label>
</div>
</div>

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

<section>
<h2 id="kbd_label">Keyboard Support</h2>

<table aria-labelledby="kbd_label" class="def">
<thead>
<tr>
Expand All @@ -115,83 +102,129 @@ <h2 id="kbd_label">Keyboard Support</h2>
</thead>
<tbody>
<tr>
<th><kbd>Right Arrow</kbd>,<br/> <kbd>Up Arrow</kbd></th>
<td>Increase slide value by increment value</td>
<th><kbd>Right Arrow</kbd></th>
<td>Increases slider value one step.</td>
</tr>
<tr>
<th><kbd>Up Arrow</kbd></th>
<td>Increases slider value one step.</td>
</tr>
<tr>
<th><kbd>Left Arrow</kbd></th>
<td>Decreases slider value one step.</td>
</tr>
<tr>
<th><kbd>Left Arrow</kbd>,<br/> <kbd>Down Arrow</kbd></th>
<td>Decrease slide value by increment value</td>
<th><kbd>Down Arrow</kbd></th>
<td>Decreases slider value one step.</td>
</tr>
<tr>
<th><kbd>Page Up</kbd></th>
<td>Increase slide value by jump value</td>
<td>Increases slider value multiple steps. In this slider, jumps ten steps.</td>
</tr>
<tr>
<th><kbd>Page Down</kbd></th>
<td>Decrease slide value by jump value</td>
<td>Decreases slider value multiple steps. In this slider, jumps ten steps.</td>
</tr>
<tr>
<th><kbd>Home</kbd></th>
<td>Set slider to minimum value</td>
<td>Sets slider to its minimum value.</td>
</tr>
<tr>
<th><kbd>End</kbd></th>
<td>Set slider to maximum value</td>
<td>Sets slider to its maximum value.</td>
</tr>
</tbody>
</table>
</section>

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

<table aria-labelledby="rps_label" class="data attributes">
<thead>
<tr>
<th scope="col">Role</th>
<th scope="col">Attribute</th>
<th scope="col">Element</th>
<th scope="col">Usage</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row"><code>slider</code></th>
<td></td>
<td><code>div</code></td>
<td>Identify the widget as a slider</td>
</tr>
<tr>
<td></td>
<th scope="row"><code>aria-valuemax</code></th>
<td><code>div</code></td>
<td>Maximum value of the slider</td>
</tr>
<tr>
<td></td>
<th scope="row"><code>aria-valuemin</code></th>
<td><code>div</code></td>
<td>Minimum value of the slider</td>
</tr>
<tr>
<td></td>
<th scope="row"><code>aria-valuenow</code></th>
<td><code>div</code></td>
<td>Current value of the slider</td>
</tr>
<tr>
<td></td>
<th scope="row"><code>aria-labelledby</code></th>
<td><code>div</code></td>
<td>Reference to define a unique descriptive <em>accessible name</em> for each slider widget</td>
</tr>
</tbody>
</table>
<section>
<h2 id="rps_label">Role, Property, State, and Tabindex Attributes</h2>
<table aria-labelledby="rps_label" class="data attributes">
<thead>
<tr>
<th scope="col">Role</th>
<th scope="col">Attribute</th>
<th scope="col">Element</th>
<th scope="col">Usage</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">
<code>slider</code>
</th>
<td></td>
<td>
<code>div</code>
</td>
<td>
<ul>
<li>Identifies the element as a slider.</li>
<li>Set on the <code>div</code> that represents as the movable thumb because it is the operable element that represents the slider value.</li>
</ul>
</td>
</tr>
<tr>
<td></td>
<th scope="row">
<code>tabindex=<q>0</q></code>
</th>
<td>
<code>div</code>
</td>
<td>
<ul>
<li>Includes the slider thumb in the page tab sequence.</li>
<li>Added by the JavaScript during instantiation.</li>
</ul>
</td>
</tr>
<tr>
<td></td>
<th scope="row">
<code>aria-valuemax=<q>255</q></code>
</th>
<td>
<code>div</code>
</td>
<td>Specifies the maximum value of the slider.</td>
</tr>
<tr>
<td></td>
<th scope="row">
<code>aria-valuemin=<q>0</q></code>
</th>
<td>
<code>div</code>
</td>
<td>Specifies the minimum value of the slider.</td>
</tr>
<tr>
<td></td>
<th scope="row">
<code>aria-valuenow=<q>NUMBER</q></code>
</th>
<td>
<code>div</code>
</td>
<td>Indicates the current value of the slider.</td>
</tr>
<tr>
<td></td>
<th scope="row">
<code>aria-labelledby=<q>IDREF</q></code>
</th>
<td>
<code>div</code>
</td>
<td>Refers to the element containing the name of the slider.</td>
</tr>
</tbody>
</table>
</section>

<section>
<section>
<h2>Javascript and CSS Source Code</h2>

<ul>
<li>CSS: <a href="css/slider.css" type="tex/css">slider.css</a></li>
<li>Javascript: <a href="js/slider.js" type="text/javascript">slider.js</a></li>
Expand All @@ -203,11 +236,6 @@ <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><code id="sc1"></code></pre>
<div role="separator" id="sc1_end_sep" aria-labelledby="sc1_end_sep sc1_label" aria-label="End of"></div>
<!--
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');
sourceCode.make();
Expand All @@ -216,7 +244,7 @@ <h2 id="sc1_label">HTML Source Code</h2>

</main>
<nav>
<a href="../../../#slider">Slider Design Pattern in WAI-ARIA Authoring Practices 1.1</a>
<a href="../../#slider">Slider Design Pattern in WAI-ARIA Authoring Practices 1.1</a>
</nav>
</body>
</html>

0 comments on commit a7cca9c

Please sign in to comment.