Accessibility Principles for Website Images

Images are a core aspect of most website designs today, and they can even increase the accessibility of a webpage for many users, such as employees and job seekers with cognitive and learning disabilities. Adding graphics, drawings, illustrations, graphs, and charts can benefit many users by increasing a person’s ability to understand the concepts at hand.

Of course, people access the web in many different ways. One method is a by using a screen reader, which is a software program that reads the content on a webpage aloud. Screen readers are primarily used by people with vision impairments. Sometimes people with reading disabilities also use screen readers because hearing the text read aloud can make it easier for them to understand. In order for a screen reader to describe images to the user, the website/content creator must add alternative text to each image with an ALT attribute.

And to ensure equal access for the employees and job seekers using screen readers, you must always tailor each image description to the specific context it is used in. 

There are five types of images commonly used:

• Simple content-related images–images containing content-related information that adds value to the page content
• Complex content-related images–elaborate images such as maps, charts, and graphs containing information that adds value to the page content
• Presentational images–images that lack any valuable information, such as those used to layout page content (like a spacer), or that are purely decorative
• Logos
• Images used in an image gallery

Each of these image types have different requirements.

Overview of image type requirements

Simple content-related images

Simple content-related images must:

• Have an ALT attribute that describes the purpose of the image, including all legible text in the image;
• Meet color-contrast requirements; and
• Describe the target location if it is also a link. 

Writing accurate ALT attributes for simple content-related images

The ALT attribute should describe the purpose of the image. Imagine if you were describing the page to someone over the phone, how would you describe the image?

ALT attributes should be:

• Descriptive, and
• Concise.

ALT attributes should not:

• Be longer than 100 characters;
• Contain any HTML;
• Repeat any text on the page;
• Include the filename of the file;
• Include words such as “click;”
• Include words such as “image,” “graphic,” or “photo” unless these are accurate descriptors of the image (for example, “1977 photo of the inauguration of Jimmy Carter”); or
• Contain any information that is not visible in the image (such as figure, copyright or author information).

Complex content-related images

Complex content-related images must:

• Have an ALT attribute that includes the title of the complex image and references where the text description is located on the page;
• Have a longer text description on the same page as the complex image (or a link to the longer text description must be provided immediately next to the complex image);
• Meet color-contrast requirements; and
• Not be a link, unless linking to a larger version of the image. Where the image does link to a larger version of the same image, this must be included in the ALT attribute.

Writing accurate ALT attributes for complex content-related images:

The main information in a complex content-related image is included in the text description; therefore, the ALT attributes should only include the title of the complex image and refer to the text description.

ALT attributes should:

• Include the title or name the complex content-related image;
• Refer to where the longer text description is located (refer to the preceding, heading); and
• Indicate where selecting the image actually opens a larger version (“opens a larger version”).

ALT attributes should not:

• Include location words such as “below,” “above,” “left,” or “right;”
• Be longer than 100 characters;
• Contain any HTML;
• Repeat any text on the page;
• Include the filename of the file;
• Include words such as “click;”
• Include words such as “image,” “graphic,” or “photo” unless these are accurate descriptors of the image (for example, “1977 photo of the inauguration of Jimmy Carter”); or
• Contain any information that is not visible in the image (such as figure, copyright or author information).

Writing accurate text descriptions for charts and graphs:

For most complex images, the best text description is presented in a table. This allows for the multiple relationships between the information in a complex image to be encoded in a format that is easily presentable. For example, charts and graphs are just a visual representation of data that originated in a table.

Writing accurate text descriptions for maps:

Maps contain a lot of visual data, but not all of it is relevant. In writing a long description, ensure you include only the relevant details of the map. For example, the nearest highway and exit is relevant, but it is not necessary to describe in text all the highways and exits that are visible on the map.

Presentational images

Presentational images, such as spacers, borders and underlines, must have an empty ALT attribute. These images are strictly ornamental and do not convey any information to the user. 

Other images are sometimes considered presentational if they are used alongside text that already conveys the exact same information. In those case, adding text to the ALT attribute for the image would be repetitive.

For example, in the screenshot below you can see that adding an ALT attribute to these icons just repeats the text already on the page (the section with the yellow highlight is the ALT attribute). In this case, the ALT attributes should be left empty.
 

Logo images

Logo images must:

• Have an ALT attribute, and
• Describe the target location if it is also a link.

Image gallery images

Image gallery images must:

• Have an ALT attribute that describes the image and is not the same as the caption;
• Not be a link, unless it is a thumbnail linking to a larger version of the image; and
• Where the image does link to a larger version of the same image, this must be included in the ALT attribute.

Writing accurate ALT attributes for image gallery images:

The purpose of an image gallery is essentially visual, therefore the ALT attributes should describe the image itself. The ALT attributes should be as descriptive as possible.

ALT attributes for image gallery images should not:

• Be longer than 100 characters;
• Contain any HTML;
• Repeat any text on the page;
• Include the filename of the file;
• Include words such as “click;”
• Include words such as “image,” “graphic,” or “photo” unless these are accurate descriptors of the image (for example, “1977 photo of the inauguration of Jimmy Carter”); or
• Contain any information that is not visible in the image (such as figure, copyright, or author information).

For more information, please see the webinar Implementing Accessible Workplace Tech: Website Images.