Skip to Content (Press Enter)

This document is a draft, and is designed to show changes from a previous version. It is presently showing added text,changed text,deleted text,[start]/[end] markers,and Issue Numbers.

Hide All Edits   |   Toggle Deletions  |   Toggle Issue Numbers   |   Toggle [start]/[end] Markers   |   Show All Edits

Changes are displayed as follows:

F3: Failure of SC 1.1.1 due to using CSS to include images that convey important information


All technologies that support CSS.

This failure relates to:


The CSS background-image property provides a way to include images in the document with CSS without any reference in the HTML code. The CSS background-image property was designed for decorative purposes and it is not possible to associate text alternatives with images that are included via CSS. Text alternatives are necessary for people who cannot see images that convey important information. Therefore, it is a failure to use this property to add images to convey important information.


Failure Example 1:

In the following example, part of the content is contained in an image that is presented by CSS alone. In this example, the image TopRate.png is a 180 by 200 pixel image that contains the text, "19.3% APR Typical Variable."

 The CSS contains: 
p#bestinterest {
  padding-left: 200px;
  background: transparent url(/images/TopRate.png) no-repeat top left;

It is used in this excerpt:

<p id="bestinterest">
  Where else would you find a better interest rate?

Failure Example 2:

A book distributor uses background images to provide icons against a list of book titles to indicate whether they are new, limited, in-stock, or out of stock.

The CSS contains:

ul#booklist li {
  padding-left: 20px;

ul#booklist {
  background: transparent url(new.png) no-repeat top left; 
ul#booklist {
  background: transparent url(limited.png) no-repeat top left; 
ul#booklist li.instock {
  background: transparent url(instock.png) no-repeat top left; 

ul#booklist li.outstock {
  background: transparent url(outstock.png) no-repeat top left; 

It is used in this excerpt:

<ul id="booklist">
  <li class="new">Some book</li>
  <li class="instock">Some other book</li>
  <li class="limited">A book we desperately want to get rid of</li>
  <li class="outstock">A book you actually want </li>


No resources available for this technique.



  1. Examine all images added to the content via CSS.

  2. Check that the images do not convey important information.

Expected Results