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.
- Previous post: Required elements and optional tags in HTML
- Next post: Luminosity contrast ratio