We all know what the drop-down <select> field element is for don't we? Website navigation!

Whether you like using SELECTs for navigation or not there's no denying they can be useful when used in the right places. Personally, I try to use them exclusively for view sub-navigation i.e. switching between categories. I use them as a replacement for the twistie!

The trouble with the way the select element is used for navigation is that it always relies on its onchange event and so is completely inaccessible due to its reliance on JavaScript. There is a way to use them in an accessible way though!

For example, in the case of the categorised view you could stick the following HTML above the embedded view:

</form><form action="vwFoodsByCategory" method="get">
<input type="hidden" name="OpenView" value="1">
Switch To Category 
 <select name="RestrictToCategory" onchange="doSwitchToCat(this);">
  <option value="fruits">Fruits
  <option value="veg">Vegetables
 </select>
<noscript><input type="submit" value="Go"></noscript>
</form><form action="" >

In the JS Header you'd need - if you didn't already have - something like this:

function doSwitchToCat(o){
 location.href= "foodsByCat?OpenView&RestrictToCategory="
   + o.options[o.selectedIndex].value;
}

I won't patronise you with an explanation of how the form works. Unless somebody asks for one. It just goes to show though doesn't it. There's no need to be scared by accessibility. There are lots of elegant hacks like to help out.

You might be wondering why there's a noscript tag in there. Well, it's not really necessary but it does a nice job of hiding the "go" button when it's not needed — that is when javascript is available to do its job for us. This gets round an annoyance of mine — selects that use the onchange and also have the button next to them. One or the other for me please!