Make accessible menus in HTML

I you want to make your website validate the WAI or Section 508 accessibility guidelines, you have to separate adjacent links with more than white space. You actually have to do a whole lot more, but separating links is a big thing, because many menus are violating that rule. The best way to create a menu is by using unsorted lists and putting the actual link tags inside the list items. Here’s how the HTML could look like:

<ul id="menu">
    <li><a tabindex="1" accesskey="H" href="default.aspx">Home</a></li>
    <li><a tabindex="2" accesskey="C" href="contact.aspx">Contact</a></li>
    <li><a tabindex="3" accesskey="P" href="profile.aspx">Profile</a></li>
    <li><a tabindex="4" accesskey="A" href="about.aspx">About</a></li>
</ul>

This will create a rather ugly list with bullet points, so we have to style it with CSS.

<style type="text/css">
    ul#menu{
        padding: 0px;
        margin: 0px;
        font: 11px verdana;
    }
    
    ul#menu li{
        display: inline; /* Remove to make vertical */
        width: 70px;
    }
    
    ul#menu li a{
        text-decoration: none;
        color: navy;
        font-weight: bold;
        padding: 2px 5px;
        /*display: block; make vertical */                
    }
    
    ul#menu li a:hover{
        color: white;
        background: navy;
    }
</style>

View the example

This menu will validate the various accessibility guidelines and is a very clean structure at the same time. I wouldn’t dream of creating a menu any other way and, of course, it is cross-browser compatible. Enjoy.