Use CSS background images responsibly

Moving presentational graphics from markup to CSS by specifying them as background images is good. But sometimes we take it a bit too far, making it impossible for visitors who either cannot see the graphics or are using a browser with CSS and/or images turned off. Remember, there is no way to specify an alt text for a CSS background image.

Derek Featherstone shows some examples of how moving too much information from markup to CSS can hurt accessibility in Naughty or Nice? CSS Background Images, his contribution to 24 ways.

Derek admits that he has made this mistake, and I’ll confess that I have too, all too recently. A project I’m working on has a navbar that displays a nice little icon in front of an item when a user has unread messages. At first I simply specified a different class name when the user had an unread message and used CSS to include the icon as a background image. Bad. The best would have been to move the image to the markup, but for some reason which I can’t remember right now that was not an option. I ended up compromising by using a strong element to emphasise the text.

The lesson: think twice before moving an image from markup to CSS.

Posted on December 27, 2005 in Accessibility, CSS, Quicklinks, Usability

Comments

  1. I agree with you. One should be able to get the message without the CSS-file and therefore only a class won’t do it. There is however more solutions than using imgs. As you have written yourself strong may be an option, quite a good one I actually think. Another option could be to write the alt-text withing spans or something and use image replacement on it. That way you can get alt-text very easily with css…

    But as I said - I agree with you that one should think twice before moving an image entirely to css…

  2. I was just starting on an article on the same subject as I’ve seen several have start to use images that displays information being added as css backgrounds.

    It’s bad when there’s icons showing ‘You are here’ but it’s worse when the images displays all information.

    I’ve seen several do just that, and if the images is not showing up for one reason or another you can not navigate the site.

    What I can’t understand is why people have starting to add functional images as css background properties.

  3. December 27, 2005 by Martin Smales

    The article by Derek does highlight a good point: that without stylesheets the content in markup does not really tell a message is an error message because it was in a div element, which is quite general in terms of semantics.

    Anyway, to make the point further, what about quotation marks - should it be part of markup or part of CSS?

    I think quotation marks are not required in blockquotes because we know blockquotes “quote” something.

    Clearleft.com does use this method by employing quotation marks in CSS as background images.

    However, if quotes are not in blockquotes, I think it is a good idea to include quotation marks in markup due to lack of semantically defined elements other than blockquotes.

  4. Did you, by chance, specify the background image on the strong tag? Seems like that would be a good way to go about it. You could always set the font-weight to normal if you didn’t want the text to show up bold, but for users with CSS turned off (and users of assistive technologies) it would still clearly be emphasized.

    Very interesting post!

Comments are disabled for this post (read why), but if you have spotted an error or have additional info that you think should be in this post, feel free to contact me.