Images are a key element of web design, but they can create barriers for users with vision impairments and other disabilities. That’s why the Web Content Accessibility Guidelines (WCAG) require text alternatives for images and other non-text content, like videos, charts, and graphs. Alternative text, also called alt text, provides an alternative for users who can’t perceive visual content.
The most important function of alt text is accessibility. Braille devices rely on it to share image descriptions. Screen readers and audio-enabled websites read it aloud. When an image file fails to load, the alt text appears in its place (a good example of how accessible web design improves the experience for all users).
However, accessibility isn’t the only advantage of effective alt-text. Search engines include alt text in the content they crawl to understand what your page has to offer — and rank it accordingly. That makes accurate alt text an important SEO factor.
To obtain these benefits, however, you have to write effective alt text. Follow these steps to make sure your image descriptions are as useful as possible.
How to Write Helpful Alt Text in 5 Steps
1. Determine the purpose of the image.
Why is the image on the page? It may show potential buyers your products, illustrate your services, or provide a branding boost. It might be strictly decorative, there to break up the text for a more pleasing visual experience. Some images double as buttons, including an element of navigation or control. All of these require different approaches to alt text; before you start writing, understand what the image is designed to do. Here are some guidelines for different types of images.
-
- For images that don’t provide useful information — images like dividers and decorative patterns — omit alt text. Instead, add a null alt attribute to instruct assistive devices to skip the item.
- If an image includes text, add that message to your alt text. Screen readers and other assistive technologies don’t typically scan images for text, so alt text is the only way to share it with some users.
- Images that include links or buttons should use alt text to explain the destinations or effects of these functional elements.
- For most images, alt text should consist of a simple, useful, original description.
At this point, you’ve got a basic understanding of the purpose of alt text. The following steps will help you write these descriptions more accurately.
2. Identify the important details.
Users may or may not be interested in image descriptions, and on a screen reader, longer alt text can lead to a frustrating experience. Therefore, it’s important to strike a balance between a concise description and a complete one.
Is your image making a comparison between one product and another? In that case, describe the difference. Does a photo show people in a certain mood? Describe the smile or frown — but only if it changes the meaning of the image. Don’t waste space by using descriptors like “image” or “this is a picture of…” Assistive technologies will handle that. Instead, focus on the elements that help the image convey its intent.
3. Describe the image in the first words that come to mind.
Here’s where the writing begins. Describe the image — just the important details. Try to keep it to a sentence or two. Use plain, everyday language. Imagine you’re speaking to someone who can’t see the image, and tell them what you see. You may write a bit long on your first draft. That’s okay; the next step is to cut it down to size.
4. Edit the alt text for conciseness.
Look for unnecessary words and remove them. Replace long words with shorter synonyms. Get rid of nonessential adjectives; instead of calling it a “sleek, white, brand-new iPhone,” for instance, just call it a “white iPhone.
There’s always tension between completeness and brevity. Let the details you compiled in Step 2 be your guide. Finally, don’t be afraid to ask for help — which takes us to our last step.
5. Seek review from colleagues and partners.
Some webmasters have brand partners edit alt text to keep messaging consistent. Others review alt text as part of website redesign projects. Many companies ask copy editors to check alt text along with other site content. Whoever it is, a reader with a fresh perspective can spot important elements you may have missed. They’ll also help you prune unnecessary words. There’s nothing better than an editor to improve writing, and that includes alt text.
It’s important to understand that effective alt text is just one part of a more accessible website. For more information about image descriptions, web design for assistive devices, and website accessibility more generally, contact the Bureau of Internet Accessibility today.
