RE: high contrast and background images

Hi Chris,



I’ve tried to follow this thread, and I keep coming back to the same issue: 
You “learned” something that may or may not be relevant here.



So (if I may) let’s try and establish some baselines, and then if there are 
any questions, we can go from there.



·         Background images should be applied via CSS. This is the best 
solution in the case where users might specify an alternative (i.e. High 
contrast) style sheet to address their particular needs, as the image and 
background color are both jettisoned in favor of the user specified 
background/foreground color combinations in their alternate style sheet.



·         If text is to appear on top of that image, sufficient foreground 
and background contrast must exist per the existing algorithms. This may 
require sampling some predominant colors in your image and testing a 
composite result



·         It is good CSS development practice to also specify an approximate 
background color (in hex or other) as well as the image when declaring your 
background, in the case where images are disabled or not supported for 
whatever reason.  When specifying a foreground color, it is also good 
practice to *always* specify a background color



·         Images in CSS cannot have any alternative text.



·         Images used as backgrounds, but containing text as part of the 
image, *MUST not* be inserted via CSS, and instead must use the <img> 
element and appropriate alt text.



·         If other text is intended to sit on top of this image, you will 
need to use some CSS z-index placement to achieve what you need, or 
alternatively do some image slicing and extract the ‘text’ bit which would 
then be overlaid onto a CSS declared background. Either technique will allow 
for the ‘text-image’ to have an appropriate alt text, as is required. This 
might apply where custom text (such as a stylized logo) is mandated and 
cannot be achieved in any other fashion; however whenever possible the use 
of actual text should be encouraged: your overall design requirements will 
help guide you in choosing a solution here.  CSS3’s @font-face also shows 
great promise in this regard (except for that small IE issue today…)



·         While a ‘rich’ image used as a background should be discouraged 
(for example a sailboat on the water, sufficiently opaque to allow text to 
sit on top of it and remain readable) it is not “forbidden”.   If required 
(and the image used is part of a larger ‘message’) you might consider a 
small “sidebar” div (box) “About our background: Pictured is the 2010 Sea 
Shark Sailboat, winner of the best sailboat award in 2009”; this would be 
both a great marketing message as well as complete the total “message” for 
non-visual users and would meet both technical requirements and (I believe 
more importantly) “the spirit” of WCAG 2. Depending on design 
considerations, you could also place that div off screen, allowing the text 
to be picked up by screen readers while not impacting on a specific design 
layout (although perhaps still shutting out low-vision users who may not be 
able to discern what the image actually is…)



As an old-timer on his list, I would also caution you not get too caught up 
in satisfying any specifically numbered ‘technique’, as these are neither 
the definitive answer nor intended to be some check list requirement to 
achieving “accessibility”. They are offered as possible solutions but the 
ultimate goal is to ensure all users receive an equivalent user experience 
and conveyance of information – not identical, equivalent. This ultimately 
means you need to think about what you are attempting to do and asking 
yourself “is this going to be accessible to all users, regardless of their 
unique circumstances”. If you have a ‘new’ technique that achieves that 
goal, then it is perfectly valid and acceptable – with one caveat. Test, 
test, test. As we are discussing issues related to low-vision/blindness in 
this particular thread, asking users of those communities for feedback would 
be a great idea, and luckily there are a number of such users on this list 
only too happy to offer feedback when asked <grin>. Post a URL and ask 
nicely – you’ll be surprised how much good feedback you will receive.



I might also suggest that ‘text-images’ will also likely have issues when 
ported to smaller view screens (mobile) so while working with your ‘client’ 
(commercial or otherwise) a bit of guidance as to how they should proceed is 
often the mark of a good pro – don’t insist, but guide and even perhaps mock 
up examples if/when required.



Hopefully this helps eliminate your feeling of circular discussion. Happy to 
answer any question, and hopefully either Shawn or Judy will chime in and 
shoot me down or agree.



Cheers!





JF

============================

John  Foliot

Program Manager

Stanford Online Accessibility Program

 <http://soap.stanford.edu> http://soap.stanford.edu

Stanford University

Tel: 650-862-4603



---

Co-chair - W3C HTML5 Accessibility Task Force (Media)

 <http://www.w3.org/WAI/PF/HTML/wiki/Main_Page> 
http://www.w3.org/WAI/PF/HTML/wiki/Main_Page



============================











From: w3c-wai-ig-request@w3.org [mailto:w3c-wai-ig-request@w3.org] On Behalf 
Of Chris Reeve
Sent: Wednesday, June 23, 2010 7:14 PM
To: ng@tjkdesign.com; Jonathan Avila; w3c-wai-ig@w3.org
Subject: Re: high contrast and background images



I want Shawn's Henrys opinion or Judy Brewer's opinion on this subject.



