CSS Background Images

CSS Background images do not have an ALT attribute like the HTML IMG element. For this reason, they can not convey their meaining to assistive technology like the JAWS screen reader.

Generally speaking, it is recommended to only use CSS Background Images for decorative images that convey no meaning. Something like a corner gif or perhaps an icon graphic that is associated with HTML LINK text and does not convey any meaning that is not already conveyed in the text.

I have seen some novel uses where HTML text is styled with a background image overlaying the text. This allows the screen reader to read the text, while the sighted user only sees the image and not the underlying text. Although it would be better from several points of view to use an HTML IMG and the ALT attribute in this case. HTML images will be cashed when downloaded. CSS images are not. So there is a performance benefit. Also consider the SEO implications. CSS images are not indexed by the search engines.

Example 1:

Uses a background image to create an image that conveys no meaning.

 
 
 
 

Code


<style>
.myCornerGif
{
background-image:url('/images/corner.jpg');
background-repeat:no-repeat;
background-attachment:scroll;
background-position:left; 
position:relative;
padding-top:100px;
padding-bottom:100px;
padding-right:50px;
padding-left:50px;
}
</style>
<div class="myCornerGif">&nbsp;<div>

Example 2:

Uses a background image to create an image which has an alternate description as LINK text on the screen.

Code


<style>
.myHelpIcon
{
background-image:url('/images/help.jpg');
background-repeat:no-repeat;
background-attachment:scroll;
background-position:inline; 
position:relative;
padding-top:100px;
padding-bottom:100px;
padding-right:50px;
padding-left:50px;
}
</style>
<div class="myHelpIcon"><a href="#">Help</a></div>

Works With

Using CSS Background Images
Browser Screen Reader Results
IE 9 JAWS 12 Yes
FF 4 JAWS 12 Yes

Comments are closed.