Quantcast

Making Accessible Menus in HTML

Get the WebProNews Newsletter:


[ Business]

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>

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.

Comments

Add to Del.icio.us | Digg | Reddit | Furl

Bookmark WebProNews:

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.

http://www.madskristensen.dk/

Making Accessible Menus in HTML
Comments Off
This entry was posted in Business.
About Mads Kristensen
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.

http://www.madskristensen.dk/ WebProNews Writer
Top Rated White Papers and Resources

Comments are closed.

  • Join for Access to Our Exclusive Web Tools
  • Sidebar Top
  • Sidebar Middle
  • Sign Up For The Free Newsletter
  • Sidebar Bottom