Accessibility issue: High Contrast in IE9 – Image Replacement

[davidcolacilli]

I’m using Technique #8 (https://css-tricks.com/css-image-replacement/) for accessibility friendly image replacement. Works fine in High Contrast mode in all browsers except IE9 (text doesn’t show).
Any clue?

[davidcolacilli]

CSS-Tricks

h1.technique-eight {
width: 350px; height: 75px;
position: relative;
}

h1.technique-eight span {
background: url(“images/header-image.jpg”);
position: absolute;
width: 100%;
height: 100%;
}

[Paulie_D]

Can you provide a link or a Codepen?

[davidcolacilli]

Yes, Codepen (ignore logo transparency) – http://codepen.io/anon/pen/eJvnG

Remember: issue only in ie9. Thanks.

[Paulie_D]

As near as I can tell this is a problem with background images and HCM.

http://codepen.io/Paulie-D/pen/hKwyl in HCM will show the text but only because I have disabled the background image.

I believe that you can detect HCM with JS (JQuery has something I think) but otherwise a re-think might be required.

[davidcolacilli]

I forgot to say they don’t want it to be done with javascript ;)
Anyways, it helps. Thanks a lot!

[Author]

Posts