CSS and Round Corners: Build Accessible Menu Tabs Article

One of the best Websites out there, in terms of functionality, is Amazon.

In terms of accessibility, though, it’s not great.

The Problem

Amazon’s menu tabs, with their nice round corners, look good — but they’re totally inaccessible. First of all, they’re missing ALT tags. Additionally, the W3C accessibility guideline 3.1 (priority 2) clearly states:

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!

1388_home1

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.

Today, you’re going to learn how to do this.

How It’s Done

We start with a simple link:

<div id="navigation"><a href="#">Home</a></div>

We’ll assign it this CSS code:

#navigation a 
{
color: #000;
background: #fb0;
text-decoration: none
}


This gives us the following result:

1388_home2

It needs a bit of work, right? Let's do it.

Add the Left Menu Tab Corner

We need to make a small image with the same colour for the rounded left-hand corner. Here's one I made earlier.

1388_taborangeleft

Let's call this image left-tab.gif and place it into the background of the link using this CSS rule:

#navigation a 
{
color: #000;
background: #fb0 url("left-tab.gif") left top no-repeat;
text-decoration: none
}

This new CSS rule says that the background image should be left-menu-tab.gif, the image should be on the left at the top, and it shouldn’t be repeated. The result?

1388_home3

We’re getting there, but we need to move the text over slightly as it’s overlapping the left rounded corner. It’s pretty simple to reposition the text with the addition of padding to our CSS rule:

#navigation a 
{
color: #000;
background: #fb0 url("left-tab.gif") left top no-repeat;
text-decoration: none;
padding-left: 10px
}

1388_home4

The Right Corner

We can only assign one background image to a CSS rule, so we need to make a new CSS rule and assign the right corner image to that. We’ll start by inserting a <span> tag into the HTML code:

<div id="navigation"><a href="/"><span>Home</span></a></div>

Now we’ll create a new CSS rule in which we’ll assign the right menu tab shown below (another one I made earlier) to the <span>, and we’re ready to go!

1388_taborangeright

We’ll name this image right-tab.gif.

#navigation a span 
{
background: url("right-tab.gif") right top no-repeat;
}

This CSS rule means that every <span> tag within an <a> tag will have this image as its background. The final result looks like this:

1388_home5

Perfect… No, wait a minute! Can you spot why it’s not so perfect? We forgot to assign some padding to that <span> tag in the CSS rule:

#navigation a span 
{
background: url("right-tab.gif") right top no-repeat;
padding-right: 10px
}

This code gives us:

1388_home1

Now, that really is perfect! Have a look at the results here and resize the text to see how it looks.

The Final CSS Touches

Let’s assign this link a nice hover effect using a few final CSS rules. We’ll need a couple more background images:

1388_tabblueleft

We’ll call this left-tab-hover.gif.

1388_tabblueright

This one’s named right-tab-hover.gif.

Now, we just insert the following CSS rules, and away we go!

#navigation a:hover { 
color: #fff;
background: #fb0 url("left-tab-hover.gif") left top no-repeat;
text-decoration: none;
padding-left: 10px
}  

#navigation a:hover span
{
background: url("right-tab-hover.gif") right top no-repeat;
padding-right: 10px
}

Have a look at this code in action — be sure to mouse over it!

Make a Tab Menu

Now we’ve done all the hard work, we can make as many of these menu tabs as we want:

1388_nav

See the nav in action — be sure to mouse over the nav items!

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:

1388_nocssnav

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

<ul id="navigation"> 
<li><a href="/"><span>Home</span></a></li>
<li><a href="/"><span>Services</span></a></li>
<li><a href="/"><span>Take a tour</span></a></li>
<li><a href="/"><span>About us</span></a></li>
<li><a href="/"><span>Contact us</span></a></li>
</ul>


Now, let's create some CSS rules for our list items, so that all the menu tabs display next to one other on the same line:
#navigation 
{
list-style: none;
padding: 0;
margin: 0;
}

#navigation li
{
float: left;
display: block;
margin: 0;
padding: 0;
}

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:

#navigation a, #navigation a span 
{
display: block;
float: left
}

/* Commented backslash hack hides rule from IE5-Mac */
#navigation a, #navigation a span
{
float: none
}
/* End IE5-Mac 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 Final Code

The final HTML is:

<ul id="navigation"> 
<li><a href="/"><span>Home</span></a></li>
<li><a href="/"><span>Services</span></a></li>
<li><a href="/"><span>Take a tour</span></a></li>
<li><a href="/"><span>About us</span></a></li>
<li><a href="/"><span>Contact us</span></a></li>
</ul>

And here’s the entire CSS code:

#navigation a 
{
color: #000;
background: #fb0 url("left-tab.gif") left top no-repeat;
text-decoration: none;
padding-left: 10px
}

#navigation a span
{
background: url("right-tab.gif") right top no-repeat;
padding-right: 10px
}

#navigation a, #navigation a span
{
display: block;
float: left
}

/* Commented backslash hack hides rule from IE5-Mac */
#navigation a, #navigation a span
{
float: none
}
/* End IE5-Mac hack */

#navigation a:hover
{
color: #fff;
background: #26a url("left-tab-hover.gif") left top no-repeat;
text-decoration: none;
padding-left: 10px
}

#navigation a:hover span
{
background: url("right-tab-hover.gif") right top no-repeat;
padding-right: 10px
}

#navigation
{
list-style: none;
padding: 0;
margin: 0
}

#navigation li
{
float: left;
display: block;
margin: 0;
padding: 0
}
The End Product… With and Without CSS

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

1388_nav

When CSS is disabled, it looks like this:

1388_navdisabled

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.

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

No Reader comments

Comments on this post are closed.