How to Write Effective Alt Text
Updated: May 21, 2020
Alternative text (also called alt text for short) is an attribute within an image tag that describes an image or gif. Alt text’s purpose is to ensure images are accessible for blind or low vision users. However, adding alt text also benefits your website’s SEO and improves the user experience.
What are the Benefits of Alt Text?
Alt Text is Essential for Accessibility
Alt text allows blind or low vision users who rely on screen readers to “see a photo.” As a screen reader comes across a photo, it reads the alt text out loud to the individual using it.
Alt text also allows people who rely on voice input (as opposed to clicking on a mouse or using a keyboard) to describe what button they want to press. For example, they can say, “click to register for the webinar.”
If your button doesn’t have alt text, it will often read a button as “button,” and the user won’t be able to know the purpose of the button.
Alt Text is Equally Important for SEO
Many of the images we search for on Google are pulled from the alt text. Without a description, search engine bots are forced to use the name of the image or try to decipher what the image consists of – which can go very wrong.
Alt text also lets you include your target keywords. According to Moz, on-page keyword usage is still a strong indicator of search engine ranking.
Lastly, if you have a slow internet connection or if you block images on your email, alt text is there to help tell you what the image is about.
Ultimate Guide to Writing Alt Text
Making the Decision: Does this Image Need Alt Text?
There are many instances when you don’t need to include alt text. Here’s the quick guide by WCAG to deciding whether you need to include alt text or not:
- 📰 Informative images: Images that provide a reader with information such as graphics, pictures, or illustrations. In your alt text, you’ll want to convey the important information of the image.
- 🌟 Decorative images: If the only purpose of the image is to provide visual decoration and not convey information, there is no need to provide alt text. Instead, you should provide a null text alternative (alt=””).
- ⏺️ Functional images: If your image is a link or button, the alt text should describe the functionality of the link or button, not the visual image.
- 📝 Images of text: It’s best practice to not use text in images, however, if images are used as text, the text alternative should include the same words in the image.
- 📊 Complex images: Images that convey complex information like graphs or diagrams should have a full-text equivalent provided in the alt text.
- 🏘️ Groups of images: If multiple images are used to convey one piece of information, the text alternative should convey the information for the entire group.
- 🗺️ Image maps: Each individual clickable area in a map should have a text alternative describing the purpose of the link.
Pencils (or Keyboards) Out, It’s Time to Write Alt Text
There are many ways to right alt text and creativity is encouraged!
First, you want to ensure you are being as specific as possible. Tell it’s purpose and feeling. If the image is just for decorative purposes, then there’s no reason to describe it, but you should include a null text alternative.
If possible, keep it short
Try to keep your descriptions short, unless there is a lot to describe. Most screen readers stop after 120 words, but if your image is complex or requires more description, then don’t let that stop you.
Add your keywords
Images are a great way to insert keywords and improve your rankings on search engines. When possible, add your keyword to at least one image on your page, but avoid keyword stuffing.
There’s no need to include “image of,” “picture of” etc.
The HTML code has already done that job, so save some characters for your awesome descriptions.
Never use images as text
Images should not replace text. This is a best practice for user experience and SEO. If you really need to though, always include alt text.
Always add alt text to button
If you have an image of a submit button, then you should add alt text and include the purpose of the button.
How do you code alt text?
Alt text is should be coded within the image tag in your html.
Typically, html for an image will look like:
To add alt text, simply include alt=”” attribute within the image tag.
<img src="filename.png" alt="alt text goes in here">
What does good alt text look like?
Bad alt text 👎: Dog
Good alt text 👍: Dog wearing a Santa hat sits next to a Christmas tree, surrounded by presents.
Great alt text 🙌: Syrio the black & white cocker spaniel with tan eyebrows wears a Santa hat and sits on a red blanket against a backdrop of red wrapping paper with snowflakes. Behind him are several wrapped presents and a tiny Christmas tree.
Frequently Asked Questions About Alt Text
📏 Recommended length
The recommended length for alt text is 100 to 120 characters.
If you need to go longer, you certainly can! Most screen readers will stop reading the alt text after 120 words, but they won’t cut it off entirely.
If you only need a few words, that’s fine too! Just do what you gotta do!
Tip: Try adding
longdesc="" to images that are complex or require long descriptions.
🤳 How to describe headshots
There’s no need to describe the person in a headshot unless it’s important to the story (for example if you are posting a wanted person poster, then you’ll probably want to describe the individual).
If you are adding the photo to a “Meet the Team” page, you can include the individual’s name in the alt text, or if the name is directly below it in the text, then you do not need to add the name to the alt text.
🏞️ Describing decorative images
Decorative images do not need alt text but should include null alt text (alt=””).
📱 Alt text on social media
Most social media platforms now allow you to add alt text to images.
- On Instagram: One the screen where you add your captions and location, scroll to the bottom and tap on “Advanced Settings.” Next, tap on “Write Alt Text.”
- On Twitter: You’ll first have to turn on your accessibility settings (you’ll find this under Settings > Accessibility > check Compose image descriptions). Going forward, you’ll be able to select alt text when you upload a tweet with an image.
- On Facebook: Facebook will automatically generate alt text for images – which is not always great. Instead, you can click on the “Options” link at the bottom of the image, then select “Change Alt Tex.”
- On Linkedin: When you upload an image to Linkedin, you’ll see a button below the image reading “Add alt text.”
For more examples on alt text, plus other essential tools that modern-day marketers need to know, watch the webinar, a The Marketer’s Toolkit for Accessible Digital Media below!
How to Handle Live Closed Captioning – and the Challenges
Technological innovation has paved a new way to conduct business, education, and life in general – particularly in a world forced to adapt to virtual substitutes during the pandemic. And most of the time, the technology we use is very helpful! Like…
3 Ways Video Has Changed for the Better
Decades ago, video’s uses were mostly limited to entertaining, informing, and advertising. Today, video has all but replaced classrooms, text books, work travel, and meeting rooms. 2020 brought upon countless changes to the world – and one of the reasons people maintained…
4 Tips for Creating an Accessible and Engaging Virtual Graduation
Graduation is a big milestone for students and their families and every year, colleges and universities prepare to ensure the ceremony is as special as possible. After a long and arduous academic year, students feel rewarded for their hard work and dedication…