Alt text, or alternative text, is a short, written description of an image. It is implemented for those who have visual impairments and use screen readers or other assistive technology to read and interact with websites. The following information is a guideline for creating the most meaningful and compliant alternative text for images within a document or on a website.
When applying alt text to an image, it should not include:
"Picture of"
"Image of"
"Photo of"
Screen readers will automatically announce an image as an “image." So, alternative text that reads “image of an apple” would actually be read aloud by a screen reader as “image, image of an apple."
Using correct grammar can enhance the experience for screen reader users:
Capitalize the first letter of every sentence.
End whole sentences with a period. This will cause the screen reader to pause.
Alt text for informative images:
Informative images are any images that add to the context of a page. If the context and content of a page would suffer if an image was removed, then that image is informative. All informative images must have alt text included.
Additionally, the alt text needs to describe the image as concisely as possible. As a rule of thumb: Avoid writing text alternatives longer than 100 characters. Long alt text will result in a poor user experience for those using screen readers. If the image requires a longer description, it is better to describe the image within the copy on the page and provide a shorter alt text.
To write a good alt text consider the context of the image. What content is it supporting? What details are important in the image? The alt text should match the tone of voice of the accompanying content.
Contrary to popular belief, alt text does not need to be an objective description, it can convey nuances, details, and emotions if they are relevant to the user experience.
Image descriptions:
For example, if the image of Queen Elizabeth II of England was used in an article about the history of the royal family of England, a compliant alt text could simply describe the image as ”Queen Elizabeth II of England.”
To create a richer experience, however, the alt text could read “Queen Elizabeth II of England looking off in a thoughtful manner while wearing lavish royal clothing and jewels.”
If this same image was used in a different context, such as an article focused on royal attire in England, an appropriate alt text could be “Queen Elizabeth II of England wearing a cream colored dress with a blue sash, a jeweled crown, drop earrings, and a blue gemstone necklace.”
As another example, the alt text below describes an image of a park:
“Aerial view of Yellowstone National Park.”
Alt text for decorative images:
In contrast to informative images, decorative images are those that serve no specific purpose. Thus, they are not meant to convey any meaning or important information. In this case, it is best practice to use what is called the NULL alt text or empty alt text.
Note that the alt attribute is still present, even though it is empty. When a screen reader comes across null alt text, it will completely skip over the image, without announcing its presence. If no alt attribute is present, the screen reader will read the file name for the image instead, which can be a major distraction to those using screen-reading technology.
Images with text:
According to WCAG guidelines, images of text are not allowed. If you cannot avoid images of text, its best to have the exact same text in the alt attribute.
For example, for the alt text of this non-linked image, you could use the words in the image itself: “Family is forever.”
Functional images (linked images):
Functional or linked images are used to initiate actions rather than to convey information. They are used in buttons, links, and other interactive elements. The text alternative for the image should convey the action that will be initiated (the purpose of the image), rather than a description of the image.
Missing or empty alt values create significant problems for screen reader users because functional images are essential to the functionality of the content. Screen readers will typically announce the image file name, the image URL, or the URL for the link destination, which is unlikely to help users understand the action that will be initiated by the image.
Example: Image used alone as a linked logo
The following image contains a link that leads to Splash Box’s webpage and is shown without any other link text. It has the alternative text "Splash Box home page" to indicate where the link will take the user.
Incorporating well-written alt text is essential for making sure digital content is accessible to all users, particularly those using assistive technology like screen readers. By following our best practices, you ensure that your images enhance the user experience, rather than creating barriers to your content. By making thoughtful alt text a standard of your content strategy, you contribute to a more inclusive Internet for everyone.
If you have more questions about alt text best practices or about accessibility standards in general, Splash Box Marketing is here for you. Contact us today at info@splashbox.com or visit our website at splashbox.com/accessibility for more information.