HTML & CSS: The Good Parts

Preparing Images for Production

If your work process begins with a Photoshop document full of assets and layout instructions, the most important decision to make is one of purpose: can a given graphic be defined as a design accent, or is it actual content?

Design accents should generally be relegated to background images, with the possible (and sometimes likely) exception of bitmapped heading type. For more information about the composition and styling of such images, consult Chapter 9.

If instead an image is identified as content, such as a photo or an illustration of statements made in the document, it should be referenced in an img element, which will declare at least the image’s URI and alternative text content.

The alt Attribute Explained

The alt attribute is critical to the experience of impaired visitors; it diminishes in importance only when images are loaded into the page and viewed exactly as intended. In all other cases its value is displayed, which is vital to any effort at making sense of images as content—so an alt value should convey meaningful information, or none at all. An excellent approach is to treat the alt attribute like a caption, or as an opportunity to label the image’s subject if a caption already exists.

When inline images are used for design accents that do not have a meaningful text equivalent (i.e., all such accents except for bitmapped heading type), their alt values should be set to the null string (alt=""). In the case of text browsers and screen readers ...