Accessible Web Page Design:
Making Photographs and Other Images Accessible.

Critical Pictures.

Some graphics that you want to include in a document may be critical to the information content. Others may be extraneous -- just for decoration purposes. One way to tell the difference is to remove (or comment-out) the image from your document. If your text makes no sense without the image, then the image was critical to your content. If the image is critical, you can prepare some descriptive text, either to accompany the picture as a detailed caption, or to be placed in a separate file with a link to it from the picture.

Text in Graphical Images.

If you include text in a graphic image, remember to duplicate that text in the "ALT=text" element of the <IMG> tag. Remember that many of your visitors may not have graphical browsers, may use low-resolution displays and video drivers, or may be unable to see the screen because of a visual impairment.

ALT="Text": Good news / bad news.

The good news is that the ALT="Text" tag of the IMG statement is a great way to label graphics, photographs, bullets and icons. The person browsing your site with graphics enabled does not see a lot of extraneous text, and the person who has turned off the display of graphics (or who is using a non-graphical browser or a screen-reader) will still get some indication of what you think is important on your page.

The bad news is that each browser handles long strings of ALT text differently. For instance:

Netscape (Version 1.1N) does not wrap an ALT text string at the edge of the screen. This means that if you have a long text string, it will scroll off the page in a single, very long line. While you can use the horizontal scroll bar at the bottom of the window to read this line, Netscape has a limitation: the amount of text you can display is dependant on the font type and size. In my testing, using 12 point Arial for the display of proportional fonts, I could read 262 characters, while with 8 point Arial I could see 390 characters before Netscape refused to scroll any further.

NCSA Mosaic (version 2.0 beta 4) does not automatically wrap ALT text either, but there appears to be no limit to how much text is displayed horizontally (I quit trying at 650 characters) -- Mosaic lets you keep scrolling horizontally, as long as there is text to display. Mosaic does interpret carriage returns within the ALT="text" tag as carriage returns on the screen. So, with some experimentation, you can put a good deal of text in the ALT tag and have all of it displayed. HOWEVER, while there seem to be no end to how much text you can display horizontally, there is a limit to how much you can display vertically! You can see no more lines of text than will fit in the box that Mosaic draws to indicate the size of the graphic it is not displaying.

The ALT-text example which follows will either make sense, or not, depending on what sort of browser you use. My point for including this example is to show that the ALT text tag should not be used for long captions or alternative descriptions of images. The best way to give full text descriptions may still be to link to a separate page. The "D" link beside the image is the method championed by the National Center for Accessible Media. The "D" is for "Description" and takes you to the descriptive text for the image.

Cartoon: The level playing field.
This drawing depicts a race where
a woman using a wheelchair is
crossing the finish line at the same
time as an able-bodied male
competitor. Both are happy to be
competing in the same race, and
both have achieved their goal
using different skills and abilities.
The accomplishment of one is no
less a marvel than that of the other. D

A Question of Size.

Here is an example where "accessible" design is good for all users:

The lucky few who access the Web at ISDN or T1 or speeds might not care, but the rest of us struggling along at 14.4 KBPS or 28.8 KBPS get really nervous (even annoyed) when we connect to a home page which is full of 50KB in-line images. More and more I find myself hitting the stop button while loading such pages. I then set the no-load-image option on my browser and try again. Unfortunately, one of the best features of the Web is its ability to display multimedia, so I really hate turning it off.

If the picture is not critical, why not place a thumbnail (a very small, reduced version) of the large picture with a link to the complete image. It is even more useful if you indicate the size in bytes of the full image.

For example:

A cartoon: To see the full-size image: Hands across Canada. (83 KB, .GIF Format)