<div id="nav"> <a href="#title" class="skip">skip nav</a> <a href="/"><img src="/images/clagnut.png" alt="Clagnut" /></a> <h4><a href="#toc" onclick="return showhide('toc')"> Site contents</a></h4> <ul id="toc"> <li><a href="/">Home</a></li> <li><a href="/">Blog</a></li> etc. </ul> </div>
The drop down is marked up as a heading followed by a list, so browsers that don’t
@import style sheets will see it as such and will be able to navigate happily.
onclick event handler (implying a pointing device) to operate the drop down, the mechanism also works with a keyboard on the browsers I’ve tested (IE6, Opera 7, Mozilla, Safari). Try it yourself by using a keyboard to navigate to the About page: load the page, press tab a few times (depending on your browser) to move the focus to the Site contents link and press return to display the drop down. Press tab three more times to move focus to the About link and press return to go to the page.
So I think I’ve covered all bases from a technological point of view. I’ll also make the bold assumption that the implementation is adequately intuitive in all the scenarios described. I would therefore be confident in arguing for at least WAI-A compliance. Do you agree?