Creating Accessible Images
Images that Enhance Comprehension
Article Contents
- Page 1: Images Introduction
- Current page: Page 2: Images that Enhance Comprehension
- Page 3: Color and Contrast
- Page 4: Text Within Graphics
- Page 5: Graphics That Cause Seizures
- Page 6: Creating Effective Alternative (
alt) Text - Page 7: Long Descriptions
Introduction
Some people think that graphics are bad for accessibility. The truth is that graphics can be of great benefit to the accessibility of a web page by providing illustrations, icons, animations, or other visual cues that aid comprehension for sighted individuals. Too often we forget that when we design for people with disabilities, we are not designing only for the blind. We must consider disabilities of all types. Graphics can be especially useful to individuals with certain reading disabilities, learning disabilities, attention deficit disorders, or cognitive disabilities.
Illustrations
Many concepts are communicated more effectively with the addition of illustrations. Imagine trying to learn human anatomy from a book (or web site) with no illustrations. How effective would it be? Here is an example of an illustration of the muscles in the hand.
You will probably find it hard to imagine that a text description alone could be as understandable as text supplemented by illustrations. The illustrations make the content more accessible to you. Illustrations can also be of special benefit to those with learning disabilities or reading disorders. Developers of educational materials should especially consider the use of illustrations to enhance comprehension.
Animations
Animations that distract
Animations are rarely used to enhance the accessibility of web content. Most of the time they are simply annoying. Banner ads take advantage of the qualities of animations to purposely distract us from the main purpose of the document. Elementary schools are notorious for their use of cute animations that serve no real purpose, though perhaps one could argue that the animations capture the attention of the children. While this may be true, most of these animations are actually distracting the attention of the children from the real purpose of the page. For example, a commonly-used animation is the one of a mailbox that opens and closes, such as the one below:
The question that you have to ask yourself is whether or not the animation is central to the page's content. Is the purpose of the page to encourage people to send email? Perhaps, but probably not. This type of animation is most often found at the bottom of a page that has nothing to do with sending email to the person who wrote the page. The animation is a distraction, even when used on web sites for children. It would be best to eliminate this distraction.
Animations that enhance comprehension
Just because graphics are most often used to distract the viewer does not mean that they cannot serve a more useful purpose. Animations can illustrate movements and procedures in a way that would be difficult in text. Let's say, for instance that you want to learn a few Scottish dance steps. You could have someone describe the steps to you in text, and perhaps this would work, but for most people, it would be easier to see an animation of each of the steps, so that you could imitate the movements in the animation. In the case of individuals with reading disabilities or cognitive disabilities, the benefits of animations are even more pronounced.
Just for the sake of comparison, let's look at a text description of a Scottish dance step, then we'll look at an animation. First the text description:
Text description
Hold your right arm over your head, bending your elbow at approximately a 45 degree angle. Put your left hand on your hip. Hop on your right foot. As you hop, alternate putting your left foot in front of, and then in back of your right leg, but don't let your left foot touch the ground. Your left knee should be bent as you do this. Perform a total of 4 hops on the right foot, then reverse the position of your arms and start hopping on your right foot while your left leg performs the actions previously performed by the right leg. After four hops on your left leg, switch back to the right leg and switch your arms back to their original position. This time, as you hop, turn around in a circle during 4 hops until you are back where you started. Begin the procedure again.
How well do you think you were able to perform the dance step?
Animation
Now try looking at an animation of the same step - external link.
Did the animation enhance the text description? What if you only had the animation, but not the text description? What if you could not read the instructions at all? For those of you who do not speak Japanese, this is easy to simulate, because the site which hosts the animation of the Scottish dancer is a Japanese web site. Take a look at gallery 1 - external link of folk dance styles on this Japanese site. Do you think that you would be able to perform these dance steps by simply looking at the animations? Assuming that you have sufficient vision to see the animations, the answer is probably "yes." The animations actually enhance comprehension of the subject matter.
Of course, a text description will still be necessary for those who are blind, but we'll cover that topic a little later.
Icons
Many computer programs use icons that either supplement or replace the text
in the menu bars (think of Microsoft Word, for example, and the icons for opening
a file 
,
printing 
,
etc.). Here is a set of icons from the Internet Explorer toolbar:
Here is a set of similar icons from the Opera web browser:
The usefulness of an icon depends upon:
- how well it is drawn,
- how well it conveys the concept,
- how well the target audience will understand the concept, and
- how well the icon focuses in on the idea that it is trying to convey.
Icons need to be simple, and they need to be easily understood. Their artistic merit is really a secondary consideration, but unattractive icons can have a negative effect on their comprehension, so choose your artist well!
One of the problems with icons is that they are rarely understood in the same way by all viewers. Most people associate an arrow that points left (such as the one below) with the concept of going back, or going backwards, but in languages where the text proceeds from right to left, the opposite may be true.
As it turns out there really aren't any icons that are completely understood across all cultures and languages. Even within cultures and languages, icons can be misinterpreted quite easily. Let's say that someone decides to add an icon to a page to indicate that the items in a particular paragraph are only speculations, and should not be regarded as generally-accepted truths. To indicate this, a question mark, like the one below, is placed before each of these types of paragraphs.
Would you immediately know what the question mark means? Probably not. If the meaning of the question mark was explained before using it, however, the icon could be useful. You can use icons, and they can in fact increase comprehension, but only when used wisely.
For the general population, icons can be useful, but they are not always absolutely necessary. Some individuals with certain types of cognitive disabilities, however, must see icons in order to comprehend the subject matter at all. Some sites are developed specifically with this population in mind. Even with the illustrations and icons, these individuals will oftentimes also require the assistance of another person at first, but they can learn the iconic interface with some practice.
Video and Multimedia
Although we will not get into the details of video and multimedia right now, it should be mentioned that these elements can also be used to enhance comprehension, in the same way that illustrations, animations, and icons can be used. Where video is concerned, as long as you provide a text transcript (for the blind) and captions (for the deaf), you should think of these elements as comprehension enhancements, rather than accessibility problems. In terms of other types of multimedia, such as Flash, the accessibility issues are a bit more complex, but it is usually possible to present the content in a way that is accessible to people with disabilities.
Advertisements
WebAIM is an initiative of:
