Introduction
A picture is worth more than a thousand words, as the old adage goes. Images help bring texts to life, they complement complex explanations and often lead to greater understanding and better web experiences. For many people they help make things easier to understand. However, not everyone can see images and therefore a text alternative is needed so that everyone has access to the information conveyed in the image.
Text Alternatives
The text alternative for an image depends upon its purpose. Is the image purely decorative? Does it help to describe or explain the text? Or does it serve a functional role like an icon pointing to the homepage?
In HTML the text alternative is added to the image element which takes an alt attribute. The alt attribute should be present on every img element. If the image is an svg it must be given the role of image and a title to make it accessible.
The alternative text can be read out by screen readers or converted into braille for refreshable braille displays. Without it, screen reader users may hear the whole image url instead, which can often be a string of incomprehensible letters and numbers.
<img src="url" alt="The text alternative goes here" /><svg role="img" height="210" width="400">
<title>The text alternative goes here</title>
<path d="M120 10 L55 200 L265 180 Z" />
</svg>Decorative Images
Decorative images usually add no extra information to a page and a person’s understanding is not hindered if the images are not visible. Background patterns and shapes are often decorative. Icons are also sometimes decorative if they are combined with a link and the link text describes the icon. Decorative images should have an empty (sometimes also called null) alt attribute.
<img src="/oldPaperTexture.jpg" alt="" />
<img src="/hexagonsPattern.jpg" alt="" />Informative Images
Informative images compliment written information by illustrating concepts and examples visually. An image of a cake alongside a recipe, a diagram visualising an instruction and a telephone icon preceding a phone number are all examples of informative images. These should have a short and succinct text alternative.
<img src="/cupcakes.jpg" alt="Cupcakes with pink icing and small sugar heart decorations" />Complex Informative Images
Some informative images such as graphs can convey a lot of complex information. In such cases the text alternative needs to convey the same information which can be difficult to do in a short and succinct alt attribute. In this case the text alternative is split into two parts. The alt attribute should summarise the image and also explain where a longer form text explanation can be found. The longer text can be found on the same page or as a link to a separate page.
The longer text should convey the same complex information as the image. In the case of graphs the data should be explained along with any trends or relationships. Avoid using colour as the only way of explaining the information as not everyone perceives colour in the same way.
<img src="drill-instructions.png" alt="How to use a handheld drill. Further instructions below." />Functional Images
If images are used as part of a link or button they are usually there to perform a function. Examples include using a magnifying glass to signify a search field, a floppy disk icon as a save button or a logo as a link back to the home page. The text alternative should match the action performed by the link or button.
<img src="searchBtn.png" alt="Search" />
<img src="playBtn.png" alt="Play" />How to write good alt text
Writing good text alternatives is not always easy and there are many differing opinions about how to do it well. The text alternative should get across all the important information. A good rule of thumb is to imagine you are describing an image to someone over the phone. Which details would you tell them about? Which details would you leave out? The more complex the image, the more detailed your alternative text needs to be.
Let's take a look at the following image:
The focus of this image would depend on the context of where it's used. Is the focus the car or the house? Let's look at a couple of alternatives.
Alternative 1: The house is for sale
The main focus should be on describing the house. The car is probably not important as that won't be included in the house sale. Let's try it.
Basic: House with pitched roof and brown front door.
More detailed: Pale green, one storey house with pitched roof, large windows and steps up to a brown front door. Surrounded by a white picket fence.
Too detailed? Pale green, one storey house of wooden construction. White painted trim surrounds large windows with 3 panels on either side of a stained wood front door. The house is surrounded by a small garden and white picket fence with steps leading from the road to the porch. There is both on-road parking out the front and a driveway to the left of the house. The garden is well-established with palms, various trees, bushes and vines.
Alternative 2: A car magazine
This time the car is the main focus and the house needs less description. However, the house adds to the aesthetic and emotion of the image.
Basic: Vintage car parked on a street.
More detailed: Soft, pale green vintage VW Beetle parked in front of a house painted in the same pale green.
Too detailed? Soft, pale green vintage VW Beetle in excellent condition with shiny silver trim and new tyres. The car is parked on a quiet street in front of a one storey house painted in the same color in a sleepy suburb.
Images of Text
Wherever possible, images of text should be avoided as the text can’t be enlarged in the same way as text in HTML. However, if you must have an image of text then the alt text should match the text in the image.
<img src="make-the-day-great.jpg" alt="Make the day great sign" />Images and Colour
Colour should not be the only way to represent meaning in an image because not everyone perceives colour in the same way. If colour is used in graphs, charts and diagrams then there should also be another way to tell the colours apart, such as different patterns or symbols.
Image Maps
An image map is a larger image with clickable hotspots, each of which open a different section. An example could be a floor plan of a local building which opens up an enlarged map of each room when clicked. The hotspots are made with the area element and each area element should have its own alt attribute. The overall image should also have an alt attribute.
Let's take a look at the image below. The image itself has an alt attribute which describes the whole image. Each area is clickable and leads to a Wikipedia article. Each area also has an alt attribute describing just that section of the image.
<map name="primary">
<area
shape="circle"
coords="190,130,70"
href="url"
alt="Doughnut"
/>
<area
shape="circle"
coords="380,250,100"
href="url"
alt="Coffee"
/>
</map>
<img
usemap="#primary"
src="donut-coffee.png"
alt="Illustration of a pink doughnut with sprinkles next to a cup of black coffee"
/>