Businesses want their websites to be accessible – to customers, to search engines, to screen readers. But what does this work involve in reality? We asked Whitney Quesenbery (pictured), co-author of A Web For Everyone, for a practical example of what it means to make a website accessible.
Here she focuses on explaining a single metadata field that is found in every content management system: alt text for images.
As digital communications recruiters, we wanted to zoom in on a single example of how a content editor, user experience (UX) professional or other content hire might optimise a client’s content using metadata to make a site readable to both humans and machines. But there are many more practical insights for content workers in the book – see below for a fab 15% off offer for Firehead readers. Enjoy!
Making your images visible through alt text
Have you ever read a web page on a slow Internet connection and seen a box with a little bit of text where an image was supposed to be? That text is called ‘alt’ text. It’s how we make the meaning of the image visible through a little bit of text. In a modern editor or content management system, you enter it as an image property. The code looks something like this:
<img src= “myimage.jpg” alt=”description of the image”>
Writing the alt text is an important responsibility for content authors. It is a way to communicate meaning, so what you write depends on what you want the image to say. After all, you put the image on the page for a reason. Adding alt text makes sure that everyone gets the same message, whether they can see the image or not.
The only absolute rule is that every image must include the alt attribute.
Even if the image is purely decorative, such as an icon that repeats the meaning of a link, you can use what we call ‘null alt text’ by putting nothing in between the quotes, so the browsers and screen readers know to skip it.
The rest of the time, find a few good descriptive words that fit the context. For example, if you put a photo of a fox on a page, some options for the alt text might include:
- Fox – if there is nothing special you want to say about the fox.
- Red fox – if you are making a point about colour or distinguishing a specific type of fox.
- Red fox at Sachuest Point National Wildlife Refuge – if you want to identify the place where the fox was photographed.
- A red fox, standing alone on a pile of rocks, looks back at the camera – if you want to share the emotional impact of the image.
Notice that you don’t have to say ‘Picture of a fox’ because this is a description of an image, but you might want to tell readers if it’s a photograph, a drawing, or a cartoon ((and the difference is meaningful).
Five tips for writing alt text
Here are a few guidelines to get you started writing useful, informative alt text.
- Repeat any words in the image. If the image is just graphical text – such as a ‘Buy now’ button – you probably don’t have to describe the visual treatment.
- Identify the target of a link. If the image is a link with no additional words, use the alt text to provide the text that tells the reader where the link points. For example, the book cover image below links back to the book site – the alt text may say ‘Click to read more about this book’.
- Don’t use file names or other technical information. Unfortunately, some programs will automatically insert this sort of information into the alt text, and you have to find and remove it. No one wants to hear ‘IMG0002300112dotJPG’.
- Keep the alt text concise. Use just enough words to be informative, without a lot of extra detail.
- Coordinate with the caption. If you have a caption or a description of the content of the image in the article, don’t repeat yourself. Instead, provide just enough detail to connect the image to the content.
All the rest is common sense and good content strategy. The real test of good alternative text for images is whether the page communicates just as well, providing equivalent information and an equally good experience, both with and without seeing the images.
Further information on alt text
To find out more about making images more accessible and improving user experience (UX), check out the following links:
- A Web for Everyone: Designing Accessible User Experiences, by Sarah Horton and Whitney Quesenbery, covers alt text in Chapter 9: Accessible Media
- Text alternatives for images, 4 Syllables, has a chart based on the role of the image with examples and alt text solutions.
- Creating Accessible Images, WebAIM, is a good overview of the techniques, including how to handle some more advanced situations
Special offer: Get the book!
We have a very special offer available to readers who like to get hold of a copy of A Web for Everyone: Designing Accessible User Experiences. Whitney Quesenbery and Sarah Horton have put together a ton of practical advice with examples to help you create sites that everyone can use.
Simply, visit Rosenfeld Media and type in the code FIREHEAD for an immediate 15% discount off its books.
There are plenty of other resources to help you on the Rosenfeld Media website. Alternatively, follow @awebforeveryone for blog updates and listen to the podcast, A Podcast for Everyone.
Image of red fox: (CC) J. and K. Hollingsworth/US Fish and Wildlife Service (USFWS)
You might also like:
