Including alt text on the images on your website is one way to achieve accessibility for all users, resulting in ADA compliance and strengthening your SEO.
Always include alternative text for images, videos, and audio files.
An alt tag, also known as “alt attribute” and “alt description,” is an HTML attribute applied to image tags to provide a text alternative. This alternative text describes your images and provides critical missing context for users who can’t see them.
This is important for both screen readers and search engines. Alt tags allow users (or Google) to hear or read alternative descriptions of content they might not otherwise be able to view. Alt tags describe the object itself and, generally, the purpose it serves on the site.
Images are used for a few different image types – informative, active, or decorative.
Informative images provide additional information to users that is in addition to any other copy surrounding them. Active images prompt a user to take some action – essentially a call to action. Decorative images are there solely for visual design and don’t impart any additional information to users.
While it can be tempting to apply descriptive alt text to each type, that can actively work against the goal of making the page more accessible. For example, providing descriptions for decorative images adds unnecessary information when read aloud by screen readers, resulting in frustration and, potentially, confusion by users.
The following guidelines will help you keep your images and website more accessible and usable:
- Alt text for informative images should describe the information in that image and repeat the text in the image if there is any. Avoid repeating information if the surrounding copy states the same thing as the image.
- Alt text for active images should describe the result of the intended action. Think of them like buttons or text links.
- Include an empty alt attribute (e.g. alt=””) for decorative images. Failing to do so will result in most screen readers reading the entire image source URL, creating a confusing and frustrating experience for users.
- Avoid calling attention to the fact that it is an image. Don’t use language like, “This is a picture of…” or “Here’s an image of…” This doesn’t add any value to the subscriber and only serves as a reminder that they can’t see your images.
- Don’t use alt text as a prompt for users to download or enable images, as not all users will have this ability or benefit from it.
- When in doubt, read your alternative text out loud along with the rest of the surrounding content. If it sounds natural to you and provides the intended value, it’s good alt text.
Guidelines adapted from Litmus’ “Ultimate Guide to Email Accessibility”