I have a rather lightweight script that is page-weight efficient that
I need to make accessible to keyboard users. Here's the tabs script
so far:
/*
* Tabs Functionality
* @author Joe McCann
*/
$j('#qaNav li a').click(function(){
var $removal = $j('.makeSelected.selected');
var $hideDiv = $removal.attr('rel');
var $showDiv = $j(this).attr('rel');
if ($showDiv == $hideDiv)
return;
switch ($showDiv) {
case '#citizens':
var imgIndex = 0;
break;
case '#business':
var imgIndex = 1;
break;
case '#veterans':
var imgIndex = 2;
break;
case '#parents':
var imgIndex = 3;
break;
case '#seniors':
var imgIndex = 4;
break;
case '#tourists':
var imgIndex = 5;
break;
case '#government':
var imgIndex = 6;
break;
default:
var imgIndex = 0;
break;
}
$removal.removeClass('selected');
$removal.addClass('makeSelected');
$j(this).addClass('selected');
$j($hideDiv).fadeOut('fast', function(){
$j('div.quickList_right > img').remove();
$j('div.quickList_right').append('<img src="' +
imageArr[imgIndex] + '" alt="" />');
$j($showDiv).fadeIn('slow');
});
});
Here's the markup:
<div id="quickCols">
<h2>Quick Answers</h2>
<div id="qaWrapper">
<div id="innerQAwrapper">
<div id="nonJSqaNav" style="display: none;">
<!--Empty Div-->
</div>
<ul id="qaNav">
<li><a class="makeSelected" rel="#citizens"><span>Citizens</span></a></
li>
<li><a class="makeSelected" rel="#business"><span>Business</span></a></
li><li><a class="makeSelected" rel="#veterans"><span>Veterans</span></
a></li>
<li><a class="makeSelected" rel="#parents"><span>Parents</span></a></
li><li><a class="makeSelected" rel="#seniors"><span>Seniors</span></
a></li>
<li><a class="makeSelected selected" rel="#tourists"><span>Tourists</
span></a></li>
<li><a class="makeSelected" rel="#government"><span>Government</span></
a></li>
</ul>
</div>
</div>
<div id="citizens" class="quickLists" style="display: none;">
<div class="quickList_left">
<h3>How Do I...</h3>
<ul class="links">
<li>
<a href="http://www.window.state.tx.us/taxes/";>File taxes in Texas?</
a>
</li>
<li>
<a href="/portal/tol/en/liv/1/1">Obtain public records?</a>
</li>
<li>
<a href="http://www.texasonline.state.tx.us/NASApp/rap/apps/dpsdl/jsp/
eng/welcome.jsp">Renew my driver license?</a>
</li>
<li>
<a href="/portal/tol/en/gov/10/12">Change my address?</a>
</li>
<li>
<a href="http://rts.texasonline.state.tx.us/NASApp/txdotrts/common/jsp/
txdot_vtr_main_menu.jsp?language=eng">Renew my Vehicle Registration?</
a>
</li>
</ul>
</div>
...More divs with a number of links like the above for the other
tabs....
The full effect is here:
http://www.texasonline.com
I have looked at the accessibility plugins at Fluid Project (
http://wiki.fluidproject.org/display/fluid/Keyboard+Accessibility+Tutorial
), but the documentation is extremely limited and it appears it works
well with a UI Tabs implementation, which I am not using. Any
suggestions?
I would like for the user to be able to use the arrow keys or the tab
button to navigate horizontally across the "tabs" and click the space
bar or enter key to imitate a mouseclick.
Thanks!
Joe
