Accessibility by Design Alternative Text

Alternative text (alt text) is a written alternative to an image. It’s a short description that can be read aloud by screen readers for users with visual impairments. It is necessary for any visual items, such as photos, graphs, charts, illustrations, and even memes. Note that if an image is complex, long description may be needed in addition to alt text.

The following video shows how a screen reader reads alternative text when it has been added to an image.

Some users won’t see your information. They’ll hear it using text-to-speech or screen-reading software. By adding a description to an image, you make its meaning available to people who can’t see it.

The following video demonstrates what happens when alt text is not included.

Alternative text should be both concise and meaningful to the listener. It conveys the purpose of an image, not every detail. Consider the following when writing alt text:

• Be concise – no longer than 120 characters.
• If the image is also a link, the alt text should describe the link target.
• If there is text in the image, include it in the alt text.
• Avoid redundant statements like “Image of” or “This is a picture of.” A screen reader will announce that it is an image.
• If the image is already described in the surrounding text, the alt text can be very short.
• If an image is purely decorative, mark it as such (various methods depending on software).
• What is the context of the image? What meaning does it add to the page? Describe only what you expect visual users to get out of the image.
• Who is the audience? How much knowledge are they expected to have of the topic

Check for Junk Alt Text

In many cases, programs will automatically generate alt text, either using artificial intelligence, or inserting the filename or url that the image originally came from. In each case, the alt text may be more harmful than helpful. It’s important to check alt text manually to ensure that it offers a helpful description.

Alt text for this image could be, “A person hiking on a mountain through freshly fallen snow.”

Note that this description doesn’t include details such as the color of the rocks, or that the tree is in shadow. If the image were being used to demonstrate the use of light and color in photography, the alt text might be very different.

• A written description helps people process complex visual information, presenting the concept in multiple ways.
• Alt text is available to search engines, increasing a website’s search engine optimization.
• It can be used for voice navigation on graphical links.
• The description is displayed when an image doesn’t load – for example, in areas of limited internet access when normally you would get a broken image: