[dojo-contributors] Accessibility issues with the use of CSS background images

Bill Keese bill at dojotoolkit.org
Thu Jun 22 20:13:35 EDT 2006

Becky, thanks for sending this mail.  I thought it was important to send 
to dojo-contributors since the decision will have a big impact on dojo 
in general, in addition to accessibility impact.

I tried Alt-Shift-Print screen.  It's quite a drastic change :-)

The pharks technique Tom suggested will work for screen readers but I'm 
betting that it won't work for high contrast mode.  But can you try?

My main question to you is, what do other sites do?  Both government 
sites, and business sites like Yahoo or Amazon?  Do you have 
info/statistics on that?  Do any sites have two versions?

I did a little looking.  Amazon seemed to use images for anything 
clickable, whereas yahoo mail (the new yahoo mail beta), the editor 
buttons like "bold", "italic", etc. just don't show up in high contrast 
mode (nor is there any replacement text).  Things like folder icons 
don't show up either, but they are not essential.

Becky Gibson wrote:
> As I am working on accessibility for the widgets I am noticing the use of 
> CSS background images.   These types of images present a problem for 
> accessibility when they are used to convey information.  People who use 
> screen readers to access the content get no information about CSS provided 
> images.   When a screen reader encounters a standard <img> element it will 
> speak the contents of the alt attribute. 
> CSS background images also present a problem for people who use the 
> operating system level high contrast mode (shift-alt-printscreen is 
> usually set up to switch to high contrast mode on Windows systems - be 
> careful though it changes font size and can rearrange your desktop).  In 
> this mode any color or background information is disabled - basically only 
> CSS  positioning and visibility/display status is maintained.  So, widgets 
> like the slider are currently not usable in high contrast mode.   In 
> addition,  The US Government Section 508 of the Disabilities Act [1] 
> requires that pages work with CSS turned off: "Documents shall be 
> organized so they are readable without requiring an associated style 
> sheet." 
> There are a few possible solutions. 
> 1) don't use CSS background images to convey information.  Thus the close 
> icon on a tab panel or the checkbox icon need to be real <img> elements. I 
> know there are concerns about this approach since it prevents changing the 
> chrome simply by modifying the style sheet.  There are also performance 
> concerns.   The use of real images isn't an ideal situation either since 
> images are not turned off by default in high contrast mode.  Someone using 
> high contrast mode usually has some sort of vision impairment and might 
> have difficulty seeing the image.  The work around for this is for the 
> user to turn off images and rely on the alt text. This certainly isn't 
> ideal but is an acceptable work-around. 
> 2) use CSS image replacement techniques [2] where possible to provide the 
> necessary text below the non-transparent background-image.  This will work 
> in situations like the slider but is more difficult when the text 
> description is longer than the image.   For example, the proper 
> description of the close X on a tab panel should be "close" or  "close 
> tab" but that amount of text certainly won't fit behind the X icon.  One 
> could argue that the alternate text for close could be implemented as [x] 
> and would probably be recognized but I think we will run into other issues 
> where the text will be longer than the image.   There are also 
> implications when the font size is made larger and the text no longer fits 
> behind the image. 
> So, my current proposal is to use the second technique, CSS image 
> replacement, where possible and fall back to using <img> elements where 
> CSS image replacement is not possible.  This still leaves the chrome 
> issue.  Does any one have other suggestions?  I'll also be looking for 
> help with implementing the CSS image replacement techniques within the 
> widgets - I'm certainly not a CSS guru!
> thoughts and ideas?
> thanks,
> -becky
> [1] http://www.section508.gov/index.cfm
> [2] http://www.mezzoblue.com/tests/revised-image-replacement/  (the 
> Gilder/Levin Method shows the most promise)
> 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 at us.ibm.com
> _______________________________________________
> dojo-contributors mailing list
> dojo-contributors at dojotoolkit.org
> http://dojotoolkit.org/mailman/listinfo/dojo-contributors



More information about the dojo-contributors mailing list