 |
Breaking
eBusiness and Search News |
|
 |
Making Accessible Menus In HTML
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 |
|
|
 eBUSINESS
RESOURCES |
|
|
 |
|
| 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:
|
|
|
|
Mads Kristensen
