Type E:
From Beyond the Envelope™
|
The alternative text issue — 2.
|
Of all of the pieces of email content, alternative text is arguably one of the most neglected. But, it is arguably one of the most important.
A few years ago, I decided to turn images off in my email client of choice, Apple Mail. I did this for two reasons. One, to experience the emails I received without their images. Two, to experience their images’ alternative text, some of which were bad and some of which were good.
In this issue, I’ll look at some of the good experiences of alternative text I’ve had over that time and what we can learn from them. In the conclusion of ‘The alternative text issue – 1’, I wrote about ‘Dictation’, ‘Depiction’ and ‘Description’. Here are some of them in action.
|
What the Web Content Accessibility Guidelines have to say about images.
The Web Content Accessibility Guidelines (WCAG) consider images to be ‘non-text content’, and to conform to WCAG, you must meet the relevant Success Criterion for them. The relevant Success Criterion for ‘non-text content’ is Success Criterion 1.1.1 Non-text Content (Level A):
Success Criterion 1.1.1 Non-text Content
(Level A)
All non-text content that is presented to the user has a text alternative that serves the equivalent purpose.
|
Helpfully, the guidelines include pages of techniques to help you meet their Success Criterion. Here are two examples from ‘Using alt attributes on img elements’:
Example 1:
An image on a website provides a link to a free newsletter. The image contains the text “Free newsletter. Get free recipes, news, and more. Learn more.” The alt text matches the text in the image.
<img src=" news letter.gif " alt="Free newsletter. Get free recipes, news, and more. Learn more." />
Example 2:
An image on a website depicts the floor plan of a building. The image is an image map with each room an interactive map area. The alt text is “The building’s floor plan. Select a room for more information about the purpose or content of the room.” The instruction to “select a room” indicates that the image is interactive.
|
|
|
Dictation: BBC
‘Great Expectations’ (Line 430)
The hero image on this email from the BBC promotes their new adaptation of Charles Dickens’ classic novel, ‘Great Expectations’. Its title, handwritten in copperplate script, is impossible to render using live text. As such, it’s dictated in the alternative text.
|
Dictation: M&S Food
‘On Your Marks: Get set for the week ahead with our pick of M&S must-trys’ (Line 154)
The ‘ON YOUR MARKS’ typography on the masthead of this email from M&S is stylised and incorporates two hand-drawn arrows – one to the left and one to the right of the word ‘MARKS’. To ensure this stylised typography and its associated arrows resize proportionally on mobile and desktop, they’ve needed to embed it within an image. While it’s preferable to use live text to maximise accessibility, embedding typography is acceptable in such situations, as long as you use alternative text!
|
Dictation: Argos
‘Save up to £50 on selected Apple products.’ (Line 615)
On this email from Argos, they’ve not dictated the text within the image verbatim, but only the key messaging (in addition to replacing the word ‘devices’ with ‘products’). Dictating the text within the image verbatim would result in repetitiveness. Note there’s a full stop (period) at the end of the alternative text to pause the screen reader before it continues reading.
|
Depiction: British Airways
‘Man canoeing in Everglades National Park surrounded by mist’ (Line 263)
The hero image on this email from British Airways is beautiful, and conveying its beauty isn’t easy. However, its alternative text goes some way towards achieving it. It visualises a person enjoying an outdoor activity – ‘man canoeing’, informs you of their location – ‘Everglades National Park’ (important for an airline) and evokes an atmosphere – ‘surrounded by mist’.
|
Depiction: Transport for London
‘A middle aged couple are walking. With a bus just behind them out of focus.’ (Line 622)
The London bus is iconic, so it’s no surprise that it features on the hero image of Transport for London’s email. Its alternative text depicts the scene, focusing on the couple walking, as the image does. However, ‘just behind them out of focus’ is the iconic London bus, as if they’ve just stepped off it to enjoy a day in the capital!
|
Depiction: Science and Media Museum
‘Two children play with an experiment’ (Line 112)
A simple scene on this email from the Science and Media Museum depicted with equally simple alternative text.
|
Description: Microsoft
‘Image of Xbox Wireless Controller in Robot White and Carbon Black.’ (Line 172)
Microsoft have described their hero image with what it is – ‘Image of’, what it contains – ‘Xbox Wireless Controller’, and its colour – ‘Robot White and Carbon Black.’ Once again, note the full stop (period) at the end of the alternative text.
|
Description: Starbucks
‘Three Oleato™ beverages rest on a table surface’ (Line 323)
A simple description in the alternative text on the hero image on this email from Starbucks, incorporating their products (Three Oleato™ beverages) and their context – ‘rest on a table surface’.
|
Description: Antler
‘Clifton cabin with pocket in black’ (Line 705)
In the alternative text on the hero image on this email from Antler, there’s a description of the product, its unique feature – ‘pocket’, and its colour – ‘in black’.
|
Description: AO
‘An LG TV with a painted pattern onscreen.’ (Line 540)
A description of the image and a description of the image in the image in the alternative text on this email from AO.
|
Conclusion
Using ‘Dictation’, ‘Depiction’ and ‘Description’ in alternative text enables image content to be conveyed to the recipient, as you’ve seen. It can also create atmospheres ‘surrounded by mist’, promote products, ‘Oleato™’ and promote promotions, ‘Save £50’!
Let me conclude this issue of Type E: by giving you some additional alternative text tips:
- Consider how best to convey the content of your image – is it to dictate, depict or describe?
- When dictating, consider what’s helpful to the recipient. Is it to dictate it verbatim or dictate an excerpt?
- There’s a subtle difference between depicting and describing. Depicting helps convey the whole image (e.g. people and places) while describing helps to convey an element of it (i.e. a product).
- When uploading images into a Digital Asset Management system or image library, include the alternative text so that it’s consistent in every application of that image.
- Add a full stop (period) at the end of the alternative text to pause the screen reader before it continues reading.
|
Made with Envelope Developer™
Powered with
|
|
|