Effective alternative (alt) text is essential to web accessibility and usability. Alt text is non-visual text read by screen readers that informs people with vision impairments of the contents of images and other non-text content.
Web development teams must ensure their alt text (or lack thereof) will not interfere with screen readers’ abilities to read non-text content accurately.
Here are some common mistakes to avoid when writing alt text and strategies to overcome them:
Always include an alt attribute
When developing websites and mobile apps, include an alt attribute for each graphic. A screen reader will often attempt to read the image’s filename if there is no alt attribute. This will likely make no sense to screen reader users and can even be distracting in many cases.
If the image is decorative (meaning the image adds no meaning to the page or if the image’s meaning is described in the surrounding text), the image should have an empty alt attribute (alt=””).
If the image’s meaning is essential and not described elsewhere, it must have an alt attribute that accurately describes it.
Don’t use “image of” or “graphic of”
Avoid using “image of” or similar phrases when writing alt text. Screen readers will automatically inform users of images, so using the word “image” or something similar in the description is redundant.
For instance, a screen reader will say, “Image: Image of Allyant logo.” If written correctly, it will simply say, “Image: Allyant logo.”
However, it can be helpful to indicate the type of image in the description. For example, you could include “Screenshot of…” or “Illustration of…” as part of the alt text.
Keep descriptions short and simple
It is a best practice to make image descriptions as short as possible so screen reader users will not have to listen to overly long descriptions. Make sure to give enough detail for screen reader users to understand visual content but not too much detail.
Although there is no specific limit to the number of recommended characters in alt text descriptions, Allyant recommends aiming for a maximum of 120 characters whenever possible. For many images, though, only a few words are necessary to accurately convey the image’s meaning.
When describing an image of a woman sitting on a park bench, for example, it is better to write something simple like “woman sitting on a park bench” than describe the bench, the scene, and the other specific details (unless that is necessary to understand the image’s context).
Also, be sure to use plain language so that descriptions can be easily understood.
Put important info first
Content and development teams should add the most essential information at the beginning of the alt description. This ensures screen reader users do not have to listen to unnecessary details to understand the image. Putting the important information at the beginning of the description is especially helpful to experienced screen reader users but is also a best practice in general.
Avoid promotional language
Content and development teams should avoid, or at least minimize, promotional language when writing alt text. Alt text should only describe what is in the image and not be used to promote a product or service.
For instance, alt text for an image of a person using a new product should only be something similar to “person using (product name).” The new product can be described in more detail in the surrounding text, not in the alt description. In most scenarios, the text will be included in the page content, which creates redundancy for screen reader users.
Include descriptions when in doubt
If you’re unsure whether an image needs an alt description, always include a description as a default practice. It is much better for screen readers to read unnecessary descriptions for decorative images than to have an empty alt attribute that screen readers will skip over for potentially meaningful images and page context.
Screen reader users may have to listen to more words than needed, but adding descriptions will ensure they get all the meaningful content.
Do you have any questions related to Alt text?
We have a wealth of experience with alt text and an accessibility tool explicitly built for assessing website alternative text in real-time for our clients, so don’t hesitate to reach out with any questions.
Remember that alt text is subjective, and there is no perfect way to write alt text. Two people might have different opinions of what’s meaningful in an image. However, refer to these guidelines and best practices when creating alt text.
