Naughty or Nice? CSS Background Images

Web Standards based development involves many things – using semantically sound HTML to provide structure to our documents or web applications, using CSS for presentation and layout, using JavaScript responsibly, and of course, ensuring that all that we do is accessible and interoperable to as many people and user agents as we can.

This we understand to be good.

And it is good.

Except when we don’t clearly think through the full implications of using those techniques.

Which often happens when time is short and we need to get things done.

Here are some naughty examples of CSS background images with their nicer, more accessible counterparts.

Transaction related messages

I’m as guilty of this as others (or, perhaps, I’m the only one that has done this, in which case this can serve as my holiday season confessional) We use lovely little icons to show status messages for a transaction to indicate if the action was successful, or was there a warning or error? For example:

“Your postal/zip code was not in the correct format.”

Notice that we place a nice little icon there, and use background colours and borders to convey a specific message: there was a problem that needs to be fixed. Notice that all of this visual information is now contained in the CSS rules for that div:

<div class="error">
     <p>Your postal/zip code was not in the correct format.</p>
 </div>

 div.error {
     background: #ffcccc url(../images/error_small.png) no-repeat 5px 4px;
     color: #900;
     border-top: 1px solid #c00;
     border-bottom: 1px solid #c00;
     padding: 0.25em 0.5em 0.25em 2.5em;
     font-weight: bold;
 }

Using this approach also makes it very easy to create a div.success and div.warning CSS rules meaning we have less to change in our HTML.

Nice, right?

No. Naughty.

Visual design communicates

The CSS is being used to convey very specific information. The choice of icon, the choice of background colour and borders tell us visually that there is something wrong.

With the icon as a background image – there is no way to specify any alt text for the icon, and significant meaning is lost. A screen reader user, for example, misses the fact that it is an “error.”

The solution? Ask yourself: what is the bare minimum needed to indicate there was an error? Currently in the absence of CSS there will be no icon – which (I’m hoping you agree) is critical to communicating there was an error.

The icon should be considered content and not simply presentational.

The borders and background colour are certainly much less critical – they belong in the CSS.

Lets change the code to place the image directly in the HTML and using appropriate alt text to better communicate the meaning of the icon to all users:

<div class="bettererror">
     <img src="images/error_small.png" alt="Error" />
     <p>Your postal/zip code was not in the correct format.</p>
 </div>

 div.bettererror {
     background-color: #ffcccc;
     color: #900;
     border-top: 1px solid #c00;
     border-bottom: 1px solid #c00;
     padding: 0.25em 0.5em 0.25em 2.5em;
     font-weight: bold;
     position: relative;
     min-height: 1.25em;
 }

 div.bettererror img {
     display: block;
     position: absolute;
     left: 0.25em;
     top: 0.25em;
     padding: 0;
     margin: 0;
 }

 div.bettererror p {
     position: absolute;
     left: 2.5em;
     padding: 0;
     margin: 0;
 }

Compare these two examples of transactional messages

Status of a Record

This example is pretty straightforward. Consider the following: a real estate listing on a web site. There are three “states” for a listing: new, normal, and sold. Here’s how they look:

Example of a New Listing

Example of A Sold Listing

If we (forgive the pun) blindly apply the “use a CSS background image” technique we clearly run into problems with the new and sold images – they actually contain content with no way to specify an alternative when placed in the CSS.

In this case of the “new” image, we can use the same strategy as we used in the first example (the transaction result). The “new” image should be considered content and is placed in the HTML as part of the <h2>...</h2> that identifies the listing.

However when considering the “sold” listing, there are less changes to be made to keep the same look by leaving the “SOLD” image as a background image and providing the equivalent information elsewhere in the listing – namely, right in the heading.

For those that can’t see the background image, the status is communicated clearly and right away. A screen reader user that is navigating by heading or viewing a listing will know right away that a particular property is sold.

Of note here is that in both cases (new and sold) placing the status near the beginning of the record helps with a zoom layout as well.

Better Example of A Sold Listing

Summary

Remember: in the holiday season, its what you give that counts!! Using CSS background images is easy and saves time for you but think of the children. And everyone else for that matter…

CSS background images should only be used for presentational images, not for those that contain content (unless that content is already represented and readily available elsewhere).