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:
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.
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.”
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):
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.