Checkbox Navigation Menu
Checkbox Example 6: JQuery
Sandwich Condiments
-
Lettuce
-
Tomato
-
Mustard
-
Sprouts
The best available organic romaine lettuce grown locally.
These organically grown beef steak tomatoes are vide rippened.
This is a gourmet mustard from Germany.
These organically grown alfalfa sprouts are a great addition to any sandwich.
Keyboard Shortcuts
- Tab: Move between checkbox items.
- Space: Toggle
aria-checked state of checkbox with keyboard focus.
ARIA Roles and Properties
-
Roles:
role="application"
role="checkbox"
- States and properties:
aria-checked
aria-describedby
aria-labelledby
HTML Source Code
Show HTML Source Code: checkbox6.inc
<div role="application">
<h3 id="cond">Sandwich Condiments</h3>
<ul class="checkboxes"
aria-labelledby="cond">
<li role="checkbox"
tabindex="0"
aria-checked="false"
aria-describedby="cond desc1">
<img src="images/unchecked.gif" alt="" role="presentation">
Lettuce
</li>
<li role="checkbox"
tabindex="0"
aria-checked="true"
aria-describedby="cond desc2">
<img src="images/checked.gif" alt="" role="presentation">
Tomato
</li>
<li role="checkbox"
tabindex="0"
aria-checked="true"
aria-describedby="cond desc3">
<img src="images/checked.gif" alt="" role="presentation">
Mustard
</li>
<li role="checkbox"
tabindex="0"
aria-checked="true"
aria-describedby="cond desc4">
<img src="images/checked.gif" alt="" role="presentation">
Sprouts
</li>
</ul>
<div id="desc1" class="offscreen">The best available organic romaine lettuce grown locally.</div>
<div id="desc2" class="offscreen">These organically grown beef steak tomatoes are vide rippened.</div>
<div id="desc3" class="offscreen">This is a gourmet mustard from Germany.</div>
<div id="desc4" class="offscreen">These organically grown alfalfa sprouts are a great addition to any sandwich.</div>
</div>
Javascript Source Code
Show Javascript Source Code: checkbox6.js
<script type="text/javascript">
var KEY_SPACE = 32;
$(document).ready(
function() {
$('ul.checkboxes li').click(
function() {
if( $(this).attr('aria-checked') == 'true') {
$(this).attr('aria-checked', 'false');
$(this).children('img').attr('src','images/unchecked.gif');
} else {
$(this).attr('aria-checked', 'true');
$(this).children('img').attr('src','images/checked.gif');
} // endif
} // endif click event handler function
); // end click event handler
/**
* The Opera browser performs some window commands from the keypress event,
* not keydown like Firefox, Safari, and IE. This event handler consumes
* keypresses for relevant keys so that Opera behaves when the user is
* manipulating the checkboxes with the keyboard.
*/
$('ul.checkboxes li').keypress(function(e) {
if (e.which == KEY_SPACE) {
e.stopPropagation;
return false;
}
return true;
}); // end keypress handler
$('ul.checkboxes li').keydown(
function(e) {
if( e.which == KEY_SPACE ) {
if( $(this).attr('aria-checked') == 'true') {
$(this).attr('aria-checked', 'false');
$(this).children('img').attr('src','images/unchecked.gif');
} else {
$(this).attr('aria-checked', 'true');
$(this).children('img').attr('src','images/checked.gif');
} // endif
e.stopPropagation();
e.preventDefault();
return false;
} // endif
return true;
} // endif keydown event handler function
); // end keydown event handler
} // end ready function
); // end ready event
</script>
CSS Source Code
Show CSS Source Code: checkbox6.css
<style type="text/css">
/* Example 1 CSS
// This example uses CSS background-image to visual display checkbox status
*/
ul.checkboxes {
margin: 0;
padding: 0;
}
ul.checkboxes li {
padding: 0;
margin: 0;
margin-left: 1em;
padding: 4px;
list-style: none;
width: 6em;
}
ul.checkboxes li:hover {
padding: 2px;
border: gray 2px solid;
}
ul.checkboxes li:focus,
ul.checkboxes li:active {
padding: 2px;
border: black 2px solid;
}
.offscreen {
position: absolute;
left: -200em;
top: -20em;
}
</style>
W3C Validation of HTML5