What is an Alt Text for an Image?
The alt text attribute on an image serves as a text equivalent to the experience of viewing the image; it isn’t just a written description of the image. To meet the W3 standards, EVERY image MUST have an alt attribute applied to the <img> element.
There are three primary variations on how an alt attribute should be handled for an image:
- For images that convey meaning or serve a purpose to sighted users, that same meaning or purpose should be provided through a text alternative added to the alt attribute in the image tag.
- For images that are purely decorative or that add no meaning or serve no real purpose to the sighted user that is not already conveyed through text elements on the page, the alt text should be left intentionally empty so that the image is ignored by assistive technology, such as screen readers.
- Images that are linked, that have no other link description, should have alt text that not only is a text alternative to the image, but also describes the purpose and destination of the link.
Example:
Let’s look at a complex situation to illustrate our points.
Consider a typical recipe site. Their pages usually have a text element at the top holding the recipe’s title and right below that there will be a large ‘hero’ shot of the finished recipe.
The first question we need to ask when considering what alternative text we should use for the image is:
What does the experience of viewing the image communicate to the viewer?
A basic description of the image content doesn’t provide anything that the text recipe title above the image (which likely would have already been communicated to the user by assistive technology) is already telling them. Instead, think about how the experience of viewing the image is meant to entice the user to become drawn to it. Remember the reason you chose the image, it’s not just a picture of the recipe, its job is to get the user to make it!
So, that means that we need a high-quality text alternative if we want the same experience to be conveyed to the non-sighted user.
In this case, perhaps we have a recipe titled, “Herb-Roasted Chicken.” We certainly can’t just repeat the image title; that is incorrect on a number of levels. Instead, consider this text alternative:
“golden brown, herb-roasted chicken served in a cast iron pot”
The above text alternative provides a description of the contents of the image that attempts to provide the same experience of an enticing image that serves to get the user to engage further with the content.
SEO Considerations:
Search engines place significant value on alt text to score your page rank, however, they also draw a line that you do not want to cross where their algorithms will start to classify your site as spam. They value quality alt text. In the example found at this link: https://support.google.com/webmasters/answer/114016?hl=en, Google shows a clear example of the scale of alternative text quality.
In Google’s example, for an image of a puppy, alt=”puppy” is an ok alternative text. The better alternative text they present is: alt=”Dalmatian puppy playing fetch”. If you were a screen reader user, the second example gives you a much richer experience of that image’s content than “puppy” and probably more accurately describes what is going on in the image. Their example to be avoided is a long list of keywords related to dogs and puppies that would probably result in negative page rank.
SEO conclusion: even for SEO purposes, using a text alternative to the meaning and purpose of an image will net the best results for your site’s content.
Basic Do’s and Don’ts:
Text alternatives are critical for accessibility, however, they are also very contextual and what is “good” or “great” alt text is very subjective. That being said, there are some clear do’s and don’ts provided below that can help guide you when authoring accessible alt text.
DO Give every Image an alt attribute
Let’s look at a complex situation to illustrate our points.
Consider a typical recipe site. Their pages usually have a text element at the top holding the recipe’s title and right below that there will be a large ‘hero’ shot of the finished recipe.
The first question we need to ask when considering what alternative text we should use for the image is:
What does the experience of viewing the image communicate to the viewer?
A basic description of the image content doesn’t provide anything that the text recipe title above the image (which likely would have already been communicated to the user by assistive technology) is already telling them. Instead, think about how the experience of viewing the image is meant to entice the user to become drawn to it. Remember the reason you chose the image, it’s not just a picture of the recipe, its job is to get the user to make it!
So, that means that we need a high-quality text alternative if we want the same experience to be conveyed to the non-sighted user.
In this case, perhaps we have a recipe titled, “Herb-Roasted Chicken.” We certainly can’t just repeat the image title; that is incorrect on a number of levels. Instead, consider this text alternative:
“golden brown, herb-roasted chicken served in a cast iron pot”
The above text alternative provides a description of the contents of the image that attempts to provide the same experience of an enticing image that serves to get the user to engage further with the content.
SEO Considerations:
Search engines place significant value on alt text to score your page rank, however, they also draw a line that you do not want to cross where their algorithms will start to classify your site as spam. They value quality alt text. In the example found at this link: https://support.google.com/webmasters/answer/114016?hl=en, Google shows a clear example of the scale of alternative text quality.
In Google’s example, for an image of a puppy, alt=”puppy” is an ok alternative text. The better alternative text they present is: alt=”Dalmatian puppy playing fetch”. If you were a screen reader user, the second example gives you a much richer experience of that image’s content than “puppy” and probably more accurately describes what is going on in the image. Their example to be avoided is a long list of keywords related to dogs and puppies that would probably result in negative page rank.
SEO conclusion: even for SEO purposes, using a text alternative to the meaning and purpose of an image will net the best results for your site’s content.
Basic Do’s and Don’ts:
Text alternatives are critical for accessibility, however, they are also very contextual and what is “good” or “great” alt text is very subjective. That being said, there are some clear do’s and don’ts provided below that can help guide you when authoring accessible alt text.
DO Give every Image an alt attribute
- DO add alt text that is a text equivalent to the meaning or purpose conveyed by seeing the image (but keep it as brief as possible)
- DO leave the alt attribute empty to designate an image as purely decorative
- DO think about providing the same experience to sighted and non-sighted users
- DO describe the purpose and destination of a linked image
- DON’T just describe the picture
- DON’T use the exact text of a nearby text element
- DON’T duplicate the content of the alt text attribute into the title text attribute or vise versa
- DON’T worry about alt text for branded text such as logos
- DON’T stuff alt text with keywords
Easy Fails:
- Using images as CSS backgrounds that convey information
- Alt text that does not include information conveyed by color used in the image (use of color alone to convey meaning is a separate issue as well)
- Updating an image but not updating the alt text for the image
- Using alt text that is not a text alternative (e.g. filenames or placeholder text)
- Not indicating decorative images correctly (via markup) so they can be ignored by assistive technology
- Not indicating decorative images correctly (via non-null alt-tag) so they can be ignored by the assistive technology (e.g., alt=”blank” or alt=”image”)
- No alt attribute at all
- Using long descriptions that do not represent the information conveyed by the image
No comments:
Post a Comment
If you have any doubts or questions, please let us know.