How to Write Effective Alt Text

December 27, 2019 BY SOFIA ENAMORADO
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

lightning bolt

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

 

Two Fundamental Questions to Answer Before Writing Alt Text

Before writing your alt text, there are two important questions to ask:

  1. Why did you pick this particular image?
  2. What feeling or understanding do you hope to create in the viewer?

By answering these two questions, you are already well on your way to writing great 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!

Get Specific

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

digital camera

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:

<img src="filename.png">

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?

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.

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!
 


3play media logo in blue

Subscribe to the Blog Digest

Sign up to receive our blog digest and other information on this topic. You can unsubscribe anytime.



By subscribing you agree to our privacy policy.