Decorative Image

Overview

Decorative images, or img elements used for content positioning and graphical styling, should be removed from HTML coding and instead incorporated through CSS techniques, using CSS properties like background-image and border. If the decorative img element cannot be removed, the alt attribute should be set to null (alt=””). Examples of decorative images include 1 pixel spacers, separator lines and banner images. The use of CSS increases the interoperability of web resources, supporting a wider range of technologies for rendering web content, including cell phone and PDA browsers.

Benefits to People with Disabilities

  1. Screen reader users do not have to determine if a decorative image is adding content to a web page.

Benefits to Everyone

  1. Cell phone, PDA devices and text-only browsers can ignore images from a stylesheet, since they know these images are used for styling and do not contain significant content. This improves the download time of the primary content.

Benefits to Developers

  1. The alt attribute content that needs to be written and maintained in a web resource is minimized.
  2. HTML code is cleaner, so that the development and maintenance of web resources are easier.
  3. CSS with the background property offers more flexible styling for images than the traditional in-line HTML img markup.

More Information

  1. 17: Images in HTML – Background images with CSS (Opera Web Standards Curriculum)

Markup

img[alt] (HTML4)

Related Accessibility Requirements

Section 508

Illinois Information Technology Accessibility Standards

Web Content Accessibility Guidelines (WCAG) 2.0

Web Content Accessibility Guidelines (WCAG) 1.0