Click here to Skip to main content
14,208,119 members
Click here to Skip to main content
Add your own
alternative version

Tagged as


40 bookmarked
Posted 24 May 2004

CSS and round corners: Making accessible menu tabs

, 24 May 2004
Rate this:
Please Sign up or sign in to vote.
Using CSS and text instead of relying on graphics


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.

The problem

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:

<a href="#">Home</a>

We'll assign it this CSS code:

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

Which gives us:

Sample screenshot

Needs a bit of work, right?

Adding the left corner

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

   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?

Sample screenshot

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 

Sample screenshot

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:

<a href="#"><span>Home</span></a>

Now we just assign this background image right tab (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:

Sample screenshot

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:

Sample screenshot

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

Take this further

This article really only touches the basics of what you can accomplish with CSS and navigation. To take it even further, have a look at the article CSS Design: Creating Custom Corners & Borders featured at A List Apart.


This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here


About the Author

Trenton Moss
Web Developer
United Kingdom United Kingdom
Trenton Moss is crazy about usability and accessibility - so crazy that he founded Webcredible, an industry leading user experience consultancy, to help make the Internet a better place for everyone. He's very good at information architecture and interaction design.

Comments and Discussions

Questionhow to handle gradients ? Pin
shiftbit6-Oct-06 8:13
membershiftbit6-Oct-06 8:13 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Cookies | Terms of Use | Mobile
Web05 | 2.8.190612.1 | Last Updated 25 May 2004
Article Copyright 2004 by Trenton Moss
Everything else Copyright © CodeProject, 1999-2019
Layout: fixed | fluid