BECOME A SCRUM MASTER WITH OUR NEW AGILE PM 1-DAY COURSEBook now

One of the best websites out there, in terms of functionality, is, Amazon. In terms of accessibility though, it's not too great.

The problem

Amazon's menu tabs with their nice round corners, for example, look really nice but are rather 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 and screen magnifier users 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:

Adjust the text size in your browser now. Go on, do it. Did you see how the menu tab 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:

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

We'll assign it this CSS code:

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

Which gives us:

Home

Needs a bit of work, right?

Adding the left menu tab corner

We need to make a small image with the same colour for the left rounded corner: left menu tab - here's one I made earlier. Let's call this image ‘left-tab.gif’ and place it into the background of this link, using this CSS rule:

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

This new CSS rule 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?

Home

We're getting there, but we need to move that text over a bit as it's on top of the left rounded corner. It's pretty simple to do by adding some padding to our CSS rule:

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

Home

And 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 an 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 just create a new CSS rule in which we'll assign this right menu tab right menu tab (another one I made earlier) to the <span> and we're ready to go! We'll call 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. And the final result:

Home

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 in the CSS rule:

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

Giving us:

Home

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

The final CSS touches

Let's assign this link a nice hover effect with some new CSS rules. We'll need a couple more background images, like left menu tab and right menu tab which we'll call ‘left-tab-hover.gif’ and ‘right-tab-hover.gif’. Then, we just insert the following CSS rules and away we go!

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

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

Go on, put your mouse over it:

Making a tab menu

Now we've done all the hard work we can make as many of them as we want - go on mouseover them!

Doing it this way however does bring up a new accessibility problem, namely that this navigation won't make sense to anyone with CSS disabled. With no CSS these links look like:

HomeServicesTake a tourAbout usContact us

Hmmm... this is a problem, me thinks. The solution? Let's put them into a list! The HTML will therefore look like:

<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 the menu tabs all display next to each other on the same line:

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

#navigation li
{
float: left;
margin: 0;
}

To get rid of the bullets we used the CSS command, list-style: none and to display our menu tabs inline, so that they're all 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 then that corner won'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 not. By inserting these commands into the CSS, IE 5 on Mac will stack these 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
}

/* Hide from IE5-Mac \*/
#navigation a, #navigation a span
{
float: none
}
/* End hide */

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, 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 our entire CSS code:

#navigation a
{
color: #000;
background: #ffa20c 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
}

/* Hide from IE5-Mac \*/
#navigation a, #navigation a span
{
float: none
}
/* End hide */

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

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

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

#navigation li
{
float: left;
margin: 0;
}

The end product... With and without CSS

One more time then:

And when CSS is disabled:

Now that really is accessible!

Case studies

Our success stories

  • UCAS

    UCAS's Track portal is award-winning, achieving a 95%+ satisfaction rating across its 750,000 users

  • Hotels.com

    Hotels.com gained a much stronger competitive advantage due to a great mobile & tablet strategy

  • Pearson Education

    Pearson Education has embedded user-centred design into all their digital design processes

More case studies

Training academy

  • User experience

    Join up your customer touchpoints to deliver the best possible digital experience that is proven to deliver outstanding business results

  • Website optimisation

    Ensure your brand promises are delivered through your digital channels so that your customers return and bring others with them

  • Online copywriting

    Make sure all your customer touchpoints consistently deliver the very best in user experience, design and usability.

  • Web development

    Increase conversion across all your digital channels. Our clients sell more because they reap the benefits of our sales optimisation expertise.

  • Online marketing

    Get ahead of the competition with a customer-centered digital strategy designed to deliver long-term business success.

About us

We're a user experience agency (UX agency) that creates people-centred, efficient and delightful digital experiences.

Get in touch on 020 7423 6320

 

Skip to site navigation