Background images vs foreground images

Accessibility
1

My sincerest apologies if such a thread already exists in this forum, but I wanted to get some feedback on using images as background images as opposed to foreground images in my page markup, from an accessibility standpoint.

Let me just outline the two techniques i’m talking about. Say for example I had a banner image which had some stock image as the background and then some text on top of it with some specific styling, that means it can’t be overlayed on top of the image using text in the markup. Let’s say this text is “MyBusiness services”.

Using a background image:

HTML:


<div id="somebanner">MyBusiness services</div>

CSS:


#somebanner { width: 100px; height: 100px; line-height: 100px; background: url(/path/to/img); text-indent: -999em; }

Using a foreground image:

HTML:


<img src="path/to/img" alt="MyBusiness services" />

What I’m looking for are the pros and cons from an accessibility perspective, of using each method. I already have my own ideas, but I want to see what other people think.

2

A background image should be purely presentational – it shouldn’t contain any vital information, since you cannot provide a text equivalent for it. Besides, background images are usually not printed out.

A foreground image is suitable when the information it conveys is part of the content, i.e., when it can simply be replaced by its text equivalent.

In your case, it looks like you want some form of image replacement. The Gilder-Levin method is probably the most accessible.

3

Agree with Tommy, if it’s an image which conveys meaning then the best method is to use an <img> and use the alt attribute.

Image replacement can be handy but you should also consider how the page will be rendered with css switched off. If you need a logo or image as part of the content and viewing the page without css doesn’t quite convey the right message then you probably need the image as a foreground <img>.

If it’s purely for presentational purposes then I’d always go for a background-image.