Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Updated slider examples including a text and vertical sliders #86

Merged
merged 7 commits into from
Sep 21, 2015
Merged

Updated slider examples including a text and vertical sliders #86

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
f96a039
Updated slider examples including a text and vertical sliders
jongund Aug 31, 2015
b142df8
Updated lieder examples and added source code generator
jongund Aug 31, 2015
e9af9df
Updated link example to use example template
jongund Aug 31, 2015
d7386fe
Updated button example to use example template
jongund Aug 31, 2015
4df1264
Added links to examples in aria-practices document
jongund Sep 1, 2015
cda2b5c
Updated link example to include image techniques
jongund Sep 2, 2015
ac3b86d
Fixed conflicts
jongund Sep 21, 2015
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 6 additions & 1 deletion practices/aria-practices.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -549,6 +549,7 @@ <h3 class="widget-name">Button</h3>
<td class="widget-example">
<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 taskforce is developing examples for APG version 1.1 that will be directly incorporated into the guide.</p>
<ul>
<li><a href="examples/button/button.html">Button role examples</a></li>
<li><a href="http://www.oaa-accessibility.org/examplep/button1/" title="Button role example using text-only buttons" target="_blank">Open Ajax Alliance button with text label</a></li>
<li><a href="http://www.oaa-accessibility.org/examplep/button2/" title="Button role example using image buttons" target="_blank">Open Ajax Alliance button using image label</a></li>
</ul>
Expand Down Expand Up @@ -1220,7 +1221,9 @@ <h3 class="widget-name">Link</h3>
<tr>
<td class="widget-keyboard-head">Example: </td>
<td class="widget-keyboard">
<p class="ednote">Add link to example</p>
<ul>
<li><a href="examples/link/link.html">Link role examples</a></li>
</ul>
</td>
</tr>
</tbody>
Expand Down Expand Up @@ -1944,6 +1947,8 @@ <h3 class="widget-name">Slider</h3>
<td class="widget-example">
<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 taskforce is developing examples for APG version 1.1 that will be directly incorporated into the guide.</p>
<ul>
<li><a href="examples/slider/slider-1.html">Horizontal Silder Examples (e.g. color picker)</a></li>
<li><a href="examples/slider/slider-2.html">Vertical and Text Slider Examples (e.g. Thermostat Controls)</a></li>
<li> <a href="http://www.oaa-accessibility.org/examplep/slider1/" title="Slider" target="_blank" rel="nofollow">Open Ajax Alliance Sliders</a></li>
<li> <a href="http://mindtrove.info/creating-an-accessible-internationalized-dojo-rating-widget/" title="Creating an Accessible Dojo Rating Widget" target="_blank" rel="nofollow">MINDTROVE Rating Widget</a></li>
<li> <a href="http://files.paciellogroup.com/blogmisc/ARIA/slider/" title="Basic ARIA Slider" target="_blank" rel="nofollow">Paciello Group slider</a></li>
Expand Down
8 changes: 5 additions & 3 deletions practices/examples/button/button.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,8 @@
<link href="../css/core.css" rel="stylesheet">
<link href="../css/table.css" rel="stylesheet">
<link href="css/button.css" rel="stylesheet">

<script src="../js/examples.js" type="text/javascript"></script>
<script src="js/button.js" type="text/javascript"></script>
</head>
<body>
Expand Down Expand Up @@ -179,16 +181,16 @@ <h2>Source Code</h2>
<li>Javascript: <a href="js/button.js" type="text/javascript">link.js</a></li>
</ul>


<div id="sc1">

</div>

<script>

sourceCode.add('print-sc', 'print')
sourceCode.add('mute-sc', 'toggle')
sourceCode.add('alert-sc', 'alert1')
sourceCode.add('noncompliant-sc', 'alert2')
sourceCode.make()

</script>

</body>
Expand Down
14 changes: 10 additions & 4 deletions practices/examples/button/js/button.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,18 +1,24 @@
function init() {
// Create variables for the various buttons
var printButton = document.getElementById('print');
var alertButton = document.getElementById('button');
var toggleButton = document.getElementById('toggle');
var alert1Button = document.getElementById('alert1');
var alert2Button = document.getElementById('alert2');

// Add event listeners to the various buttons
printButton.addEventListener('click', printButtonEventHandler);
printButton.addEventListener('keydown', printButtonEventHandler);

alertButton.addEventListener('click', alertButtonEventHandler);
alertButton.addEventListener('keydown', alertButtonEventHandler);

toggleButton.addEventListener('click', toggleButtonEventHandler);
toggleButton.addEventListener('keydown', toggleButtonEventHandler);

alert1Button.addEventListener('click', alertButtonEventHandler);
alert1Button.addEventListener('keydown', alertButtonEventHandler);

alert2Button.addEventListener('click', alertButtonEventHandler);
alert2Button.addEventListener('keydown', alertButtonEventHandler);


}

