When an appropriate markup language exists, use markup rather than images to convey information.

This basically means that we shouldn’t use images to display text. Users with poor vision are unable to resize text that’s displayed through images. Similarly, users of screen magnifiers may be unable to read text embedded in images, as it can appear blurry and pixelated to them.

The Solution: CSS Menu Tabs

CSS, as usual, comes to our rescue. Look at this menu tab, created through HTML and CSS — not an <img> tag in sight!

Have a look at it in action — when you do, adjust the text size in your browser. Notice that the menu tab increased in size with the text: it all fits perfectly.

Make a Tab Menu

Looks great, doesn’t it? Note, though, that building your menu this way does bring up a new accessibility problem: this navigation won’t make sense to anyone who has disabled CSS. Without CSS, the navigation looks like this:

That’s quite a problem. The solution? Let’s put the tabs into a list! The HTML will look like this:

To get rid of the bullets, we used the CSS command, list-style: none. To display our menu tabs inline, stacked next to each other, we used float: left.

At this point, some of the more expert CSS coders may question the point of keeping the <span> tag, especially those who’ve read Doug Bowman’s Sliding Doors article. The reason we leave in the <span> tag is to make the entire menu tab clickable. If we were to assign one of the corners to <li> as a background image, that corner wouldn’t be clickable.

IE 5.x Problems

Unfortunately, these tabs won’t work on IE 5.0 on PC (and a couple of other browsers), as the rounded edges of the tabs don’t appear. As such, each menu tab will be displayed as a rectangle, with sharp corners. There’s an easy solution to this, which is to insert display: block into the #navigation a and #navigation a span CSS commands.

Sounds easy, right? Unfortunately, it’s not. By inserting these commands into the CSS, IE 5 on Mac will stack the menu items on top of each other. To make these display properly for IE 5 on Mac, we’ll need to also insert the float:left command, but apply it only to this browser. But how do we apply a CSS command to just one browser? Easy — we use the commented backslash hack:

The first CSS command says to float the menu tab content to the left, and the second CSS command cancels this out for every browser except IE 5 on Mac. When two CSS commands are specified for the same selector, the second one always takes precedence. However, IE 5 on Mac can’t read the second command because of the slashes and stars, so defaults to the first CSS command. (If you really want to know how and why this works, read Commented Backslash MacIE5 CSS Hack by Sam Foster.)

The End Product… With and Without CSS

Let’s look at it one more time. First, the CSS version of the nav:

When CSS is disabled, it looks like this:

Now, that really is accessible!

Limitations

As you may already know, support for CSS can be shaky in older browsers. As such, these tabs simply won’t work in Netscape 4 and IE 4 (still used by less than 1% of Web users). The way around this problem is to use an external CSS document that you call up using the @import directive. These browsers will then ignore the CSS document.

Trenton is crazy about Web usability and accessibility – so crazy that he went and started his own web accessibility and usability consultancy to help make the Internet a better place for everyone.

Free Guide:

7 Habits of Successful CTOs

"What makes a great CTO?" Engineering skills? Business savvy? An innate tendency to channel a mythical creature (ahem, unicorn)? All of the above? Discover the top traits of the most successful CTOs in this free guide.