Clagnut

Menu

Accessible contents menu?

§ Accessibility

Clagnut’s global navigation is a JavaScript-driven drop down menu (the Site contents button graphical browsers will see top-right). An accessibility no-no, you might think, but I reckon otherwise. Here’s the mark-up (abbreviated for clarity):

<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.

If a browser does render the style sheets, but does not have DOM-capable JavaScript, the list and the skip nav link will be displayed as a horizontal navigation scheme below the logo (screenshot) using nav2.css.

If a browser renders the style sheets and also has DOM-capable JavaScript, I use JavaScript to import nav.css. This hides the list, requiring a ‘click’ on the Site contents button required to show it. Even though I’ve only used an 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.

I’ve made an assumption that assistive technologies which render style sheets and run DOM-capable JavaScript work in the manner previously described (I’m particularly thinking of JAWS which runs on Internet Explorer).

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?