Is using text-indent to provide a short description to a sprite image WCAG compliant?

Question

I'm trying to get a site I'm working on to be WCAG 2 compliant. The site uses image sprites and it would be a challenge to replace the usage of image sprites throughout. As such I'm trying to determine whether the following technique:

<div style="background: url(flower.png); height: 20px; width:20px;">  
  <div style="text-indent: 100%; white-space: wrap; overflow: hidden">
    A red rose
  </div>
</div>

Is sufficiently compliant. From reading the documentation... it's unclear.

For a non-decorative img tag use of alt is definitely a requirement: H37: Using alt attributes on img elements

And for a media objects, wrapping content is sufficient: H53: Body of Object

But whether using the body of a a div that has a non-decorative image background passes muster isn't very clear.

Can anyone speak to this or point me to the relevant page in the standard?

Answer 1

There are a couple of scenarios this could be, the advice will change depending on whether it is:

1. Content images (e.g. a gallery)
2. Functional elements like a navigation or toolbar options.

If they are content images (which 'red rose' implies), then I think this technique applies: http://www.w3.org/WAI/GL/WCAG20/WD-WCAG20-TECHS/C30.html

In which case your approach would meet WCAG if people could display it without the image in order to read the alt-text. That might sound odd, but assistive technologies have long known how to read alt attributes, but image-replacement can be done in many ways and they may not be able to tell when it is used.

Screen reader users would probably find it ok, but other groups who need alt-text probably wouldn't be able to read the text in a 20x20px box. For example, if you turn on high-contrast mode in Windows, background CSS images are dropped and the text would not be visible.

If they are functional elements and the image is an icon, e.g. a "save" button, then you want a visible (e.g. tooltip) and programatic label, in which case I would suggest:

<div style="background: url(flower.png); height: 20px; width:20px;" 
role="button" aria-label="Save" title="Save" tabindex="0"></div>

However, you would be better off using foreground images or font-icons, as these are far more robust in different situations. For example, if you included a font-icon you could use:

 <button>
  
      <span class=”icon-save” aria-hidden="true"></span>
  
      <span class=”alt”>Save</span>
    
 </button>

With something like this as the CSS, assuming you have already imported the correct font to use:

    .icon-save:before {

       font-family: icons;
      
       content: ⇝ /* whatever your icon reference is */
    
    }

 .alt {
  position: absolute;
 left: -9999px;}