Accessibility - Refactoring HTML: Improving the Design of Existing Web Applications - page 201

document and in headings. Thus, it's particularly important to make sure that headings are real text, not images
or word art.
Replacing images with text also improves web-site performance, especially over slow or overloaded
connections. It will save you bandwidth costs and save your readers time.
Potential Trade-offs
The text will likely not look exactly like it was mocked up in Photoshop, even after you've styled it with CSS.
Furthermore, its appearance is likely to change slightly from one person to the next depending on their
operating system, fonts installed, default fonts chosen, and browser. Readers almost never care about this, but
sometimes designers do.
This may also bother the company lawyers in the very specific case of trademarked logos. If the lawyers cannot
be reasoned with, keep the logos as img elements (with appropriate alt attributes), but change all other text
images to real text.
Mechanics
Begin by looking at your pages to see where text is hidden inside images. Start at the home page and work
your way through the site. If you're uncertain whether something is or isn't text, try to select the individual
letters. If you can, it's text. If you can't, it's an image. Alternatively, right-click on the suspect text and see
whether you have an option to View Image, Save Picture As, or some such thing. If you can do this, it's a
picture, not text.
Once you've ascertained that you're dealing with an image rather than text, you need to replace the image with
text, while retaining as much of the formatting as possible. Fortunately, CSS gives you a lot of power. CSS can
easily change the colors of the foreground and background of the text. Indeed, with a CSS background image
you may be able to use the same background picture the text has. You'll also be able to adjust font styles and
weights: Make the text bold or italic, and so forth. CSS can specify the same font that was used in the image,
though not all browsers may have that font installed, and many readers may have to substitute a slightly
different font.
For example, on the Addison-Wesley home page, I found the logo shown in Figure 6.1 .
Figure 6.1. The Addison-Wesley logo
We can actually reproduce this fairly well using HTML+CSS, as shown in Listing 6.1 .
Listing 6.1. Addison-Wesley Logo in HTML and CSS