Q7 What is the importance of associating alternate text?
Answers
Answer:
Alt text or alternate text is a feature added to an image tag in HTML. This text seems inside the image container when the image cannot be exhibited. It helps search engines comprehend what an image is about. Alternate text is also very accommodating in case images on a page cannot be found.
Explanation:
Alternative (Alt) Text is meant to convey the “why” of the image as it relates to the content of a document or webpage. It is read aloud to users by screen reader software, and it is indexed by search engines. It also displays on the page if the image fails to load, as in this example of a missing image.
Broken image symbol with alt text displayed below "Tourists pose for pictures, touching the foot of the John Harvard Statue".
Write Good Alt Text
Add alt text all non-decorative images.
Keep it short and descriptive, like a tweet.
Don’t include “image of” or “photo of”.
Leave alt text blank if the image is purely decorative
It's not necessary to add text in the Title field.
Example of Alt Text with Various Contexts
A mostly empty stadium.
Alt-text with no context:
A mostly empty stadium.
Alt-text on a page about recent turnout for track tryouts:
Harvard Stadium with two lone runners bounding up the steps.
Alt-text on page about renovation projects:
Harvard Stadium with cracked concrete pillars.
Complex Image Types
Icons: alt text for icons should be the equivalent to the information intended by the icon, such as “Download PDF” or “Visit our Facebook Page”
Images as Links: If the image is being used to link to another page, the alt text should describe what will happen when the image is clicked (rather than what it looks like). For example, the alt text for an image of a question mark that links to a help page should be “Contact Support” rather than “question mark.”
Images with complex information: If the image is a chart, diagram, or illustration, consider how to convey the information contained in the image using both the alt-text and the adjacent page text. See an example of an accessible infographic from WebAIM.
Testing