CSS and Round Corners: Build Accessible Menu Tabs
One of the best websites out there, in terms of functionality, is Amazon. Nonetheless, in terms of accessibility, it is not great. The setback is that Amazon's menu tabs, with their nice round corners, look good -- but they are completely inaccessible. To begin with, they are missing ALT tags. In addition, 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 should not use images to display text. Users with poor vision are unable to resize text that is displayed through images. Likewise, users of screen magnifiers may be unable to read text embedded in images, as it can appear blurry and pixelated to them.
The solution for this problem is 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!
The menu tab is increased in size with the text: it all fits perfectly. Now, you are 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 will assign it this CSS code:
#navigation a
{
color: #000;
background: #fb0;
text-decoration: none
}
This gives us the following result:
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 color for the rounded left-hand corner. For example: . Let us 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 states that the background image should be left-menu-tab.gif, the image should be on the left at the top, and it should not be repeated. The result is:
We are getting there, but we need to move the text over slightly as it is overlapping the left rounded corner. It is 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
}
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 will start by inserting a <span> tag into the HTML code:
<div id="navigation"><a href="/"><span>Home</span></a></div>
Now we will create a new CSS rule in which we will assign the right menu tab shown below to the <span>, and we are ready to go!
We will 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:
Perfect... No, wait a minute! Can you spot why it is 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:
Now, that really is perfect!
The Final CSS Touches
Let's assign this link a nice hover effect using a few final CSS rules. We will need a couple more background images:
We will call this left-tab-hover.gif.
This one is 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
}
Make a Tab Menu
Since we have done all the hard work, we can make as many of these menu tabs as we want:
Looks great, doesn't it? Note, though, that building your menu this way does bring up a new accessibility problem: this navigation will not make sense to anyone who has disabled CSS. Without CSS, the navigation looks like this:
That is quite a problem. To sort this out, let us 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 us 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 have 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 would not be clickable.
IE 5.x Problems
Unfortunately, these tabs will not work on IE 5.0 on PC (and a couple of other browsers), as the rounded edges of the tabs do not appear. As such, each menu tab will be displayed as a rectangle, with sharp corners. There is 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 is 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 will also need to insert the float:left command, but apply it only to this browser by using 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 cannot read the second command because of the slashes and stars, so defaults to the first CSS command.
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 is 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 us 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 unstable in older browsers. By itself, these tabs simply will not 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.
|
By Location