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
- Screen reader users do not have to determine if a decorative image is adding content to a web page.
Benefits to Everyone
- 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
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)
altattribute should provide a short description of the purpose and information contained in an image
Related Accessibility Requirements
- § 1194.22.a A text equivalent for every non-text element shall be provided (e.g., via "alt", "longdesc", or in element content).