Get hands-on practice in all the key areas of UX and prepare for the BCS Foundation Certificate.
Virtually every web designer I speak with is familiar with the ‘alt’ attribute: the part of the html ‘img’ tag that you use to provide an equivalent alternative for people who are unable to see the image. This includes people who are using a screen reader or people who are browsing the web with images turned off. What’s less commonly known is that there are five different classes of image used on web pages and each of those images requires a different approach to writing the ‘alt’ attribute.
The five different classes are:
The ‘alt’ text you write will be different for each of these classes of image.
Most web pages are full of eye candy, like horizontal rules, glyphs and spacer images. The purpose of these kinds of image is to make a web page look more attractive but if you describe these images in the ‘alt’ attribute it just creates auditory clutter for people who are using a screen reader. People using a screen reader don’t need to hear, ‘spacer image’, ‘glyph image’ or ‘small green bullet’ when they are browsing a web page since this contains no useful information.
In this screenshot from the New York Times, I’ve used a feature in the Firefox Web Developer toolbar to overlay the ‘alt’ text for each image. This shows that the designers have chosen to write an ‘alt’ attribute for the video camera, still camera and comment glyphs. These images are eye candy and do not need any alternative text. A blank ‘alt’ attribute would be the correct choice here.
For these types of image, you should use an empty ‘alt’ attribute, that is,
alt="". The reason to use an empty ‘alt’ attribute is that this is a signal to the screen reader to skip over the
image. When a screen reader comes across an image with an empty ‘alt’ attribute, it ignores the image: it’s as if the image was never there in the first place.
Why not omit the ‘alt’ attribute entirely? You can’t do this because the ‘alt’ attribute is a required part of the ‘img’ tag. If you omit the ‘alt’ attribute, your page won’t be valid HTML. This is like writing a sentence and leaving out the full-stop at the end: it’s ungrammatical. As a consequence, screen readers assume that images with a missing ‘alt’ attribute were created by the clueless and so make a valiant attempt at describing the image. The usual approach that screen readers take is to read out the name of the image (such as ‘logo.gif’) in the forlorn hope that the developer at least used some meaningful text in the filename.
Clip-art and stock images are often used to illustrate an article or news story: you might find a thumbnail version of the image used on the home page and a larger version of the image used in the article itself.
For the vast majority of these images, a blank ‘alt’ attribute is sufficient. This is because these images are nearly always next to text that is equivalent to the image. The image below shows a good example from the Apple Store. You’ll see that the designers have correctly used an empty ‘alt’ attribute for the images, since to add ‘alt’ text would simply clutter the page when listened to by a screen reader.
This screenshot from the Apple Store shows a series of stock images of Apple products, like the iPad, the iPhone and the iPod shuffle. Again, I’ve overlaid the ‘alt’ text and this shows that the designers have correctly used a blank ‘alt’ attribute for these images. This is correct, because each image is next to a text description that is equivalent (such as ‘iPad from £439’).
Compare this approach with that used on the social media news blog, Mashable. Here you can see that the ‘alt’ text is a duplicate of the text that’s next to the image. If you’re a screen reader user, this creates auditory clutter: you will have to listen to the same text twice. The correct approach here would be to use a blank ‘alt’ attribute.
This screenshot from Mashable shows a series of thumbnail images that have been used to illustrate a list of top stories. Again, the ‘alt’ text has been placed next to each image. This shows that the designers have simply repeated the adjacent text in the ‘alt’ text: for example, there is an article titled ‘10 Creative Uses of the New Facebook Profile [PICS]’ and the ‘alt’ text simply repeats the text. All of these ‘alt’ attributes should be blank.
Many news sites fall into this trap. The following example comes from the BBC’s site. The images in this screenshot add little, if anything, to the text that’s next to them and so including 'alt' text simply clutters the audio stream. This example also shows another common blooper when writing ‘alt’ text: sometimes designers feel the obligation to convey more information in the ‘alt’ text than exists in the image alone. For example, the ‘alt’ text on one of the images reads ‘Edinburgh’, but few (if any) sighted users would realise that this is a picture of Edinburgh. ‘alt’ text should never say more than the picture.
This screenshot from the BBC’s web site shows a series of thumbnail images that link to video and audio recordings. The ‘alt’ text has been overlaid next to each image. Most of the ‘alt’ text simply repeats what is already said in the adjacent text, and is redundant. One picture has been used to illustrate a story titled ‘Gales cause damage across Scotland’ . The image shows a fallen wall but the ‘alt’ text reads ‘Edinburgh’ which conveys more information than either the image or the adjacent text. All of these ‘alt’ attributes should be blank.
These kinds of images are usually photographs of people, events or situations. These images communicate a concept and the job of the web designer is to try to express that concept concisely. However, you need to exercise judgement. When I speak with screen reader users, they tell me that they’re not really interested in a web page’s mood music. They just want to get to the content. So you need to be really sure that this image is conveying something important and it’s not just a stock image.
One way you can make that judgement is to ask yourself: if I couldn’t use the image here, what would I write instead? If the answer is, ‘nothing’, then it falls into the same class as stock images, and you should use a blank ‘alt’ attribute.
If the answer is something else, then you need to find the right form of words. For example, consider this photograph of James Blake Miller, the ‘Marlboro Marine’. Using alternative text that read ‘Soldier in Iraq’ would fail to convey the power of this image.
This powerful photograph by Luis Sinco is difficult to summarise within the brevity constraints of ‘alt’ text. In circumstances like these, it’s probably best to use concise ‘alt’ text (such as ‘The Marlboro Marine’) to flag up to the screen reader user that this is an important image, and then include a caption next to the image. When this image appears on news sites, the caption usually reads: ‘A close-cropped shot of a US Marine in Iraq, his face smeared with blood and dirt, a cigarette dangling from his lips, smoke curling across weary eyes.’ © Luis Sinco, http://www.flickr.com/photos/mediastorm/2037179165/
Although there is no fixed rule on the maximum length of the ‘alt’ attribute, some screen readers split the ‘alt’ text into 125 character chunks and so that serves as a useful guideline. Since 125 characters will almost certainly be too brief to be equivalent, you should consider adding a caption to this kind of image.
If the image has a function or communicates information, then the ‘alt’ text should explain the function of the image. Here are three examples.
The first example shows icons — a weather widget — used to communicate status information. The screenshot (from sky.com) shows how the ‘alt’ text has been used appropriately to explain the icon.
This screenshot shows the weather forecast for Greater London (from sky.com). The forecast includes images that summarise the day’s weather: for example, Monday’s forecast has an image of a cloud and Tuesday’s forecast has an image of a cloud with the Sun peeking out. The ‘alt’ text has been overlaid on the screenshot and it shows the appropriate use of ‘alt’ text: ‘Cloud’ for Monday and ‘Sunny intervals’ for Tuesday.
A second example is when you use an image of a button (such as ‘Next’, ‘Previous’ or ‘Search’). In these instances, the ‘alt’ text should say exactly what’s said on the button. It shouldn’t read ‘Search Button’ because the screen reader will announce it as a button. Sometimes the buttons are icons (such as using a rightward-pointing double chevron to indicate ‘Next’), in which case the alt text should simply be what you would write if it was a text link (in this example, ‘Next’).
A third example of this kind of image is when a thumbnail photograph is used as a link. Whenever an image is used as a link it must have ‘alt’ text, otherwise the screen reader will fall back to announcing the link URL (even if you use an empty ‘alt’ attribute). Again, the best kind of ‘alt’ text to use in this example is the same text you would use if you were writing a text link instead of using an image.
Note that these last two examples only apply to images that are standalone links. If you have a link that encompasses the image and some text that follows it (as in the Mashable and BBC examples above), you should use an empty ‘alt’ attribute. This is because the link is fully described within the text. Adding ‘alt’ text in these examples just creates clutter. In fact, it’s good usability practice to create links that encompass an image as well as the following text, since this increases the size of the whole clickable area and makes them easier targets to acquire (as predicted by Fitts' Law).
Our final class of image is when we show a graph or a complex diagram such as an organisational chart. In these instances, you need to write brief ‘alt’ text (‘Organisational chart for ACME Corporation’) and then you must provide a longer, alternative description. This alternative description should be ‘equivalent’: that is, it should be a standalone description of the screenshot, chart or diagram.
This is a poor example from Business Insider. The problem isn’t with the ‘alt’ text, which is reasonable (although ‘Pie chart showing Android usage’ might have been better). The problem is that a screen reader user is unable to understand this graph and examine the underlying data. A sighted user can view this graph and quickly identify the most popular version of Android, can see that this version has more than 50% of the market and can see that the next biggest version has less than 25% of the market. A screen reader user cannot get any of this information from the graph.
One solution is to use captions (as I've done for the screenshots in this article) but some sighted users may find this overly wordy. In that case, you could provide a link to another html page where the information is presented in textual form, perhaps as a data table if the image is a graph. In terms of implementation, you should write an appropriately titled link (such as ‘Longer description of Android usage chart’) and place this immediately after the image. Because you won’t want your page of graphs cluttered with all of those ‘longer description’ links, you should style them in CSS so that they don’t appear in visual browsers.
An important learning point is that ‘alt’ text is contextual. For example, when there is an equivalent text description close to a thumbnail image, the image should have an empty ‘alt’ attribute, but not if the thumbnail image is a standalone link. Similarly, it might be fine to have an empty ‘alt’ attribute when the image is shown as a thumbnail but it may need a caption or longer description when presented as a larger image on the page. As with all design choices, you need to make an informed decision. Avoid the kneejerk reaction of just writing a few words of alternative text and considering your job done.
Dr. David Travis (@userfocus on Twitter) is a User Experience Strategist. He has worked in the fields of human factors, usability and user experience since 1989 and has published two books on usability. David helps both large firms and start ups connect with their customers and bring business ideas to market. If you like his articles, why not join the thousands of other people taking his free online user experience course?
Gain hands-on practice in all the key areas of UX while you prepare for the BCS Foundation Certificate in User Experience. More details
Every month, we share an in-depth article on user experience with over 10,000 newsletter readers. Want in? Sign up now and get free, exclusive access to our reports and eBooks.
Our most recent articles
copyright © Userfocus 2018.
Get hands-on practice in all the key areas of UX and prepare for the BCS Foundation Certificate.
We can tailor our user research and design courses to address the specific issues facing your development team.
Users don't always know what they want and their opinions can be unreliable — so we help you get behind your users' behaviour.