jarmin.com Accessibility Guide - Techniques

Graphics

Possible scenarios
Using graphics
Using the ALT attribute
Long description
D-link
Image maps
Graphics as navigation
Avoid flickering
Learn more

Possible scenarios :

Imagine the following scenarios:

a site is accessed via a text-only browsers.
a site is viewed on a monochrome display.
a user is blind or visually impaired.
a user is colour blind.
graphics are turned off to facilitate faster loading.

It is best to avoid using images to convey information. For example, designers should ask themselves whether it is really necessary to use graphical buttons as navigation links, especially when the graphic is simply used to display text in a particular font.

If graphics are used, the information conveyed should be made accessible by other means, i.e. by including alternative descriptions.

Using the ALT attribute :

Images can be enhanced for visually impaired users by adding the ALT attribute with a description.

<img src="image.jpg" alt="Photo of the author at age 25.">

Sometimes it is sufficient to describe the function of a graphic rather than its visual appearance, for example where the image is a link.

<a href="contact.html"><img src="mailbox.gif" alt="Contact Details"></a>

All images should contain the ALT attribute. If an image is purely decorative, does not convey information or is used as an invisible spacer, leave the ALT attribute empty.

<img src="image.gif" alt="">

For more detail see this excellent article: Use of ALT texts in IMGs

Long description :

Where ALT text is insufficient and a longer descriptions of a graphic is needed, the LONGDESC attribute can be used to point to a document which provides more information or a detailed description.

<img src="diagram.gif" alt="Diagram of Circuit" longdesc="circuit.html">

D-link :

Because not all browsers support the LONGDESC feature, a so-called D-link (description link) can be added next to or below the image, which leads to another page with a detailed description. This is especially useful for server-side image maps.

<a href="image1.html" title="Description of Image Number 1">[D]</a>

Image maps :

Image maps are mostly larger images that include 'hotspots' (clickable areas), e.g. a map of Europe, where clicking on a country will take the user to the corresponding page. There are two types of image maps: client-side and server-side maps.

Client-side image maps should be used when designing accessible sites because information about the destination of these clickable areas (the URL, i.e. the address of a page) is send to the browser. In addition, the ALT attribute can be added to each hotspot. It is also recommended to include additional ('redundant') text links on the same page. This last point is especially important where server-side maps are used.

Server-side image maps are not accessible to screen reader users because the URLs of clickable areas are not send to the browser. When server-side maps are used it is especially important to provide additional text links on the same page.

Image maps are often used for navigation menus. This should be avoided.

Graphics as navigation :

Avoid using graphics as navigation links. If graphics are used, they should be labeled with the ALT attribute and additional text links should be included at the bottom of the page.