Mads Kristensen

My personal blog about everything tech

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.

If you often use shortcut keys to navigate the web or any other program for that matter, you probably expect the ESC key to close popups and message boxes (alerts). When using popup windows on the web, this is however not the case. If you use popups to show full sized images of thumbnails, it would be natural to press the ESC key in the expectation of the popup to close.

To achieve this functionality, we have to place a little JavaScript in the popup window. Add the following to the head section of the html page:

<script type="text/javascript">
 function ESCclose(evt) {
  if (evt.keyCode == 27) 
   window.close();
 }
</script>

Then add an onkeypress attribute in the body tag, like this:

<body onkeypress="ESCclose(event)">

That's all it takes and it's cross-browser compatible.