Accessible Graphical Menus


When designing a web site, it’s generally a good idea to keep your sites navigational elements text-based. This has several advantages, like being search engine friendly and easily accessible to screen readers and hand-held devices. Let’s face it, though, sometimes that’s not always practical and what the site design really calls for is a nice menu comprised of graphics in which the actual menu text is stylized. So, here’s a little trick that will give you the best of both worlds. We’re going to build a graphically-based navigation menu out of an unordered list.

To start with, we need our graphic. It’s not very pretty, but it illustrates the point.

full.jpg

Next, we need to slice our menu up into its individual graphics. My menu is 150 pixels wide and each “button” will be 30 pixels high. (working out to, in this case, a 150 x 150 square menu). When I slice up the menu, I’m going to do something a little special, though, since I want a hover effect. I’m going to make my individual menu button graphics 60 pixels high (twice the original height) and then put the original graphic in the top half of the image and the hover state in the bottom.

Our final images will look like this:
home_btn.jpg about_btn.jpg

and so on…..

With the graphics out of the way, we’re ready to code. First, let’s do the HTML markup.

[html]

[/html]

I’d like to point out a couple of things about our list:

1: We’re using a standard unordered list with an id of “nav” and we’ve given each link within the list its own corresponding class name.

2: There’s a SPAN tag around each bit of link text– this will allow us to hide that text later on.

Open it in your browser and you’ll see a normal looking unordered list. This is what users who visit your site with CSS and images disabled will see. It’s what the search engines will see, and it’s what screen readers will read. Now we just have to make it look like it’s all graphics.

Let’s write some CSS, starting with the list elements themselves. We’ll remove the borders, padding, and item markers.

[css]
#nav, #nav li {
width:150px;
margin:0;
padding:0;
list-style:none;
}
[/css]

Look at the list in your browser and you’ll see a list of links, without any formatting. This is what we want. We’ll build up the graphics inside the links themselves. So, moving on…

[css]
#nav li a {
display:block;
width:150px;
height:30px;
background:top left no-repeat #06487f;
text-decoration:none;
}[/css]

Here we’ve defined the properties for the links that make up our list. We want to treat them as block elements (so we can give them a size) and then define that size– the 150px x 30px (the width and height of our link buttons). After we’ve done that, we want to specify that the background image we’re going to set later will be positioned at the top left of the link element. Then we’ll just tell it not to repeat (just for good measure) and set a background color. Finally, we also have to tell the browser that we don’t want the link text underlined, because even though it will be hidden, some browsers (like FireFox) will still show the underline).

Now we’re ready to define the CSS for the classes themselves. Simply put, we’re going to set the background for each class to its corresponding button.

[css]
#nav li a.home { background-image:url(home-btn.jpg); }
#nav li a.about { background-image:url(about-btn.jpg); }
#nav li a.services{ background-image:url(services-btn.jpg); }
#nav li a.forums { background-image:url(forums-btn.jpg); }
#nav li a.contact { background-image:url(contact-btn.jpg); }
[/css]

Note: Notice how all of my buttons here are the same size? If you want to use buttons that are different sizes (in a horizontal list, for instance), simply define the sizes in each button’s corresponding class, rather than doing so in the link properties itself.

Next, we need to specify our hover state. All we have to do for this is simply move the background image up by changing the background’s vertical alignment.

[css]
#nav li a:hover { background-position:bottom left; }
[/css]

Finally, we just need to hide the link text itself from view.

[css]
#nav li a span { visibility:hidden; }
[/css]

Note: Using “display:none” instead here, while alleviating the visible underline problem, causes spaces between elements in IE, so we just hide it and set the text-decoration to none, as above.

Now your finished list should look like this one. Now your users get a fully graphical menu, while search engines and screen readers get a nice, text-based menu.

Blogging

{ 7 comments… add one }

8 comments on “Accessible Graphical Menus

  1. Bryan on said:

    Very useful, while not losing any simplicity. This looks like a trick that should be in every designer’s toolbox.

  2. web designer roxy on said:

    nice trick….great tutorial…!!

  3. Great Tutorial. Keeping this in my toolbox.

  4. Great stuff, thanks a lot :)

  5. Manq on said:

    IMHO it is goog tutorial, but better is http://wellstyled.com/css-replace-text-by-image.html – Second: More Compatible Method, isnĀ“t it?

  6. laidey on said:

    i like it very much!!! very well explained, very simple.. keep sharing tutorials. Your a big help to newbies like me..

  7. how can i convert your vertical list to horizontal using your code?

Leave a Reply

Your email address will not be published. Required fields are marked *

*

HTML tags are not allowed.

Leave a Comment