RE: [TECH] Possible CSS Technique for image-text

Hello Becky,
 
I understand what you're trying to do and I like the trick. An additional
benefit is that it helps to put all the design choices in the CSS instead of
the HTML, which leads to a better separation of concerns and helps
maintaining the website. 
 
However, I see two problems with the technique. First, the audience you
create this technique for (high contrast users) tend to have large font
settings. I once had a student that could only read web pages with a sans
serif font of 60 pts or more. With font settings like these, your technique
will fail. One of the fundamental concepts of an accessible website to me is
that you do not make any assumptions about the user's settings. Any
technique that doesn't hold up under these conditions should be
reconsidered, I think. 
 
Another problem with this technique is that I think it might be confusing
for developers who are new to accessibility and WCAG. It feels like you're
creating your own implementation of ALT-text. I think developers will find
it confusing to know what we recommend for images of text: use ALT-text or
use this CSS-trick. 
 
What _are_ the problems high contrast users face with images of text with
ALT-text? It seems to me that turning the images off in your browser would
render the ALT-text in your preferred font size, which would make them
accessible for this group, or not? Or do you feel that this is too
cumbersome to ask of a high contrast user? The reason I ask is that it would
be a lot easier to understand for developers if the ALT-text technique
covers all the accessibility problems of images of text for all the
audiences.
 
Yvette Hoitink
Heritas, Enschede, the Netherlands
E-mail: y.p.hoitink@heritas.nl
WWW: http://www.heritas.nl
 
 



  _____  

From: w3c-wai-gl-request@w3.org [mailto:w3c-wai-gl-request@w3.org] On Behalf
Of Becky_Gibson@notesdev.ibm.com
Sent: donderdag 26 augustus 2004 18:50
To: 'w3c-wai-gl'
Subject: [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  <http://blog.tom.me.uk/2003/08/07> 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 

*	 <http://www.stopdesign.com/articles/replace_text/> Using
Background-Image to Replace Text 

*	 <http://wellstyled.com/css-replace-text-by-image.html> Replacing
Text By An Image 

*	 <http://www.alistapart.com/articles/javascriptreplacement/>
JavaScript Image Replacement 

*	 <http://www.quirksmode.org/dom/fir.html> 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:  <mailto:gibsonb@us.ibm.com> gibsonb@us.ibm.com