A “Keyboard-friendly” Menu.

This article was first published on tjkdesign.com (02-16-2007).

It is easier for keyboard users to navigate through long nested lists (mainly navigation menus) when these are "hidden" through the use of display:none; but unfortunately for these users, most web designers/developers choose other techniques to make sure all links are exposed to search engines and assistive devices. For this reason, such lists are often "painful" for keyboard users to navigate.

So what this script does is that it creates "skip links" to let users skip entire nested lists (in visual browsers these links do not appear unless users use tabbing navigation).

This solution is based on a Definition List that includes Unordered Lists. It does not need any hooks besides an ID for the menu (the DL). This is what it’ll do for you:

The markup looks like this:

(borrowed from SeatGuru.com)

<dl id="TJK_SlideMenu" title="Navigation Menu">
    <dt>Airlines: A-B</dt>
        <li><a href="javascript:;">Air Canada</a></li>
        <li><a href="javascript:;">Air France</a></li>
        <li><a href="javascript:;">AirTran</a></li>
        <li><a href="javascript:;">Alaska/Horizon</a></li>
        <li><a href="javascript:;">America West</a></li>
        <li><a href="javascript:;">ATA</a></li>
        <li><a href="javascript:;">British Airways</a></li>
    <dt>Airlines: C-F</dt>
            <li><a href="javascript:;">Cathay Pacific</a></li>
            <li><a href="javascript:;">Continental</a></li>
            <li><a href="javascript:;">Delta/Song</a></li>
            <li><a href="javascript:;">Frontier</a></li>

This is the working keyboard friendly menu

Issues I am aware of:

This script should degrade nicely in JS-challenged UAs.

Other "DOM menus" I am aware of: