Accessibility Tip of the Week: Marking images as decorative

Olympia School District Staff Directory

This week Robert Hardy, our district website accessibility specialist, shares about when to label an image as a “decorative image.” Please call Robert with any accessibility questions at Ext. 6105. He is more than happy to talk by phone or schedule a time to meet with you.

When choosing an alternative text for an image, one option is to label the image as decorative. By marking an image as decorative, authors can indicate the image adds no additional information to the content.

The majority of decorative images are simply aesthetic flourishes such as decorative page breaks or content borders. While visually appealing, these images can create meaningless clutter for a screen reader user. By marking these elements as decorative, authors enable screen reader users to skip over them and focus solely on the content.

Beyond design elements, other images may also be considered decorative, so long as they do not add additional information to the page. For instance, consider the district’s staff directory. It includes profile pictures alongside a name. The likely alternative text for such an image would be the individual’s name, but that information is already included in the accompanying text. By marking the image as decorative, a screen reader user is saved the experience of hearing each name twice, and no meaningful information is lost.

While choosing the correct alternative text for an image is a decidedly subjective task, it can be helpful to keep in mind the content and function of the image. Why is the image included? Would the message be the same without the image? If so, consider marking it as decorative.

To mark an image as decorative in HTML, set the alternative text tag to two quote marks with nothing between them. This alt=”” is universally understood by screen reader users. Software suites, such as Microsoft Office 365 or Acrobat Pro, also allow the author to mark images as decorative.

For more information on crafting alternative text and other accessibility concerns, see the district’s Website Accessibility Resources page.