V. Accessible Content
5.3. Non Textual Content
5.3.1. Images
The Internet being a visual medium, it is natural to find a lot of images on websites. Images on a website can as well be, for different persons, as accessibility limitation (for blind people who cannot see them mostly) as an accessibility medium (for children, or people suffering from learning deficiency). These images can either be purely decorative or information holders. Depending of the type of image and the kind of difficulties encountered by the user, an image can be both accessible and inaccessible.
Each and every image present in the HTML file of a website should come with an alternative text, defined with the alt attribute bringing the same amount of information as the one held by the image.
Purely Decorative Images
Decorative images are part of the layout of the website; they contribute to make it more appealing, but do not bring any information. For blind people, they obviously do not create any accessibility problem; but for people who have attention deficit for example, they can drag his or her focus away from the content of the website, especially if they are animated.
As a good practice, decorative image should always have en empty alternative text: alt=″″; and the use of animated image should be reduced to the minimal necessity.
It can sometimes be difficult to identify which image is decorative or not: bellow is a screenshot from the DirectGov website:
Figure 5.4: Image Alternative Content on DirectGov.
Indeed, as pictured above, the website respects the WCAG recommendation to offer alternative content to picture via the alt attribute of an image (Chisholm, Vanderheiden, Jacobs, 1999). However, here the picture is purely decorative and does not bring anymore information; on the contrary, a screen-reader here will read: “Equality Bill promises ban on age discrimination, Equality Bill promises ban on age discrimination”; which can be disturbing.
Information Holder Images
Information holder images are all the images that are not decorative, because they carry text, are part of the navigation or simply give information (like maps or diagrams). They are generally used to support or complete the information given by the text, thus representing a help for people suffering of learning deficiency, but they can also make some information disappear to blind people. To prevent this, these image should always have an alternative text specified that will give to the blind user an equivalent information; this information can be the same text as pictured on the image, information on the navigation item, or a brief description explaining a diagram. But there are some principles that must be followed when attributing an alternative text to an image:
- “Be accurate and equivalent in presenting the same content and function as presented by the image.
- “Be succinct. This means the correct content (if there is content) and function (if there is a function) of the image should be presented as succinctly as is appropriate. Typically no more than a few words are necessary, though rarely a short sentence or two may be appropriate.
- “NOT be redundant or provide the exact same information as text within the context of the image.
- “NOT use the phrases "image of ..." or "graphic of ..." to describe the image. It usually apparent to the user that it is an image. And if the image is conveying content, it is typically not necessary that the user know that it is an image that is conveying the content, as opposed to text” (WebAIM, undated.c).