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

Code View:
<div style="width: 84px; height: 64px;
background-image: url('background-logo.gif')">
<div style="color: white;
font-family: Helvetica, sans-serif;
font-size: 10pt;
text-align: center;
padding-top: 4px;
padding-bottom: 3px;
letter-spacing: 0.08em">
PEARSON
</div>
<div style="color: white;
padding-left: 0.5em;
padding-top: 6px;
font-family: Times, serif;
font-size: 12pt;">
<div>
Addison
</div>
<div style="text-indent: 1.5em;
padding-bottom: 5px;">
Wesley
</div>
</div>
</div>
Figure 6.3. The Addison-Wesley logo drawn in pure HTML, plus background image
Unlike the original img tag, the background image is purely presentational. Although I've included the style rules
inline here for illustration, they should be moved into an external CSS stylesheet. The HTML document would
then have pure content, no decoration. Nonetheless, the result shown in Figure 6.3 is equally attractive. You'd
really have to compare the two side by side to notice any difference at all.
Fancier tricks, such as running the text along a curve or making the type jump around like ransom notes, may
not succeed. To be honest, though, I'm not sure I'd want that. Simpler is often better.
Machines cannot reliably read printed text, especially the heavily stylized text you find in images on many web
sites. Thus, there's no way to fully and reliably automate this process. However, you easily can search through
the site for the filename to find the pages where you'll need to replace an image with text. For example, on the
Addison-Wesley home page, I noticed the image is in the file aw-logo.gif. Therefore, I would search for aw-
logo.gif to find other HTML files where I need to make the same change.