11 Alt-tags
Alt-tags or alternate text are added to an image included in online documents and on webpages so that anyone using a screen reader to access the information will have an explanation of what this image is communicating or if the image cannot be displayed, the alt-tag will appear as text in its place. Writing an alt-tag is a bit of an art as the text you use to describe the image should help explain why the image is there. Imagine you are sharing an image with a friend to cheer them up. You find a cute picture of a small orange kitten sitting on their hind legs with their front paws together. It looks like the kitten is praying. The kitten has large eyes and a sweet expression that looks like a smile. You send it to your friend with a message: “I hope your day gets better!” Now imagine your friend can’t see the image and the alt-tag says “A cat.” While the alt-tag does provide text about what is in the image, it does not convey the purpose or the reason why you included it with the message. Learning to write a good alt-tag might seem tricky so we have some tips to make it easier!
The Difference Between Alt-tag, Image Descriptions, and Captions
The below descriptions explain the difference between alt-tags, image descriptions, and captions. To be fully accessible, providing both alt-tag and image descriptions is recommended particularly for images or graphics that convey words or complex information. Captions are optional in most circumstances, and should not be used in lieu of alt-tag and image descriptions.
- Alt-tag: a brief textual explanation of an image, used in the coding of digital graphics online and in digital files; alt-tag is not visible on websites unless the image does not appear.
- Image Description: a detailed explanation of an image that provides textual access to visual content; most often used for digital graphics online and in digital files; can be used as alt-tag in coding to provide access to more complete information.
- Caption: a brief explanation that provides further information about an image; these do not need to focus on visual components and can be supplemental to any image.
Example:
Alt-tag: Yes you can written in scrabble tiles.
Image Description: A motivational quote, YES YOU CAN, is displayed using scrabble tiles.
Caption: Yes! You can write Alt-tags
How to compose an Alt-tag:
Most of the time, you will need to write alt-tag for each and every image you add to your learning documents; the exception is a purely decorative image which does not need a text description. It’s important that your alt-tag is clear and descriptive to effectively communicate the visual information in the image.
1. Examine the image closely.
Think about everything that’s happening in the image. What visual information is it conveying? What information would you not have if you could not see this image?
2. Consider information implied by the image beyond the objective visuals.
Is the image implying a mood, feature, or activity not mentioned elsewhere on the screen where it will appear?
3. Don’t begin with “Image of…”
A screen reader will tell the person listening to your alt text that this is an image. However, do mention if your visual is a particular type of image, such as an illustration, headshot, infographic, collage, etc.
4. Include any and all words in the image.
It’s best to avoid using images with text embedded in them. However, if words are part of your visual, you must include all of them in your alt text. As you can probably imagine, the more words in your image, the longer your alt text will have to be.
5. Determine if the layout is communicating meaning.
For images like infographics, where the image’s composition makes a difference in what’s being communicated, you’ll need to explain that layout and its meaning in your alt text.
References
Some parts of this article were adapted from Step-by-Step Instructions for Writing Alt Text by University of South Carolina
