Add text behind picture

I have image link button. In high contrast mode image (ok.gif) is not visible so I want have alternate picture. My alternate "picture" is unicode character unicode \270E. This is working in high contrast mode, but in normal mode unicode is over image. I want have my alternate "picture" behind real picture so that is not visible in in normal(not high contrast) mode. Thanks for help.

a.img-button-edit,
a.img-button-edit:visited,
a.img-button-edit:link {
    width: 28px;
    height: 20px;
    display: block;
    background: transparent url("../Images/buttons/ok.gif") no-repeat top left;
    background-position: -56px 0px;
}

    a.img-button-edit:before {
        text-align: center;
        font-size: 1.3em;
        margin: 0 0 0 0;
        padding: 0 .2em;
        content: "\270E";
    }

Solution

I'm choosing to read your question as asking how to execute image sprites with high contrast mode accessibility.

HCM removes all background images and sets all element colors to be white on a black background. This is useful adaptive tech for people with low vision and it is a well established operating system level setting, though Chrome and other accessibility suites will be slightly different. With all accessibility design, testing is important.

So how do I use image sprites with HCM?

If you use traditional image sprites where a single image is used as a background-image with different background-position values those images will be stripped from your page in HCM. This was designed to increase the legibility of the page (think back to the tiled gif backgrounds of yore), but this obviously creates a big issue with tool bars or icon bars where the image is the only interface given.

Choosing the icon-only route has its own set of accessibility issues (Does a cell phone mean "call us" to an elderly user? Does a floppy disk mean "save" to someone born in 2000? What about other cultures? etc.) But setting that aside, how can you technically execute this for HCM?

Replacing the image with unicode characters could work, but it will be difficult to execute in the manner you've chosen. Pseudo elements are treated as children elements with regard to z-index. Plus, the unicode character is still read aloud to screen readers. One idea that comes to mind is setting color: transparent;, and allowing HCM to convert it to black, while allowing the background-image to get stripped out. You would still need two elements, one to contain the text for screenreaders, and one to contain the image with aria-role="hidden". Otherwise the following would be read as "Edit. Lower Right Pencil".

<a aria-label="edit" class="img-button-edit"><span aria-hidden="true">&#9998;</span></a>

a.img-button-edit{
    color:transparent;
    width: 28px;
    height: 20px;
    display: block;
    background: transparent url("../Images/buttons/ok.gif") no-repeat top left;
    background-position: -56px 0px;
    z-index: 0;
}
span[aria-hidden="true"]{
    z-index: -1;
 }

Now, of course, IE8 and older will botch 'color: transparent' or 'color: rgba(0,0,0,0);` so I use z-index as extra insurance.

However, you could also consider going the route of the <img> sprite as described by Artz Studio. or Yahoo Accessibility Blog because <img> are left intact by HCM

<a aria-label="edit" class="img-button-edit"><img src="../Images/buttons/ok.gif" aria-hidden="true"></img></a>

a.img-button-edit{
    width: 28px;
    height: 20px;
    display: block;
    overflow:hidden;
    position:relative;
    top: -56px;
}

This uses a <img> element with overflow: hidden; to take the place of your traditional empty <div> or <span> in background image sprites. This is more semantically accurate to boot. Either way, I don't see a way to avoid adding an extra element to your markup.