Welcome to WebProNews Breaking eBusiness and Search News
Advertise | Newsletter | Sitemap | News Feeds News Feed 
 WebProNews Search Part of the iEntry network iEntry inc. 

Making Accessible Menus In HTML

Mads Kristensen
Expert Author
Published: 2007-02-01

WebProNews RSS Feed


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:

View All Articles by Mads Kristensen



Receive Our Daily Email of Breaking eBusiness News


About the Author:
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 RSS Feed

More Expert Articles Articles

Contact WebProNews
Advertisement





TOP NEWS

WebProBlog
The official blog of WebProNews.

Go to WebProBlog

Targeted Information for Business
WebProNews is part of the iEntry network

Internet Business: Marketing: Small Business:
WebProNews MarketingNewz SmallBusinessNewz
WebProWorld AdvertisingDay PromoteNews
EcommNewz SalesNewz EntrepreneurNewz

Software: Search Engines: Web Design:
WebMasterFree Jayde B2B DesignNewz
NetworkingFiles SearchZA FlashNewz
SecurityConfig SearchNewz WebSiteNotes

Developer: IT Management: Security:
DevWebPro ITManagement SecurityProNews
DevNewz SysAdminNews SecurityConfig
TheDevWeb NetworkingFiles NetworkNewz

The iEntry Network consists of over 100 web publications reaching millions of Internet Professionals. Contact us to advertise.
eBUSINESS RESOURCES






 Advertise | Contact Us | Corporate | Newsletter | Sitemap | Submit an Article | News Feeds
 WebProNews is an iEntry, Inc. ® publication - $line) { echo $line ; } ?> All Rights Reserved
WebProWorld
Ten most recent posts.


SearchBrains.com
NetworkingFiles
Featured Software


About WebProNews
WebProNews is the number one source for eBusiness News. Over 5 million eBusiness professionals read WebProNews and other iEntry business and tech publications.

WebProNews provides real-time coverage of internet business.

Free Email Newsletters:
WebProNews SearchNewz
WebProWorld DevWebPro
Marketing SecurityNews
Plus over 100 other newsletters!

Send me relevant info on products and services.


iEntry.com WebProWorld RSS Feed WebProWorld Contact WebProNews Print Version Email a friend Bookmark us SearchBrains.com SearchBrains RSS Feed