Decorative Image Overview

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 reosurces, supporting a wider range of technologies for rendering web content, including cell phone and PDA browsers.

Benefit 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 All Users

  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.

Related Resources

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

HTML Markup Details

alt attribute
There will be no need to define an alt attribute for decorative images if the in-line HTML img markups for these images are removed and CSS techniques are used instead to implement styling requirements.
If for some reason CSS techniques cannot be used, the alt atribute of img element for decorative image should be set to null (alt="").

Related Accessibility Requirements

Illinois Information Technology Accessibility Standards
4.1 Provide appropriate "alternate text" for all images.
4.2 Provide full descriptions for graphs, diagrams, and other meaningful images.
Section 508
1194.22 (a) A text equivalent for every non-text element shall be provided (e.g., via "alt", "longdesc", or in element content).
W3C Web Content Accessibility Guidelines 2.0
1.1.1 Non-text Content
Web Content Accessibility Guidelines (WCAG 1.0)
1.1 Provide a text equivalent for every non-text element (e.g., via "alt", "longdesc", or in element content) [Priority 1].
3.1 When an appropriate markup language exists, use markup rather than images to convey information [Priority 2].
3.3 Use style sheets to control layout and presentation. [Priority 2]