We are going in circles.



  _____

From: Thierry Koblentz <ng@tjkdesign.com>
To: Chris Reeve <chrisreeve15@yahoo.com>; Jonathan Avila 
<jon.avila@ssbbartgroup.com>; w3c-wai-ig@w3.org
Sent: Mon, June 21, 2010 12:36:52 PM
Subject: RE: high contrast and background images

> If the image is important to the site owner, that removal is out of the 
> question, than an alt tags is required.
> Therefore, the background-image usage is out of the question because 
> background images cannot satisfy the alt tag requirements.

I believe background images are fine if there is text alternative, which 
here is different than "alt" text since there is no such attribute for 
background image.

As a side note, most image replacement techniques (the use of a background 
image with alternative text) are better than using <img> elements with "alt" 
text when it comes to copying content in a browser (as most of them will 
ignore "alt" text).

--
Regards,
Thierry
www.tjkdesign.com <http://www.tjkdesign.com/>  | www.ez-css.org 
<http://www.ez-css.org/>  | @thierrykoblentz

From: w3c-wai-ig-request@w3.org [mailto:w3c-wai-ig-request@w3.org] On Behalf 
Of Chris Reeve
Sent: Sunday, June 20, 2010 10:33 PM
To: ng@tjkdesign.com; Jonathan Avila; w3c-wai-ig@w3.org
Subject: Re: high contrast and background images

I learned that it is impossible to have alt tags when implemeting a 
background image. My issue is not about the high contrast. It is about the 
bakckground image. Since H67 is a technique to allow for images that can be 
avoided by screen readers, here is my suggested test. Put the image on the 
server. If the image should be ignored by the screen reader, use empty alt 
tags. Those which are ignored on the previous test should than be 
implemented as a background-image.
If the image is important to the site owner, that removal is out of the 
question, than an alt tags is required. Therefore, the background-image 
usage is out of the question because background images cannot satisfy the 
alt tag requirements.

________________________________________
From: Thierry Koblentz <ng@tjkdesign.com>
To: Chris Reeve <chrisreeve15@yahoo.com>; Jonathan Avila 
<jon.avila@ssbbartgroup.com>; w3c-wai-ig@w3.org
Sent: Mon, June 14, 2010 9:10:49 PM
Subject: RE: high contrast and background images
H67 is related to decorative images, so high-contrast settings would not be 
an issue.
As a side note, there is no such thing as alt text for background images, 
and H67 does not say to not use alt, it says to use it with a null value 
 (“”).

--
Regards,
Thierry
www.tjkdesign.com | www.ez-css.org | @thierrykoblentz

From: Chris Reeve [mailto:chrisreeve15@yahoo.com]
Sent: Monday, June 14, 2010 5:06 PM
To: ng@tjkdesign.com; Jonathan Avila; w3c-wai-ig@w3.org
Subject: Re: high contrast and background images

Another possibility I thought of is to choose a background image that can 
satisfy http://www.w3.org/TR/2008/NOTE-WCAG20-TECHS-20081211/H67
If the chosen background image satisfies H67, than there would not be any 
need for the alt tag.

________________________________________
From: Thierry Koblentz <ng@tjkdesign.com>
To: Jonathan Avila <jon.avila@ssbbartgroup.com>; w3c-wai-ig@w3.org
Sent: Mon, June 14, 2010 3:51:08 PM
Subject: RE: high contrast and background images

> The technique developers need to use will allow this text to appear in
place of the background image when high contrast is used.

A better approach would be to *not* use a technique that relies on
background-image to avoid losing these images when users switch to high
contrast styles sheets.

For example, a technique like this one should make this a non-issue:

http://tjkdesign.com/articles/how-to_use_sprites_with_my_Image_Replacement_t
echnique.asp

--
Regards,
Thierry
www.tjkdesign.com | www.ez-css.org | @thierrykoblentz

From: w3c-wai-ig-request@w3.org [mailto:w3c-wai-ig-request@w3.org] On Behalf
Of Jonathan Avila
Sent: Monday, June 14, 2010 11:19 AM
To: w3c-wai-ig@w3.org
Subject: RE: high contrast and background images

Chris Reeve Wrote:
“Cindy, I do not know enough about what Roger is talking about. But I do
know, that when you use a background image; it is impossible to use an alt
tag. Therefore by default; all alt background images will fail 1.1.1

This information came to me from an accessibility seminar I attended last
year.”

CSS background sprites are used to reduce the number of image files
transferred and thus speed of page load times for many users.  A small
portion of a background image can more easily be shown in a certain element
and thus a single background image can contain many of the images to be
shown on the page. There are many good techniques out there to couple text
and alternative text to the area where the background image appears.  The
technique developers need to use will allow this text to appear in place of
the background image when high contrast is used.

Jonathan