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
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.
- Screen reader users do not have to determine if a decorative image is adding content to a web page.
- 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.
altattribute content that needs to be written and maintained in a web resource is minimized.
HTMLcode is cleaner, so that the development and maintenance of web resources are easier.
- CSS with the
backgroundproperty offers more flexible styling for images than the traditional in-line
- 17: Images in HTML - Background images with CSS (Opera Web Standards Curriculum)
- There will be no need to define an
altattribute 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="").
- 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]