: Ensuring accessible image-based rollover navigation? 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

@Megan663

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)

Vote Up Vote Down

@Ann8826881

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.

Vote Up Vote Down

@Turnbaugh106

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.

Vote Up Vote Down

@Pope3001725

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.

Vote Up Vote Down