So how do you add alternative text to background images?
One thing that drives me up the wall is the inertia that happens in the accessibility world. We do our best to keep the web development world aware of accessibility concerns but in the other direction I just don’t see much drive to even understand the basic principles of web design.
My favourite example is the question that crops up almost every 3 weeks on different communication channels:
The WCAG guidelines state that every image needs alternative text but we are using CSS background images a lot [Ed: sometimes this question is also about CSS sprites] – how do you define alternative text for background images?
OK, here is the scoop, people:
CSS background images which are by definition only of aesthetic value – not visual content of the document itself. If you need to put an image in the page that has meaning then use an IMG element and give it an alternative text in the alt attribute. You can also add a title attribute to add extra information that will be displayed to every user as a tooltip. If your image has a lot of content (for example a graph) then consider using the longdesc attribute to link to a textual representation of the same data or display the same data for example as a data table in the same document.
That is it – images in CSS are only visual extras, not page content, hence they never need alternative text. “Rounded corner” or “blue-yellow gradient” does not help anybody as alternative text – on the contrary, it annoys the end users.
It is not rocket science, really!
Tags: accessibility, alt text, backgrounds, css, images, wcag
February 26th, 2009 at 12:37 am
Hey Chris, I hear you man, I completely share your frustration and thanks for the clarification!
One more comment on the alt text itself: keep short, descriptive and without redundancy, e.g. “down arrow” will be read by a screenreader as “Image: down arrow. Internal link.” – so avoid saying “image of a down arrow that will take you to the bottom of the page”
cheers, Mike
February 26th, 2009 at 3:24 pm
To be honest, I’d skip the mention of the arrow thing, if I were legally blind since childbirth there would be little use to me to know the shape of the image, “go to the end of the document” would work much better.
Links work nicely with verbs (descriptive ones, unlike “click here”), even if they are from img alt attributes.
February 26th, 2009 at 9:23 pm
Article that explains it in detail:
http://www.cs.tut.fi/~jkorpela/html/alt.html
and don’t bother with longdesc. It’s been completely ruined by people who don’t know what they’re doing:
http://blog.whatwg.org/the-longdesc-lottery
> 99.87% of the images [user] had ever encountered had no longdesc attribute at all. Even if he had known about it, and he had actually stumbled across one, he would still be up against 99 to 1 odds that following it would be worth his time.
February 27th, 2009 at 2:07 am
Heh, that’s the side effect of web development going mainstream :)
February 27th, 2009 at 7:41 pm
@Madness: agree, good point about being precise and descriptive – just wanted to give an example and I acknowledge it should have been more to the point
@kL: sad but true, hey?
May 6th, 2009 at 10:09 pm
Let’s say your site has a navigation section made up of images that change when you hover them. How would you handle them ? Probably with one ore more sprites. Disable image support and the site becomes inaccessible. Negative indent is a bad practice, and really doesn’t help except for some screen readers and maybe a text browser such as links or lynx, so what’s the solution for this scenario?
May 6th, 2009 at 11:52 pm
This is an interesting idea. If your navigation is purely graphical, how do you translate it? How do you allow for resizing of it? If you are OK with both issues, I’d say you should use images in HTML to create a nav like that. Or use JavaScript to test if images are available and then replace the nav.