Decorative Image Overview

Overview

img elements used for content positioning and graphical styling should be removed and replaced with CSS techniques, including the use of CSS properties like background-image and border. If the 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 by supporting a wider range of technologies for rendering web content, including cell phone and PDA browsers.

Benefit to People with Disabilities

People using assistive technologies like screen readers do not have to determine if a decorative image is adding content to a web page.

Benefits to All Users

Cell phone, PDA devices and text only browsers can easily ignore images from a stylesheet, since they know they are just for styling. This improves downlaod time of the pimary content.

Benefits to Developers

Minimize the amount of alt text that needs to be wrtten and maintained in a web resource.
More fleixble stlying options with CSS background images than with traditional in-line img markup.
Cleaner html code, making maintenance and development of new resources easier.

HTML Markup Details

alt attribute: Remove img markup and use CSS techniques to implement styling requirements and no alt is needed for images included as part of a stylesheet.; If for some reason CSS cannot be used, set the alt atribute 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]