Accessible Drop-down Selectors
Drop-down selector "jump menus" can be made accessible to Web site visitors with disabilities.
While I am not a fan of drop-down selectors for usability reasons, i inherited them on my work Web site. They are a permanent fixture as we move toward a unified look-and-feel with the University. Since my personal and professional standards deter me from making compromises in/for/about accessibility, i was determined to make my jump menu accessible without any loss of functionality.
First: To Script or Not To Script
JavaScript IS an option. It can be turned off on all browsers and is generally off on search engine crawlers. So my first step was to create a PHP script, "jumpthru.php", that would allow the jump menu to function without JavaScript.
<?php // jumpthru.php script for drop-down jump menu for folks with JavaScript turned off
if (strlen($_POST[url]) > 7) {
header("Location: $_POST[url]");
} else {
header("Location: http://earldaniels.net/"); //default dest if url not specified
}
?>
By putting the form action="jumpthru.php" to this script, and placing a submit button inside a <noscript> tag, the jump menu still works with JavaScript turned off.
Next: Keyboard AND Mouse
In order to be accessible, the jump menu must work from the keyboard. Regular JavaSript-driven jump menus trigger with the "onchange" function, meaning that the keyboard could be used only to select one entry down from the page-load default before the jump is triggered. I added an "onkeydown" event to shut off the "onchange" handler. If the visitor returns to mouse usage, the "onchange" handler is reactivated via an "onclick" call.
The Script
<script language="JavaScript" type="text/javascript">
<!--
var key_press=false;
function jump_menu(target, sel_obj){
if (!key_press) {
eval(target + ".location='" + sel_obj.options[sel_obj.selectedIndex].value + "'");
}
}
function key(evt, sel_obj) {
var key_code = document.layers ? evt.which : evt.keyCode;
if (key_code == 13) {
sel_obj.form.submit();
} else {
key_press = true;
return false;
}
}
//-->
</script>
The Form
<form action="/jumpthru.php" method="post" name="jumpmenu">
<label for="url">Select destination:</label>
<select name="url" id="url" onkeydown="key(event, this)" onclick="key_press=false;" onchange="jump_menu('window.open()', this)">
<option value="http://earldaniels.net/">Select</option>
<option value="http://google.com/">Google
<option value="http://w3.org/WAI/">W3C's WAI</option>
</select>
<noscript><input type="submit" value="Go" /></noscript>
</form>