Comments on: Foreground Sprites – High Contrast Mode Optimization

By: CSS Sprites w/out Using Background Images | Photoshop Tutorial

CSS Sprites w/out Using Background Images | Photoshop Tutorial — Sun, 05 Jun 2011 15:15:54 +0000

[...] Sprites – High Contrast Mode Optimization [...]

By: Dallas Despain

Dallas Despain — Wed, 22 Dec 2010 18:46:13 +0000

I was just barely looking for a solution to this and I found your article on twitter. Great info. My only concern is that I feel like we’re doing back flips to solve the limitations of Windows high contrast mode. If the comments above are to be believed, magic handles css background images “correctly”, and my own testing verifies that OS X high contrast mode also displays background images.

I suppose the definition of “correctly” handling background images in high contrast mode could be debated. Does anyone know why Windows chooses not to display them? CSS background images are assumed to be decorative only for the purposes of screen readers and if not, some text alternative should be provided, but for a low vision user, they do provide value. OS X does a much better job by reversing the colors in the images.

I do realize that none of us has the power to change Windows I contrast mode, but perhaps we should submit a bug and notify them that they’re forcing web developers to get very creative to solve a shortcoming in Windows high contrast mode

By: Thierry Koblentz

Thierry Koblentz — Sun, 13 Jun 2010 03:06:20 +0000

@ArtzStudio your method enhances my solution regarding transparent images as you use the image to push the text down while I am hiding that text behind the image. Slightly different, but it solves a real problem. I’ll use that

By: Chris Blouch

Chris Blouch — Thu, 06 May 2010 15:00:26 +0000

@Michelangelo – While there are techniques for discerning whether someone has AT (assistive technology) running on windows making use of the MSAA (microsoft active accessibility) API or high contrast mode, this question quickly moves into the realm of consumer advocacy and privacy. Most AT users do not want to self-identify as having some kind of disability or have us probing their system to find out. It’s a tough nut because we would really like to know so we can make stronger arguments for supporting AT in our products, but privacy does and should trump this desire for personal user data.

By: fwolf

fwolf — Thu, 06 May 2010 06:41:53 +0000

Ok … tested my hover idea, and looks like it works (except IE _OF COURSE_, but I havent tested out the absolute position-method yet, maybe that one does)

cu, w0lf.

By: fwolf

fwolf — Thu, 06 May 2010 06:02:06 +0000

@ArtzStudio + Pat: About the hover problem – I think it should still be possible to get this done [without] using Javascript. At least, for any tag that encloses an image tag, ie. in the standard case that would be an linked image (a + img tag).

In said example, that should be something like

h2 a:hover img {
top: -300px; // the hover state is starting at a height of 300px
}

cu, w0lf.

By: Thierry Koblentz

Thierry Koblentz — Wed, 05 May 2010 23:33:12 +0000

@ArtzStudio Thanks. It’s pending…

By: Richard - web accessibility testing

Richard - web accessibility testing — Wed, 05 May 2010 19:18:54 +0000

I can see why you remove the alt text in the example heading you give, but I think it is important to emphasise that alt text should be present where the image has informational meaning that isn’t otherwise presented as text. For example in the case of buttons disappearing from Google video, if these were changed to an image sprite then it wouldn’t solve the accessibility problem because the individual buttons need to have alt text of “previous” and “next” or similar. A single sprite image wouldn’t be able to identify this.
I do think that sprites can be used in some circumstances, but rarely in the case of informational images, in which case the problem of the image disappearing in high-contrast mode is no longer a problem.
The only situation I can think of where an html sprite image might work is if you had the same information repeated across the different parts of the image (so only one alt text is needed), e.g. a form submit button that was portrayed in different fonts or colours on different parts of the page.

By: ArtzStudio

ArtzStudio — Wed, 05 May 2010 18:54:10 +0000

@Thierry – Done, I meant in no way to infringe on any patents you may hold

By: Thierry Koblentz

Thierry Koblentz — Wed, 05 May 2010 14:42:55 +0000

@ArtzStudio
I cannot find a contact form or link on this site, but I wanted to tell you that I kind of expected you to mention in your article that there was “prior art”. After my first post, I thought you would acknowledge that in the article itself (as we know, most people do not read comments).
Thanks.