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