How to Write Effective Alt Text
Updated: January 2, 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!
ASL Lessons: Learn How to Sign with Kerry Thompson
Although September is coming to an end, there are still a few days left in National Deaf Awareness Month. That means we’re still celebrating the diversity of Deaf culture and the richness of American Sign Language (ASL). In our last ASL Lessons…
Q&A: Captioning the 3Play Way
In our latest webinar, “Captioning the 3Play Way,” we dive into 3Play Media’s closed captioning process, including the tools, services, and standards used to produce high-quality captions. During the Q&A section, our audience posed some interesting questions, which we’ll answer in full…
Deep Dive on Major Accessibility Laws
There are about one billion people, or 15% of the global population, living with some form of disability. According to The World Bank, individuals with disabilities are more likely to experience fewer opportunities for employment, higher poverty rates, less education, and poorer…