Don't lose your head over accessibility

Don't lose your head over accessibility

23rd Feb 2008

In my work at Accessites.org and GAWDS I get to scrutinise an awful lot of sites. And one issue I see time and time again is poorly-implemented images, or more specifically, misuse of Image Replacement (IR) and badly styled images. There's clearly some confusion (even among many web professionals) about best practises for adding images to your site, so hopefully this short post will help to clear things up.

The problems

  1. The most common mistake I see is important images, like a logo or header image, placed within a web page using CSS, i.e. background images. This means that with images unavailable (but CSS still there) the logo or web site name is not visible
  2. And a related problem is images that have been placed within the document body (i.e. using the <img /> tag) have not been styled suitably, i.e. poor colour contrast and text-size

The solutions

In short: if an image conveys important information that will be missed in it's absence then the image needs to be embedded within the document (i.e. as HTML). This means that you can provide alternative text as a back-up when viewed in a non-graphical browser. And if the image is for decoration, like a background pattern or motif, then it should be placed as a background image.

So, when you're using the <img /> tag for important images you need to make sure you style up the alternative text so it is legible when viewed in a non-graphical browser that still supports CSS. In other words make sure the background and foreground colours contrast sufficiently (and in some browsers you can style the text size too).

Some examples

I've set up two example pages, one to show how a logo should ideally be placed within a web page and the other to show how a logo should NOT be placed within a web page. Have a look at both, turn the images of in each and see how things look. (Here's some instructions on how to turn images off).

Here's some illustrations as well.

How images might look on most web pages

Everything looks fine in this screenshot

With images turned off but the header image applied with Image Replacement

With images not available, this is what the logo looks like when it's been placed with Image Replacement. Great eh?

With images turned off but the header image applied by using the image tag

And here's how the site should look when images are unavailable (but CSS is still being used).

Summary

To place your image accessibly within your web docoument:

  • if the image contains content that's vital to the understanding of the web page use the <img /> tag with appropriate alternative text
  • make sure that you style up the embedded image so the alternative text is legible