How to Write Effective Alt Text

Alternative text (also referred to as 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, and the alt text is usually read aloud by a screen reading device. However, the addition of alt text also benefits your website’s search engine optimization (SEO) and improves the overall user experience. Here, we’ve compiled a comprehensive guide on how to write alt text, the benefits it can provide, and some frequently asked questions.

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 different ways to write alt text, and creativity is encouraged – here are a couple of our best tips for writing effective alt text:

Get Specific

First, make sure you are being as specific as possible. Describe the purpose and feeling of the image. If the image is just for decorative purposes, then there’s no reason to describe it (but you should include a null text alternative).

Keep it short

If possible, try to keep your descriptions short (unless there’s 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. Describe as much as necessary to fully convey the image’s purpose on your site.

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:

<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?

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.

• 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.”
• 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.
• 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.”
• Linkedin: When you upload an image to Linkedin, you’ll see a button below the image reading “Add alt text.”

 

---

For more examples of alt text & other essential tools for modern-day marketers, watch the webinar The Marketer’s Toolkit for Accessible Digital Media below!