Using a transparent image as an icon fallback

Sometimes designs contain button styling that is difficult to create with CSS alone. The “official” way of dealing with this is to either use an image button (<input type="image" src="button.png" alt="Ok" />) or put the image in a button element (<button><img src="button.png" alt="Ok" /></button>).

However if the graphic you want to show instead of the button is part of a sprite image, or if you want to display a different image when the button is hovered over or receives focus, that won’t work. In these cases it can be tempting to just use a background image and move any text the button contains out of the way by positioning it off-screen or applying a bit of text-indent. Or even worse, use no text content at all. Using no text content at all is obviously no good to anyone who can’t see the image, like screen reader users. And hiding the text causes problems if the image can’t be displayed.

Much of this is covered by Nicholas C. Zakas in Making accessible icon buttons, and I thought I’d talk a bit more about a technique he mentions that I use in these situations – the transparent one pixel image.

The transparent one-by-one pixel image

Using a transparent one-by-one pixel image feels a bit like going back in time to 1998, when the Web was full of transparent images used as spacers inside table cells to control layout sizes. But this time it’s there for a better reason.

As Nicholas describes in his blog post, using a transparent image lets you use CSS to place an icon on the background of a button while making sure the button contains real text (the alt text of the input or img element, depending on whether you’re using <input type="image"> or a button element with an img element inside. This makes it possible for screen reader users to understand the purpose of the button. One additional benefit this technique has, though admittedly it is an edge case, is that it benefits users that happen to have images off. Well, at least sometimes, in some browsers.

Theory vs. practice

Theoretically, alt text should be exposed when the image cannot be displayed. In practice this doesn’t always happen.

To test when this actually works I set up a Transparent image fallback demo page with a few examples of buttons using transparent images, either by referencing a real image file or by using a data-URI. Unfortunately, no browser that I have checked in does exactly what I think it should when images are disabled.

In my opinion, the correct behaviour would be to display alt text without clipping it (like Firefox does) and also do this for images with data URI:s (like Opera and IE do, but without the icon that IE adds). See also Visual display of alternative text.

So, this technique is not perfect in practice, but by using it at least you’re giving browsers a chance to help users that can’t see the image.

Finally, unless the icon or symbol you use instead of text is extremely obvious and cannot be misinterpreted, consider adding a title attribute for mouse users (and make the title text appear when the button gets keyboard focus).

Posted on April 30, 2013 in CSS, Browsers, Accessibility