function printButtonEventHandler(event) {
Expand Down
22 changes: 17 additions & 5 deletions practices/examples/css/core.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,9 +16,10 @@ body {
h1,
h2,
h3 {
font: normal 170%/100% Garamond, "Times New Roman", serif;
font: normal 170%/100% Helvetica, Verdana, Arial, sans-serif;
margin-top: 1em;
margin-bottom: 0;
color: 630;
color: #630;
background: transparent;
}

Expand All @@ -27,11 +28,12 @@ h1 {
}

h2 {
font: normal 150%/100% Garamond, "Times New Roman", serif;
font: normal 150%/100% Helvetica, Verdana, Arial, sans-serif;
margin-top: 2em;
}

h3 {
font: normal 140%/120% Garamond, "Times New Roman", serif;
font: normal 140%/120% Helvetica, Verdana, Arial, sans-serif;
}

a {
Expand All @@ -57,7 +59,17 @@ img {
}

code {
font: bold "Courier new", Courier, Monospace;
font-family: "Courier new", Courier, Monospace;
font-weight: bold;
}

.sourcecode {
font-family: "Courier new", Courier, Monospace;
margin: 0;
padding: 1em;
border: thin solid black;
background: #EEEEEE;
font-size: 120%;
}

#example {
Expand Down
2 changes: 1 addition & 1 deletion practices/examples/link/css/link.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,4 +26,4 @@
background-image: url('../images/w3c-logo.png');
width:153px;
height:104px;
}
}
2 changes: 1 addition & 1 deletion practices/examples/link/js/link.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,4 +9,4 @@ function goToLink(event, url) {
event.preventDefault()
event.stopPropagation()
}
}
}
86 changes: 41 additions & 45 deletions practices/examples/link/link.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,8 @@
<link href="../css/core.css" rel="stylesheet">
<link href="../css/table.css" rel="stylesheet">
<link href="css/link.css" rel="stylesheet">

<script src="../js/examples.js" type="text/javascript"></script>
<script src="js/link.js" type="text/javascript"></script>
</head>
<body>
Expand All @@ -22,21 +24,23 @@ <h1>Creating links using <code>role=link</code></h1>

<h2 id="id1">Example Links</h2>

<div id="example">
<div>

<table aria-labelledby="id1">
<thead>
<tr>
<th>Technique</th>
<th>Link</th>
<th>Accessibility Features</th>
<th>Source Code</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>span</code> element with text content</td>
<td>
<span tabindex="0"
<span id="c1"
tabindex="0"
role="link"
onclick="goToLink(event, 'http://www.w3.org/')"
onKeyDown="goToLink(event, 'http://www.w3.org/')">
Expand All @@ -52,56 +56,47 @@ <h2 id="id1">Example Links</h2>
<li>Accessible name (e.g. what a screen reader will say) from child text content of <code>span</code> element.</li>
</ul>
</td>
<td>
<div id="sc1">

