///CSS & Round Corners: Making Accessible Menu Tabs

CSS & Round Corners: Making Accessible Menu Tabs

CSS & Round Corners – The problem

One of the best websites out there, in terms of functionality, is, and always has been, Amazon. In terms of accessibility though, they’re not too good.

Amazon’s menu tabs, for example, look really nice but are totally inaccessible. First of all, they’re missing ALT tags. Additionally, the W3Cs 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 don’t use images to display text – site users with poor vision are unable to resize text that’s displayed through images. Find out how to resize text in your browser, if you don’t already know.

The solution

CSS, as usual, comes to our rescue. Adjust the text size in your browser now. Go on, do it. Did you see how the menu tabs at the top of the screen increased in size with the text and it all fits perfectly. Today, you’re going to learn how to do this.

We start with a simple link:

Home

We’ll assign it this CSS code:

a

{

color: #000;

background: #fb0;

text-decoration: none

}

Which gives us:

Needs a bit of work, right?

Adding the left corner

We need to make a small image with the same colour: – here’s one I made earlier. Let’s call this image “left-tab.gif” and place it into the background of this link:

a

{

color: #000;

background: #fb0 url(“left-tab.gif”) left top no-repeat;

text-decoration: none

}

This new command says that the background image should be “left-tab.gif”, the image should be on the left, at the top, and it shouldn’t be repeated – kind of obvious really. The result?

We’re getting there, but we need to move that text over a bit. It’s pretty simple to do with a bit of padding:

a

{

color: #000;

background: #fb0 url(“left-tab.gif”) left top no-repeat;

text-decoration: none;

padding-left: 10px

}

And the right corner

We can only assign one background image to a tag so we need to make a new tag and assign an image to that. We can use:

&ltla href=”#”><span>Home</span></a>

Now we just assign this background image (another one I made earlier) to the <span> and we’re ready to go! We’ll call this image “right-tab.gif”

a span

{

background: url(“right-tab.gif”) right top no-repeat;

}

This code means that every <span> tag within an <a> tag will have this image as its background. And the final result:

Perfect! So now you can… wait a minute, can you spot why it’s not so perfect? That’s right, we forgot to assign some padding to that <span> tag:

a span

{

background: url(“right-tab.gif”) right top no-repeat;

padding-right: 10px

}

Giving us:

Now that really is perfect! Resize the text again and see how it looks!

The final touch

Let’s assign this link a nice hover effect. We’ll need a couple more background images, like and which we’ll call “right-tab-hover.gif” and “right-tab-hover.gif”. Then, we just insert the following CSS code and away we go!

a:hover

{

color: #000;

background: #fb0 url(“left-tab-hover.gif“) left top no-repeat;

text-decoration: none;

padding-left: 10px

}

a:hover span

{

background: url(“right-tab-hover.gif“) right top no-repeat;

padding-right: 10px

}

In a real example you will be able to see the mouseover effect.

You can even make a whole bunch of them. Mouseover them!

2010-05-26T16:59:38+00:00 June 27th, 2004|CSS|0 Comments

About the Author:

This article was written by Trenton Moss. He's crazy about web usability and accessibility - so crazy that he went and started his own web usability and accessibility consultancy to help make the Internet a better place for everyone.
Articles originally featured at Webcredible.

Leave A Comment