RE: high contrast and background images

One technique that I believe we have not discussed is providing a spacer
image in addition to a background image used as a non-decorative image that
does not contain text.  Only one spacer would be used in addition to all
background images and thus this would only cause one extra image to be
transferred.   Alt text can be assigned to the spacer image and thus it
would be accessible to screen reader users.  The alt on the image would be
available if images were turned off in the browser and thus visually
available.  The alt text however would not be available to keyboard only
users but alt text is not available using the IMG element either.  The image
and the alt would not be available when background images are turned off
such as when high contrast is present.  This is certainly a legitimate issue
although I don’t think it’s totally clear which WCAG 2 guidelines it would
fall under because there is an spacer image with alt text representing the
background image.  I believe this gets back to the heart of the issue that I
have with the alt text spec in HTML which basically implies that alt should
only be shown when images are not present and otherwise should not be
available to the user.  While inline images should be used instead of the
spacer in my example above, practically speaking though having an inline
image element that is small even with good contrast may not be accessible to
a keyboard only high contrast user since the alt text is not available to
him/her.



Jonathan



*From:* John Foliot [mailto:jfoliot@stanford.edu]
*Sent:* Thursday, June 24, 2010 12:58 AM
*To:* 'Chris Reeve'
*Cc:* ng@tjkdesign.com; 'Jonathan Avila'; w3c-wai-ig@w3.org
*Subject:* 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

Stanford University

Tel: 650-862-4603



---

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

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 | 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