WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: images as page headings

for

From: Jukka K. Korpela
Date: Oct 24, 2003 4:56AM

On Fri, 24 Oct 2003, Anthony Webster wrote:

> I have headings on a page that are actually images (because my client's
> marketing dept wants the headings in their particular corporate font).

The WAI guidelines tell us to "avoid using images to represent text
-- use text and style sheets instead" (under checkpoint 3.1).
But there's a change to this in the "Errata" at
http://www.w3.org/WAI/GL/WAI-WEBCONTENT-ERRATA
which restricts the rule to raster-based images (but other considerations
of course make this restriction rather irrelevant at present) and also
says:
"You may use text in images when:
- the text does not convey its literal meaning but has a more graphical
function, such as a logo and
- the effect can not be achieved with CSS and
- you have provided a text equivalent for the image."

If the client keeps wanting the headings in their corporate font, and if
Web fonts are not a feasible solution to this, it's probably not that
serious to accessibility, when adequate precautions are taken.
Hopefully the text in the images is readable to all, including people with
low vision or with color-blindness.

From searching the list archives I have seen someone suggest:
>
> <h1><img src="welcome.gif" width="200" height="30" alt="Welcome"
> border="0"></h1>

(The border attribute is pointless here, since the image is not a link.)

Wait a minute... "Welcome"? Is it really a _heading_? Is it good food for
indexing robots, and does it make sense in a browser-generated list of all
headings?

I'm not sure whether "Welcome" is a good idea in the first place on a Web
page - it sounds somewhat amateurish and not as polite as it may sound.
Getting to the point might be more polite.

But assuming there is a _greeting_, I would not regard it as a _heading_.
Rather, I would use just <div> markup around the <img>. You might still
use CSS to try and make it look different from normal text, maybe in
bigger font, imitating the presentation in the image. This would help
people who see it on an advanced graphic browser with display of images
disabled. It's marginally an accessibility issue too, since it may help
to distinguish different types of messages by their visual appearance,
especially if you have cognitive problems.

If an image is really used as a heading for a page, say "New products from
Acme", then <h1> is the adequate markup. It helps search engines, it helps
people viewing the page on a graphic browser without images (since it
greatly helps them to recognize the text as a heading), and it helps
people using speech browsers which recognize h1 markup and present the
text e.g. in a slower and lower voice and with a clear pause after it
(or whatever they do in order to convey the idea of a heading).

--
Jukka "Yucca" Korpela, http://www.cs.tut.fi/~jkorpela/


----
To subscribe, unsubscribe, suspend, or view list archives,
visit http://www.webaim.org/discussion/