If 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>
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.
Add to 
Bookmark murdok:
Mads Kristensen currently works as a Senior Developer at Traceworks located
in Copenhagen, Denmark. Mads graduated from Copenhagen Technical Academy with a multimedia degree in
2003, but has been a professional developer since 2000. His main focus is on ASP.NET but is responsible for Winforms, Windows- and
web services in his daily work as well. A true .NET developer with great passion for the simple solution.
