BPOW: text alternatives for decorative images

By December 18th, 2013

In this week’s Best Practice of the Week, we’re talking about text alternatives for decorative images.

By default, all images on a web page are announced by screenreader software. As we talked about in our Best Practices post on text alternatives, alt attributes on image elements give you the opportunity to explain their content and purpose to people who can’t see them.

But what about images which are there to provide a pleasant look and feel for the user? Or to support an interface which is already made up of well-written HTML? They don’t have any content which needs to be conveyed to someone using a screen reader. It may be tempting to give them a generic alt attribute like “blue dot” or “decorative image”, but this isn’t helpful to non-sighted users.

We have two options for dealing with decorative images: give them an empty alt attribute, or to take them out of the HTML altogether.

Empty alt attribute

Image elements must have an alt attribute so that your HTML will validate, and this will prevent screenreaders from announcing the filename or file path. If your image genuinely doesn’t have any content, then there’s nothing useful you can put in that attribute. In this case, you must still include the attribute, but you shouldn’t put anything in it.

<img src="border.jpg" width="100%" height="10" alt="" />

Instead of announcing “Graphic: border.jpg”, a screen reader will now skip the image and continue with the rest of the content. It’s simple, valid HTML and it can save your non-sighted users from having to listen to a lot of unnecessary detail.

Move decorative images to CSS

Our second option is to put decorative images in the CSS instead of in the HTML so they won’t be noticed by screen reader software. This also makes repeated graphics in the site design easier to maintain.

One method is to add the images as a background on an element. For example, our border graphic can be placed at the top of a footer element.


footer {
  background: url(/imgs/border.jpg) #ffffff top center no-repeat;
  font-size: 0.8em;
  color: #666666;
}

Another method is to put the image in the content property of the pseudo-elements :before and :after. The content property is supported by IE8 and greater, as well as Firefox, Chrome and Safari.


blockquote:before {
  content: url(/imgs/fancyquote-open.jpg);
}

blockquote:after {
  content: url(/imgs/fancyquote-close.jpg);
}

Be careful with the content property though. It’s commonly used to place icons before elements, but if the icons convey useful information and aren’t just decorative, then that information is lost to your screen reader users. In that case you should put the image in the HTML and describe it in its alt attribute.

Conclusion

You are the best judge of what an image means in the context of your site. Your site will be much more useful and enjoyable for non-sighted users if you take the time to consider the best approach for each image: to give it a useful text alternative, or to remove it from the attention of screenreader software.

Tagged with: