How to Write Alt Text for Accessibility
A website without HD images and graphics is rare. And these stunning photos highlight a critical point about ADA web accessibility: what about the visually impaired? If they are not for everyone, great images tend to be irrelevant.
The solution is alt text. The problem is that alt text is often overused or ignored. When this happens, it is not only unfair to those with disabilities, but it is also unlawful.
What Is Alt Text?
Alt text is a defined text alternative for images. It is a description of an image that assistive devices may read aloud or convert to Braille. By using alt text, websites can include images while still making text-based versions of their content available.
If a website does not provide alt text, a screen reader will simply say "Image" or the file name of the photo.
When to Use Alt Text
All images, as stipulated by the World Wide Web Consortium (W3C), must have alt text to identify their purpose or the information they convey. Here's a quick rundown of the various types of images and how to create alt text for each:
- Informative images - Alt texts for this set must provide a brief description of the image's main content.
- Decorative images - These are photos that are intended to be decorative rather than instructive. Add a null text alt (alt="") to tell screen readers to disregard the image.
- Functional images - If an image is a link or a button (e.g., a printer icon), the alt text must explain its functionality rather than the visual image.
- Images of text - The tags should have the same text as the photo.
- Complex images - These are typically graphs and infographics. To convey the photo's complex content, provide a full-text version of the picture.
W3C.org provides a decision tree to help determine if alt text is necessary or if the photo should be marked as decorative.
When Is a Photo a Decorative Image?
Alt text is a crucial aspect of making sure people with visual impairments have the best web experience possible. In general, decorative images are:
- Visual design parts (corners, borders)
- Adjacent illustrations without adding new information
- Identified by the text around it
Alt Text Accessibility Best Practices
Here are some guidelines on how to write alt text.
1. Use the term "picture/image of" sparingly.
Starting the description with "a picture of" can disrupt the user experience. It also wastes valuable characters that could be used to better describe the image.
2. Use descriptive language.
It's not necessary to give every detail, but it's important to include the most important ones.
3. Start with the key details.
Don't bury the lead. Put the most valuable information about the image first.
4. Write for the people.
Prioritize the people that need alt text if keywords can be organically inserted into the alt text, good. Otherwise, SEO is secondary.
Moving Towards ADA Accessibility
Adding alt text on websites is not just ethical, but also ADA-compliant. ADA Web Accessibility can help with any alt text concerns. Contact us now.