[TECH] Possible CSS Technique for image-text

The guidelines generally discourage the use of images of text since they 
may not be fully accessible (yes, adding alt text makes them more 
accessible but still may cause a problem for high contrast users).  So, my 
question is, should we include a CSS technique for an accessible way to 
display images of text on an HTML page?  The technique is described below 
and I have attached a sample page that uses this technique.

The simplest technique that I have found for making images of text used as 
headers accessible is from Tom Gilder:

    .replace {
      width: 300px;
      height: 100px;
      position: relative;
    }
      .replace span {
      background: url(...) no-repeat;
      width: 100%;
      height: 100%;
      position: absolute;
    }
        <div class="replace"><span></span>Text</div>

It works with and without images enabled, works in high contrast mode with 
screen readers, and does not rely on JavaScript. The plain text will only 
show if images are turned off in the browser - either explicitly by the 
user or because css is turned off.  Otherwise, the background image in the 
.replace span style is displayed.  The only issue is if the text is wider 
than the image.  This can be worked around by making certain the width of 
the replace style is not wider than the image element.  Setting the width 
of the replace style will force the text to wrap within that specified 
width.  There are still problems if the text is exceptionally long, as it 
will wrap below the image and be visible (see the attached file for an 
example). Generally most text images are will not be significantly smaller 
than the text they replace but it is important to test with different 
browser font size settings. 

There have been several other techniques discussed as well. See 
Using Background-Image to Replace Text 
Replacing Text By An Image
JavaScript Image Replacement
Image Replacement
Some of these either do not work with screen readers or do not work when 
css is disabled (as in high contrast mode). The JavaScript replacement 
technique works in all modes (and with or without JavaScript enabled) but 
requires knowledge of the document contents and substitution of data. 

-becky



Becky Gibson
Web Accessibility Architect
                                                       
IBM Emerging Internet Technologies
5 Technology Park Drive
Westford, MA 01886
Voice: 978 399-6101; t/l 333-6101
Email: gibsonb@us.ibm.com