Accessible
Digital Design
Visuals and Alternatives
Writing Alt Text
Developing an Understanding
Well written alt text should be complete and concise. It should briefly describe the image or graphic in a meaningful way. The alt text should be related to the context of the image and what it is intended to convey in the layout. When describing an image, focus on what is visible and avoid making assumptions. It is recommended to describe colours, visible emotions such as smiling or crying, the image style (graph, illustration, etc.), the general surroundings and placement of the objects in the image.
Avoid being overly poetic and describing details in the background, out of-focus elements, or obvious details such as ‘a car with wheels’. Don’t assume gender, age, race, body type, or race unless it is in context. Although alt text does not have a prescribed length, it is recommended to keep it short, 125 characters or less.
These are some of the elements in an image that may require describing:
- Objects, buildings and people
- What’s happening in the image
- Purpose of the image
- Colours
- Location
- Emotions and atmosphere
Tips for writing alt text:
- Use simple and plain language
- Think about alt text as a tweet that describes an image. Don’t use more that 140 characters. Keep it between 5 and 15 words.
- Consider the context of the image. Why is this image being used and what information is being conveyed?
— From Phase 2 (2013) and modified from notes by Danielle Landry and Dr. Chelsea Jones
Deepening your Understanding
A picture may be worth a thousand words but we need to be more concise when creating text alternatives. Images and graphics can be supplemented not just with alt text but also image descriptions and captions to provide additional information when needed.
Alt Text Example: Red and orange lips painted on the side of a black building.
Alt Text:
A brief description focused on the most important details of the image. This text is not visible in the layout but can be read by a screenreader.
Image Description Example: Exterior view of the side of a building with the bottom segment painted in black. In the black area of the wall, a pair of red and orange, slightly parted lips are painted under a window with the the artist' signature, 'fnnch' in white.
Image Description:
A detailed explanation of an image describing all the components, typically starting from the top left corner to the bottom right. Useful for complex images or describing artwork. This text can be visible or hidden.
Image Caption Example: Bodega graffiti photograph by Vincent Gerbouin.
Image Captions:
A brief description of the image that does not focus on the visual aspects. This text is visible in the layout and is not a replacement for alt text.
Task
Below is a selection of images by the photographer Steve Kean opens in new window. Write alternative text for each image for an on-line article about diversity in city life. When you are finished, click to reveal the suggested alt text.
Please pause the screen reader and fill in the textarea. Next, you will hear the answer.
Bearded man singing into a microphone
Right answer: Bearded man singing into a microphone
Please pause the screen reader and fill in the textarea. Next, you will hear the answer.
Blooming cherry blossom trees
Right answer: Blooming cherry blossom trees
Image: Alt Text as Poetry Workbook cover.
