Why not use images instead?
To get round the limitations outlined in the previous section, it is common to see web pages with headings created as images rather than text.
There are many occasions when using text as an image is appropriate; not all fonts can be reproduced using HTML, and trying to reproduce a text based corporate logo using HTML is rarely a good idea. However, some sites use images of text when it is patently not appropriate, e.g., I have come across sites where every page, including all of the text, is one big image.
Using an image gives the designer complete control of the design of the text, but it also creates some problems of its own. Web pages created using this technique will be accessible to fewer people:
- Images can't be enlarged easily via the browser preferences; the size of images remains the same no matter how large the surrounding text becomes.
- Colour or contrast can't be changed to increase readability. This could be an accessibility problem for a person who has colour-blindness.
- If no 'alt' attribute is added to the text the image will be lost when images are turned off in the client browser.
- Using images instead of real text decreases the amount of information related to page structure; a heading will be marked up as a heading with the <hn> tag, an image of a heading will not (see below for a workaround for this problem). Marking headings up appropriately is particularly useful for people using screen readers; many screen readers can summarize a page by first extracting all of the headings.
Using images rather than text has other disadvantages:
- Maintenance issues: the presentation of text across an entire site can't be changed easily or quickly. Using style sheets to alter the presentation of text provides a more efficient method of site management.
- Alt attributes will need to be added to each graphic.
- Using images increases the size of each page; download times will be longer.
- Text in images is not available to be indexed by search engines.
Adding structural meaning to image based headings
It is possible to add structural meaning to image based headings; the following technique was suggested to me by Patrick H. Lauke as a comment on an article about how to make non-text elements accessible.
When using a graphic as a heading, enclose the image tag in the appropriate structural markup, e.g.,
<h1><img src="http://www.mcu.org.uk/images/logo2.gif" height="48" width="171" alt="The Making Connections Unit"></h1>
For users of screen readers such as Jaws, the text in the alt attribute will be recognised as a heading, and thus voiced appropriately.
The Fahrner Image Replacement technique has been developed to give designers the freedom to use image based text, while retaining valid structured markup for non-CSS aware browsers. The assumption is that screen reader users will get text, while those using modern browser will get appropriately styled images.
In practice the technique has proven to be problematic, e.g. the screen reader Jaws reads the screen after the CSS has been applied; Jaws users end up getting no text at all. Several developers have tried to modify the technique to overcome the problems; these techniques and related issues are discussed at length on the Accessify Forums.
Are Scalable Vector Graphics the future?
Some of the accessibility problems may be solved in the future with the introduction of scalable vector graphics (SVG), but for now using images of text rather than text itself is not always your best option. (See http://www.w3.org/Graphics/SVG/.)
Index | Next: Is it a good idea to use embedded fonts?