Radio Navigation Menu
Radio Example 4: JQuery
W3C Validation of HTML5
Lunch Options
-
Thai
-
Subway
-
Jimmy Johns
-
Radio Maria
-
Rainbow Gardens
Drink Options
Water
Tea
Coffee
Cola
Ginger Ale
Keyboard Shortcuts
- Tab: Move between radio button groups.
- Up and Down Arrow: Move selection between radio items in a group
ARIA Roles and Properties
-
Roles:
role="application"
role="radiogroup"
role="radio"
- States and properties:
aria-checked
aria-describedby
aria-labelledby
HTML Source Code
Show HTML Source Code: radio4.inc
<div role="application">
<h3 id="rg1_label">Lunch Options</h3>
<ul class="radiogroup"
id="rg1"
role="radiogroup"
aria-labelledby="rg1_label"
>
<li id="r1"
class="first"
tabindex="0"
role="radio"
aria-checked="false">
<img role="presentation" src="images/unchecked.gif" alt=""/>
Thai
</li>
<li id="r2"
tabindex="-1"
role="radio"
aria-checked="false">
<img role="presentation" src="images/unchecked.gif" alt=""/>
Subway
</li>
<li id="r3"
tabindex="-1"
role="radio"
aria-checked="false">
<img role="presentation" src="images/unchecked.gif" alt=""/>
Jimmy Johns
</li>
<li id="r4"
tabindex="-1"
role="radio"
aria-checked="true">
<img role="presentation" src="images/unchecked.gif" alt=""/>
Radio Maria
</li>
<li id="r5"
class="last"
tabindex="0"
role="radio"
aria-checked="false">
<img role="presentation" src="images/unchecked.gif" alt=""/>
Rainbow Gardens
</li>
</ul>
<!-- Start of second Radio Group -->
<h3 id="rg2_label">Drink Options</h3>
<ul id="rg2"
class="radiogroup"
role="radiogroup"
aria-labelledby="rg2_label"
>
<li id="r6" class="first" tabindex="0" role="radio" aria-checked="false"><img role="presentation" src="images/unchecked.gif" alt=""/>Water</li>
<li id="r7" tabindex="-1" role="radio" aria-checked="false"><img role="presentation" src="images/unchecked.gif" alt=""/>Tea</li>
<li id="r8" tabindex="-1" role="radio" aria-checked="false"><img role="presentation" src="images/unchecked.gif" alt=""/>Coffee</li>
<li id="r9" tabindex="-1" role="radio" aria-checked="false"><img role="presentation" src="images/unchecked.gif" alt=""/>Cola</li>
<li id="r10" class="last" tabindex="0" role="radio" aria-checked="false"><img role="presentation" src="images/unchecked.gif" alt=""/>Ginger Ale</li>
</ul>
</div>
Javascript Source Code
Show Javascript Source Code: radio4.js
<script type="text/javascript">
var KEY_SPACE = 32;
var KEY_UP = 38;
var KEY_DOWN = 40;
$(document).ready(
function() {
$('ul.radiogroup li').click(
function() {
$(this).siblings('li').each(
function() {
$(this).attr('aria-checked', 'false');
$(this).attr('tabindex', '-1');
$(this).children('img').attr('src','images/unchecked.gif');
} // end each function
) // end each
$(this).attr('aria-checked', 'true');
$(this).children('img').attr('src','images/checked.gif');
$(this).attr('tabindex', '0');
} // endif click event handler function
); // end click event handler
$('ul.radiogroup li').keydown(
function(e) {
if( e.keyCode == KEY_SPACE ||
e.keyCode == KEY_UP ||
e.keyCode == KEY_DOWN) {
$(this).parent().children('li').each(
function() {
$(this).attr('aria-checked', 'false');
$(this).attr('tabindex', '-1');
$(this).children('img').attr('src','images/unchecked.gif');
} // end each function
) // end each
var selected_node = this;
if( e.keyCode == KEY_UP ) {
selected_node = $(this).prev();
if( !$(selected_node).length ) {
selected_node = $(this).parent().children('li:last');
} // endif
} else {
if( e.keyCode == KEY_DOWN ) {
selected_node = $(this).next();
if( !$(selected_node).length ) {
selected_node = $(this).parent().children('li:first');
} // endif
} // endif
} // end if else
$(selected_node).attr('aria-checked', 'true');
$(selected_node).children('img').attr('src','images/checked.gif');
$(selected_node).attr('tabindex', '0');
selected_node.focus();
e.stopPropagation();
e.preventDefault();
return false;
} // endif
return true;
} // endif keydown event handler function
); // end keydown event handler
$('ul.radiogroup li.first').focus(
function() {
if( $(this).siblings('li:last').attr('tabindex') == '0' &&
$(this).siblings('li:last').attr('aria-checked') == 'false' ) {
$(this).siblings('li:last').attr('tabindex', '-1');
}
} // endif focus event handler function
); // end focus event handler
$('ul.radiogroup li.last').focus(
function() {
if( $(this).siblings('li:first').attr('tabindex') == '0' &&
$(this).siblings('li:first').attr('aria-checked') == 'false' ) {
$(this).siblings('li:first').attr('tabindex', '-1');
}
} // endif focus event handler function
); // end focus event handler
$('ul.radiogroup li.first').blur(
function() {
if( $(this).attr('tabindex') == '0' &&
$(this).attr('aria-checked') == 'false' ) {
$(this).siblings('li:last').attr('tabindex', '0');
}
} // endif blur event handler function
); // end blur event handler
$('ul.radiogroup li.last').blur(
function() {
if( $(this).attr('tabindex') == '0' &&
$(this).attr('aria-checked') == 'false' ) {
$(this).siblings('li:first').attr('tabindex','0');
}
} // endif blur event handler function
); // end blur event handler
} // end ready function
); // end ready event </script>
CSS Source Code
Show CSS Source Code: radio4.css
<style type="text/css">
/* Example 1 CSS
// This example uses CSS background-image to visual display checkbox status
*/
ul.radiogroup {
margin: 0;
padding: 0;
}
ul.radiogroup li {
padding: 0;
margin: 0;
margin-left: 1em;
padding: 4px;
list-style: none;
width: 6em;
}
ul.radiogroup li:hover {
padding: 2px;
border: gray 2px solid;
}
ul.radiogroup li:focus,
ul.radiogroup li:active {
padding: 2px;
border: black 2px solid;
}
.offscreen {
position: absolute;
left: -200em;
top: -20em;
}
</style>