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, an alternative text “Image of an apple” would 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 and therefore needs alt text included.
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 were 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 more rich experience the alt text could be “Queen Elizabeth II of England looking off in a thoughtful manner and wearing lavish royal clothing and jewels.”.
If this same image was used in a different context: perhaps an article more focused on royal attire in England, an appropriate alt text could be “Queen Elizabeth II of England wearing a cream color dress, with a blue sash, a jeweled crown, drop earrings and 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
Decorative images are images that serve no specific purpose, meaning that 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.
Image with text
According to WCAG, 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 image)
Functional 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.
Comentários