Accessible CSS Text Images

There are about a million and one different methods of using text for images available on the Internet so me posting this method isn’t really new. But I believe it is the definative and only method that should be used on any website.

Other methods are either flawed or reduce accessibility for some visitors to your site.

This method doesn’t require any JavaScript, doesn’t require any special preloading of the images, allows those with images turned off to still read the text the image is displaying and doesnt load the images but still shows text if CSS stylesheets are disabled, it also works on all browsers.

I would like to point out that from an accessibility viewpoint, you shouldn’t really use images to display text as it won’t be re-sized with the rest of the browser if the visitor wishes to do so. However there are some occasions where the aesthetics of your site require you to do so. Therefore this is the best method available (unless someone points out/comes up with a better one).

The method has been attributed to David Shea, Petr Stanicek and Tom Gilder so again, if anyone knows who to properly credit it to then let me know.

Basic use for image text:

The general idea for this is to use an empty span (the one drawback of this method) within your HTML code which is then styled using CSS. This is the basic method I have used for the logo on this very site.

The HTML:

<h1 id="logo"><span></span>Luke Harrison</h1>

The CSS:

h1#logo { position: relative; height:19px; width: 144px; margin: 0; padding: 0; color: #fff; display: block; }
h1#logo span { position: absolute; width: 100%; height: 100%; background:url(../images/global/logo/logo.png) no-repeat;}

The key things here are the text you want to be displayed must be inside the ‘containing ID’ but outside the ’span’.

The main ID (in this case logo) must have position relative and it’s width and height set to that of the image that you want to display.

You must then set the empty span to be positioned absolute with a width and height of 100% and then set the background to the image you want displayed.

Try it out on this page with my logo. Turn images/background images off and you will see the text is still displayed where the logo image would be. Turn the CSS off and you will see that the image isn’t displayed but the text still is which is ideal.

Hope this helps! I will soon post how to make this work for image rollovers to use in navigations