Technique C9:Using CSS to include decorative images
About this Technique
This technique relates to 1.1.1: Non-text Content (Sufficient).
This technique applies to any technology that can use CSS to include images.
Description
The objective of this technique is to provide a mechanism to add purely decorative images and images used for visual formatting to Web content without requiring additional markup within the content. This makes it possible for assistive technologies to ignore the non-text content. Some user agents can ignore or turn off CSS at the user's request, so that background images included with CSS simply "disappear" and do not interfere with display settings such as enlarged fonts or high contrast settings.
Background images can be included with the following CSS properties:
background
;background-image
;content
, combined with the::before
and::after
pseudo-elements;list-style-image
.
Note
This technique is not appropriate for any image that conveys information or provides functionality, or for any image primarily intended to create a specific sensory experience.
Examples
Example 1: Background image for an HTML page
The stylesheet for a Web page specifies a background image for the whole page.
<style>
body { background: #ffe url('/https/www.w3.org/images/home-bg.jpg') repeat; }
</style>
Example 2: Background image with CSS for image rollovers
The stylesheet for a Web page uses the CSS background property to create a decorative rollover effects when a user hovers their mouse pointer over a link.
a:hover {
background: #ffe url('/https/www.w3.org/images/hover.gif') repeat;
color: #000;
text-decoration: none;
}
Related Resources
No endorsement implied.
Tests
Procedure
- Check for the presence of decorative images
- Check that they are included with CSS
Expected Results
- If #1 is true, then #2 is true.