- From: Thierry Koblentz <ng@tjkdesign.com>
- Date: Thu, 24 Jun 2010 08:26:14 -0700
- To: "'Jonathan Avila'" <jon.avila@ssbbartgroup.com>, <w3c-wai-ig@w3.org>
- Message-ID: <009301cb13b1$965baa40$c312fec0$@com>
The technique [1] was mentioned earlier in this thread, but imho this method as a few caveats: - The image disappears with high-contrast settings, - The image cannot be styled to scale since what shows is a background image, - The alt text cannot be “selected” via keyboard nor mouse (in most browsers), - The alt text does not show when background images are disabled, - And without CSS the element itself collapses (if it is the content of a link, then pointing device users cannot access that link). [1] http://www.tjkdesign.com/articles/tip.asp -- Regards, Thierry www.tjkdesign.com | <http://www.ez-css.org> 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: Thursday, June 24, 2010 5:32 AM To: w3c-wai-ig@w3.org Subject: 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 <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 Â
Received on Thursday, 24 June 2010 15:27:09 UTC