Illustrating text

For the purposes of this discussion the words "illustrations" and "illustrate" refer to providing supplementary material to text. It might take the form of a static image, an audio clip, a movie, an animation, or some other type of resource that is not text.

Why illustrate text

@@benefits section type of thing

When to illustrate text

The following are common examples found on theWeb.

Concrete ideas - people, places, things


staff, participants, students


products and services


how an engine works


DOJ organizational chart


graphs, charts, maps

Site and page navigation

navigation bars and buttons

Story headlines

cnn, today's top headline, "Watkins: Lay was duped"

yahoo news - top headline also the Watkins testimony, "Enron Exec Says Ken Lay Was Duped" inclues links to photos, slideshows, audio/video, related stories.



General clues about content

When not to provide illustrations


If you already have one images for your email address, you only need one. i.e. Don't overuse illustrations.


The Wall St. Journal doesn't illustrate many of its stories, instead it provides layers of headlines and text. However, USA Today uses lots of images and CNN is somewhere in the middle. @@links

Publishing existing works

If the original author didn't illustrate the work you are publishing to the Web, then you don't have to either. Project Gutenberg. However, if you wish to make the work readable to a wider audience and you have permission to include illustrations, you are encouraged to do so.

@@Annotation services? or what about summary services? ala cliff notes? therefore, if you would like to and it's public domain, feel free??

Testing and evaluation

Look at your page using The Greeker. Could someone have any sense of what the page is about if they can not read the text? If not, you might want to add some images.

How to provide illustrations

@@Joanne D. Sullivan, a graphic designer, gave me a whole lot of information that I have not yet incorporated. Note that these groupings correspond to other checkpoints...this is getting a bit techniquey.

Positioning and layout

Size of the file

Size of rendered visual presentations

The larger the illustration appears on the page, the more attention it will get. e.g. in my opinion, the navigation buttons on this page are too big. They distract from the rest of the content. (the fairies page for beginning readers).

Use of color

Color contrast

Color changes



Associating text alternatives


Internationalization issues

Cultural issues. If providing content in other languages, also make the effort to localize the illustrations. Use non-localized illustrations wherever possible. For example, instead of using a box on a pole (an American mailbox) to identify an email address, use an envelope with a stamp on it. Mailboxes around the world vary in size, shape, and color. However, envelopes and stamps are fairly universal.

@@find resource where I got this from?

Symbols and icons


Creating static images

Creating audio

Creating animations

Combining audio and video presentations

Embedded Applications


Client-side scripting



Hypothetical use of html:object

Note: object support across browsers seems to be minimal...

If we used OBJECT to include all images, then people could select to view images only, text only, or both - kind of like how people can configure toolbars in applications. In that case, we would not get duplicate text. For example:

<p><img src="dogs.jpg" alt="reba and iko"/>Reba, Iko and I went for a walk yesterday...</p>

is read by a screen reader as:

"image: reba and iko. Reba, Iko, and I went for a walk yesterday..."

If we used:

<object data="dogs.jpg"><p>Reba, Iko, and I went for a walk yesterday...</p></object>

Then it should be read, "image: Reba, Iko, and I went for a walk yesterday..."

For someone who only want to see images, all they would see is a photo of my dogs, Reba and Iko.

Try it:

Reba, Iko, and I...

Anne has said, "people who don't want to see images can choose not to load images. therefore, people who choose not to read text should be able to choose not to read text." It should be very easy for a user agent to only load images (and I'm assuming all other sorts of multimedia).

If authors have not provided images links for text, then a program like Mayer-Johnson's InterComm software (that translates email into pictures) could translate the text links into pictures. This is the basic idea that Kynn Barlett proposed on April Fool's Day 2000, e.g. a web browser for people with cognitive, learning, and other sorts of reading difficulties.

The problem is that currently user agents only show one or the other and some people will want or need both.


$Date: 2002/03/29 23:25:33 $ Wendy Chisholm