</div>
</td>
</tr>
<tr>
<td><code>img</code> element</td>
<td>
<img tabindex="0"
onclick="goToLink(event, 'http://www.w3.org/')"
onKeyDown="goToLink(event, 'http://www.w3.org/')"
role="link"
src="images/w3c-logo.png" alt="W3C Website">
</td>
<td>
<ul>
<td><code>img</code> element</td>
<td>
<img id="c2"
tabindex="0"
onclick="goToLink(event, 'http://www.w3.org/')"
onKeyDown="goToLink(event, 'http://www.w3.org/')"
role="link"
src="images/w3c-logo.png" alt="W3C Website"/>
</td>
<td>
<ul>
<li><code>img</code> element with <code>alt</code> attribute.</li>
<li><code>img</code> element has <code>onclick</code> event to handle mouse clicks.</li>
<li><code>img</code> element has <code>onkeydown</code> event to handle keyboard support.</li>
<li><code>img</code> element has <code>tabindex="0"</code> to become part of tab order of the page.</li>
<li>Accessible name from <code>alt</code> attribute.</li>
</ul>
</td>
</tr>
<tr>
<td>Content</td>
<td>
<span aria-label="W3C website"
tabindex="0"
role="link"
class="w3c1"
onclick="goToLink(event, 'http://www.w3.org/TR/wai-aria-practices/')"
onKeyDown="goToLink(event, 'http://www.w3.org/TR/wai-aria-practices/')">
</span>
</ul>
</td>
<td>
<ul>
<li><code>span</code> element with background image and with <code>role="link"</code>.</li>
<li><code>span</code> element has <code>onclick</code> event to handle mouse clicks.</li>
<li><code>span</code> element has <code>onkeydown</code> event to handle keyboard support.</li>
<li><code>span</code> element has <code>tabindex="0"</code> to become part of tab order of the page.</li>
<li>Accessible name from <code>aria-label</code> attribute.</li>
</ul>
<div id="sc2">

</div>
</td>
</tr>
<tr>
<td>Background Image</td>
<td>
<span aria-label="W3C website"
tabindex="0"
role="link"
class="w3c2"
onclick="goToLink(event, 'http://www.w3.org/TR/wai-aria-practices/')"
onKeyDown="goToLink(event, 'http://www.w3.org/TR/wai-aria-practices/')">
<span id="c3"
aria-label="W3C website"
tabindex="0"
role="link"
class="w3c2"
onclick="goToLink(event, 'http://www.w3.org/TR/wai-aria-practices/')"
onKeyDown="goToLink(event, 'http://www.w3.org/TR/wai-aria-practices/')">
</span>
</td>
<td>
Expand All @@ -113,6 +108,11 @@ <h2 id="id1">Example Links</h2>
<li>Accessible name from <code>aria-label</code> attribute.</li>
</ul>
</td>
<td>
<div id="sc3">

</div>
</td>
</tr>
</tbody>
</table>
Expand Down Expand Up @@ -163,21 +163,17 @@ <h2 id="id_rps">ARIA Roles, Properties and States</h2>
</tbody>
</table>

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

<h2>Source Code</h2>

<ul>
<li>CSS: <a href="css/link.css" type="tex/css">link.css</a></li>
<li>Javascript: <a href="js/link.js" type="text/javascript">link.js</a></li>
</ul>

<div id="sc1">

</div>

<script>
sourceCode.add('sc1', 'example')
sourceCode.add('sc1', 'c1')
sourceCode.add('sc2', 'c2')
sourceCode.add('sc3', 'c3')
sourceCode.make()
</script>

Expand Down
24 changes: 2 additions & 22 deletions practices/examples/slider/css/slider.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ div.aria-widget-slider {

div.aria-widget-slider .rail {
margin: 2px;
padding: 0;
padding: 1px;
background-color: #eee;
border: 1px solid #888;
position: relative;
Expand Down Expand Up @@ -39,27 +39,6 @@ div.focus .rail {
background-color: #CCC;
}

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

#idSliders {
float: left;
width: 350px;
}

#idColorInfo {
padding-top: 5px;
margin-left: 370px;
}

#id_kbd {
clear: both;
}


label {
Expand All @@ -68,3 +47,4 @@ label {
margin-bottom: 0.5em;
}


49 changes: 49 additions & 0 deletions practices/examples/slider/css/text-slider.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,49 @@
/* CSS Document */

div.aria-widget-text-slider {
margin-top: 0.5em;
margin-bottom: 0.5em;
height: 120px;
}

div.aria-widget-text-slider .rail {
margin: 2px;
padding: 1px;
background-color: #eee;
border: 1px solid #888;
position: relative;
top: 2em;
}

div.aria-widget-text-slider .thumb {
border: 1px solid #888;
border-top-color: #666;
border-left-color: #666;
background-color: #DDD;
position: relative;
}

div.aria-widget-text-slider div.value {
text-align: center;
display: block;
position: absolute;
}

div.focus .thumb {
border: 1px solid #444;
background-color: #888;
position: relative;
}

div.focus .rail {
background-color: #CCC;
}


div.aria-widget-text-slider label {
display: block;
margin-top: 0.5em;
margin-bottom: 0.5em;
font-weight: bold;
}

Loading