Semantic Image Use

Semantic markup often holds more value than meets the eye. When practicing semantics with your markup, a byproduct is increased accessibility, decent base search engine optimization, and a boost to usability. The use of images in development is sometimes a gray area for new developers. The beauty of CSS is the ability to separate content from design. This idea should be retained in the back of your mind as a developer at all times.

Overview

When it comes to images, the img tag should only be used when the associated image is contextual in nature. If the purpose of the image is to be an element of design, it should not be included as a part of the content using img. Instead, images with a design-oriented purpose should be included as a background-image.

The reasoning behind this is quite straightforward. Should a user be using a screen reader or text based browser such as Lynx, you do not want to bombard them with dozens of bloated content consisting of irrelevant image descriptions or other bloated data.

The alt Attribute

As we know, the alt attribute is for the img element. The purpose of the alt attribute is as follows:

“The alt attribute is defined in a set of tags (namely, img, area and optionally for input and applet) to allow you to provide a text equivalent for the object.” … “The generic rule for the content of the alt attribute is: use text that fulfills the same function as the image.”

As stated on w3.org

From time to time, I have come across many sites using the alt attribute simply to enable the validation of their markup. This results in misuse of alt and in essence, defeats its purpose. Just remember: the alt attribute is meant to allow for a text equivalent for the object it is associated with. When a user is browsing with a text based browser or screen reader, the alt text is what is conveyed to them, so it should be as useful as possible. It should not redundantly state that the object is an image.

Images for Design

More often than not, an image you are including is intended to be a part of your design. These images should be included as a background image of the particular element you are designing. This usually comes off as self explanatory due to the fact that you are very limited as to controlling the behavior of an image using img. Using the background-image property in a stylesheet gives you much more flexibility such as positioning and repeating, which is often a desired effect when developing.

Specific Circumstances

From time to time during development I have observed a situation which takes some thought as to whether or not the image in question is part of the content or part of the design. For instance, I was speaking with a colleague the other day about whether or not an img should be used when representing a check mark in a table comparing features of a certain product. We sat back and thought about it and determined that if the image is representing a piece of tabular data, it should be considered contextual and therefore included as an img as opposed to a background-image. If an effective alt attribute is defined for this image, such as “Yes”, a user viewing the site using a screen reader or text-based browser would view a table comparing products and easily be able to determine which features were available on which product.

What do You Think?

Were we correct in determining the method in which to include the images in the previously mentioned example? Have you ever had a situation in which you really had to sit back and think about whether or not an image is contextual? It may not be a very common occurrence, but it is always important to keep in mind the correct use of img, alt, and background-image