Accessible Tabbed Navigation

In this tutorial we will create a simple tabbed navigation. These tabs allow resizing, and text changing for people with vision problems, and high/low resolution monitors. These tabs also only use 1 image, and unobtrusive HTML and CSS code, lets get started!

First off we’ll start off with our image. We only have to use one image with the technique, the advantages to this is that your browser only has to send one request for the image, and saves bandwidth, and lowers load times. Another reason for one image is that it is bigger wide, and tall, so that when resizing text you don’t get any cutoff images or broken looking pages.

Now for the code, below the the CSS code we are using for the navigation. Here it is:

<br /> * { margin: 0; padding: 0; } </p> <p>ul { list-style-type: none; width: 900px; margin: 25px auto 0 auto; } </p> <p>li { float: left; display: inline; margin: 0 1px 0 1px; } </p> <p> li a { background: url(tab.png) transparent repeat scroll 100% 0pt; padding: 0px 25px 0px 0px; float: left; color: #000; text-decoration: none; font-size: 16px; font-family: Arial, Helvetica, sans-serif; font-weight: bold; display: block; opacity: .25; -khtml-opacity: .25; -moz-opacity: .25; } </p> <p> li a span { background: url(tab.png); padding: 10px 10px 10px 30px; float: left; } </p> <p> li a:hover { opacity: .99; -khtml-opacity: .99; -moz-opacity: .99; } </p> <p>

Now that we have our CSS, lets move on to the HTML code we will use. It is just a simple Unordered List with span tags inside.

</p> <ul> <li><a href="#"><span>Home</span></a></li> <li><a href="#"><span>Links</span></a></li> <li><a href="#"><span>Downloads</span></a></li> <li><a href="#"><span>apps</span></a></li> <li><a href="#"><span>Contact Me</span></a></li> </ul> <p>

And thats it! You can view the demo here, and you can download all the files used here.

Topics: CSS, Design, Web Development