Take the 2-minute tour ×
Webmasters Stack Exchange is a question and answer site for pro webmasters. It's 100% free, no registration required.

I'm building an image-based horizontal navigation bar for a site, as the designer wants a specific typeface, and the font is not licensed for embedded web use. I assumed the best way to do this would be to make an unordered list of the menu options, then style them with background-image replacements. I've done this, and they work well.

However, now they want the images to scale up on hover, and try as I might to find a solution to scale the background-image, it seems to be more trouble than it's worth with the current state of CSS3 support for background-size. (Please correct me if I'm wrong and there's a solution I missed.) So, I'm resigning myself to switching to an IMG for each list item.

In this method, what would be the best way to keep it accessible without making a royal mess of things? Should I simply use an ALT attribute for each image, or does that not degrade as gracefully as image replacement?

Obviously, I am building this site for a client, and while I've been trying to keep up with best web standards and practices, I must admit I haven't built a client site in a few years (my usual gig is video and film post-production), so I'm going through a bit of a crash course to make sure I'm covering all my bases. Thanks!

share|improve this question
add comment

4 Answers

Using the Alt attribute would be a very good way to make sure this is accessible without making a "mess of things". It's simple and doesn't require any hacks or additional code to work.

share|improve this answer
    
The problem is that blind users don't actually navigate via the alt tag in practice. –  toomanyairmiles Jan 23 '12 at 14:46
add comment

use clip{} on your img elements, that way you can use a css sprite that is accessible for Retina devices. you could add size/fx on :hover, or you could just make the hover img bigger on the sprite.

share|improve this answer
    
What is "clip{}"? And what's its relation to Retina devices? –  Lèse majesté Jan 23 '12 at 11:32
1  
clip is a css property that controls clipped regions in elements that are using abs pos. you can read about it here: reference.sitepoint.com/css/clip Retina devices have 2x pixels, so you need to take that into account when you're setting up for zoom; typical css sprites are implemented using background-image:, however this breaks a11y in iOS 4 Retina devices. –  albert Jan 23 '12 at 22:37
    
Thanks for the clarification. I'll have to keep that in mind in the future. –  Lèse majesté Jan 24 '12 at 3:16
    
Good to know. Thanks. –  bobtiki Jan 26 '12 at 4:43
add comment

Use the alt of course but that's not how most blind users use the web.

Since developers support alt so badly most blind users (using JAWS or Supernova) will load up either a list of the a tags on the page or a list of the heading tags in order to understand the structure of the page and the information it contains and then move around the parts of the page that interest them.

Because of this I generally leave the plain text in the li tags and text-indent: the text -10000 pixels right or left as this is closer to semantically correct and more useful to the user as their software will still read the link text to them properly.

i.e.

<style><!-- #menu li { text-indent: -10000px; } --></style>

<ul id="menu">
   <li><a href="">link</a></li>
</ul>

It's important to understand that the alt is supposed to be a useful description of a single element but the greater challenge to the blind user is to find their way around the information in the page (in this way they are very similar to search engine robots).

Once they have found something they want alt is useful, but until then links and heading tags are far more important.

share|improve this answer
    
Thanks! Great to know. –  bobtiki Jan 26 '12 at 4:44
add comment

The alt attribute is for the image tag, not background images.

You can use background-image and have text inside your list item but hide the text with CSS. This way, a screenreader would read the text, ignore the image and your navigation would totally be accessible. Don't use display none but rather:

.invisible
{
position:absolute;
left:-9000px;
}

Add this to a span wraping the text inside your list-item. Also reusable with anything on your page that you'd like to hide but is semantically important (like a h2 tag before breadcrumbs)

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.