1) IN-LINE (GIF etc.) GRAPHIC ELEMENTS,
PICTURES, AND DIAGRAMS

The problem:

1. People who are blind cannot view information that is presented (only) in graphic form.
2. People (anyone) who are accessing information over a slow network connection (e.g., modem) have only very slow access to pages with graphics if the auto-load images feature is turned on OR no access to the graphic information if the auto-load images feature is turned off.
3. If Web documents (or their derivatives) are to be made available via phone or other auditory channel then some alternate method for presenting information that is presented in graphics would be needed.
4. People who are accessing information with a text-based browser such as Lynx have no access to graphic information.
   

Solution Strategies

• All graphic elements would have an attached text description which can be viewed instead of the graphic.
• All viewers (Mosaic, NetScape, etc.) will provide the option of showing the graphic, the text, or both.

Today there is such a feature for in-line graphics. It is an option within the IMG definition and allows authors to attach an alternate text description to any in-line graphic. It is commonly referred to as ALT-TEXT.

The form for this is:

<A HREF = "http://www.your.host/filepath/filename"> <IMG SRC="http://www.your.host/filepath/filename.gif" ALT="Alternate text describing the picture."></A>

The latest versions of Mosaic and Netscape support this strategy as do the text-based browsers like Lynx and DOSLynx (whose developers at the University of Kansas introduced this convention). In the future it is probable that most or all graphic browsers will also support this feature.

This approach does not actually allow text descriptions to be included (and called up separately from) the picture data file, and it does not address the problem for graphics which are NOT embedded in the text (which is covered in the next section). It does however provide a mechanism for attaching text descriptions to in -line graphics (pictures that are disaplayed as part of the HTML page.

The ALT-TEXT approach is very effective in most layouts - and is recommended for all in-line graphics. However, on some pages with unusual layouts, it may result in pages which are confusing. In this case it is recommended that you ALSO create a separate "text-only" version of the page which eliminates the use of graphics. In general, however, this makes it a bit more complicated to maintain your pages since edits must always be done to two pages when edits are needed. (If your pages are generated from a database"on the fly" this problem would not exist - but your page generation software would need to include this capability)

Today, therefore, you can/should use one of these four approaches. A combination of the first 3 approaches is probably the most effective:

Approach 1-1: ALT-TEXT:
Provide ALT-TEXT which would be displayed instead of the image when the image is not displayed (e.g. when viewing the page with a text-only browser, or with the "auto load images" feature turned off. (See above for format) [See also Picture Description Below]

Approach 1-2: Description page
By their nature, ALT-TEXT descriptions are usually short and define the basic purpose of graphic elements. For example "Logo for XYZ company" or "Picture of ZZZ Center Building". These are instructive but do not provide very much information about the pictures.

In order to provide people who are blind with additional information WGBH has pioneered the practice of placing a capital "D" text anchor next to pictures or graphics which links to a longer description of the graphic. For example, "The Logo for XYZ company consists of a globe with people of different races all standing out from the globe holding hands while a sunburst shines from behind the earth. The earth is positioned so that no particular continent is centered on the globe" Descriptions which are too long for ALT-TEXT descriptions can thus be provided... yet do not clutter up the main page.

Since the "D-tag" is not a very descriptive link, if you use this method you should probably include a statement somewhere that describes what access features you have included so that people know that a capital "D" will take them to a description of an image. Another option is to use a more descriptive text anchor, such as "or a description of xxxx".

Approach 1-3: Alternate pages:
Provide a second version of the page which does not include any in-line pictures for decoration or for anchors. Instead, text descriptions and anchors would be used. If this is done a note at the bottom of each page could allow users to move back and forth between the graphic and text-only versions of the page. It is still recommended that you provide the ALT-TEXT tags described in approach 1-1 on your 'graphic version' of the page. It is easy to see that creating text-only versions of every page on a site doubles the number of pages that need to be maintained. Here are three methods for generating and maintaining text-only pages.

Method 1-3.1: "By hand" Sometimes, a site may only need to create text-only pages for layouts that can not be made accessible. This may only involve a couple of pages.

Method 1-3.2: Database-based pages:
Create a database-based server that generates HTML pages on demand when the user asks for them. In this manner, pages can be constructed "on the fly" either with or without graphics. An example of this is the CommerceNet server.

Method 1-3.3: Filter
This approach is similar to Method 1-3.2, but involves the use of a filter/translator that would exist on the server as a common gateway interface (cgi). Pages would be constructed using ALT-TEXT and alternate text pages where needed and, at the direction of the user, translated into either graphic or pure text pages on the fly. This method has disadvantages however. Since all pages must be processed on the fly (as with the databased method), there may be a performance hit unless the filter program is used off-line to create the text versions of the pages in advance. Secondly, this method would only work for pages on the server with the AltPage cgi. Whenever references were made to other pages on other servers, the filter would not work. Image Maps on other servers would be a particular problem unless client side image maps were used. Finally, such a filter would create text versions of pages, but since it would do it by formula, the pages may not be laid out very well or be very easy to interpret. Building access into the page or providing alternate pages which are laid out to make sense in text form (and to provide a text alternative to any Image Maps) as with Method 1-3.1 would be much more effective.

Approach 1-4: Embedded text descriptions:
Incorporate both the graphic AND TEXT within the anchor. The ALT-TEXT text should also be included for those browsers that support it. The format would be:

Recommended format today:

Running text on the page <A HREF="http://www.your.host/path/filename.html"> <IMG SRC="http://www.your.host.path/filename.gif" ALT="Text describing picture.">running text that could serve as an anchor instead of or in addition to the in-line picture</A>rest of running text....

An example:

The newest product in our line is the <A HREF="http://www.xyz.com/products/magicom.html" <IMG SRC="http://www.xyz.com/products/images/magicom.gif" ALT="[Picture of Magicom Phones]">Magicom portable phone</A>, the world's smallest portable pocket phone.

which yields:

The newest product in our line is the [Picture of Magicom Phones] Magicom portable phone, the world's smallest portable pocket phone.

OR

The newest product in our line is the <A HREF="http://www.xyz.com/products/magicom.html"> Magicom portable phone <IMG SRC="http://www.xyz.com/products/images/magicom.gif" ALT="[Picture of Magicom Phones]"></A>, the world's smallest portable pocket phone.

which yields:

The newest product in our line is the Magicom portable phone, [Picture of Magicom Phones] the world's smallest portable pocket phone.

Please send comments and suggestions to: web-team@trace.wisc.edu