How to write alt text for different image types {infographic}

How you write alt text matters because it impacts your content’s accessibility, especially for users who rely on screen readers. Get it wrong and you’ll set your users up for a bad experience or even make your site unusable.

Writing image alt text might sound simple. But most developers and content creators are getting it wrong. They don’t realize that some images need alt text, while others don’t. Some descriptions are helpful, while others are redundant. The rules can even change depending on the image type and context.

So, if you’re ready to do a better job of writing image alt text for different types of images, here’s what you need to know...

Different types of images and how to describe them

Let’s start by defining some of the different image types and the best ways to write alt text for each of them:

• Functional - Functional images “do” something - usually they’re a button or a link. Use the alt text to describe the function, where the link goes, or what will happen when it’s clicked.
• Text images - It’s best practice to avoid text in images and instead use CSS to style your text. But if text in your images is unavoidable (and it provides important information or functions), you’ll need to include the words in your image in the alt text or elsewhere on the page.
• Informative - If you’ve got a photo or illustration that shows a concept or information, include a short alt text that describes the basic information shown in the image. 
• Complex - Some images include a lot of information or detail that’s important to the context of the page. It’s important that your users don’t miss out on that information. Include a short description in the alt attribute, then if you need a longer description, include this below the image. 
• Decorative - If the image is designed for decoration only and doesn’t add function or information to the page, leave the alt attribute blank.

To help simplify things, we’ve put together an infographic that guides you through the decisions so you can quickly see if your image needs alt text and what you need to describe.

Download: High resolution image

The irony of including a detailed infographic in a blog about writing image alt text for accessibility isn’t lost on us! But it’s a good example of a complex, informative image that needs a full written description to accompany it. Here we go…

So, how do you write alt text? 

It depends on the image type and context.

Start by checking if there’s text on the image. If there is text but it’s for decorative purposes only (or the text is also available nearby), you can leave the alt attribute empty. If you’re editing HTML, this should look like alt=””. If the text describes a function (like search) or provides important information (like showing an organizational chart), use the alt text to describe the function or relay the key information.

If there’s no text on the image, but it’s being used as a button or a link (like a social media link or contact button), you’ll need to use the alt attribute to describe the link destination or action taken if clicked. 

If the image adds meaning to the page or context it’s in and it’s a simple image, use the alt attribute to convey the meaning. If it’s a more complex image (like a graph), write a short summary in the alt text, then include a full description below the image. That’s what we’re doing right now.

On the flip side, if the image shows content that’s redundant because of text nearby, keep the alt attribute empty. Otherwise, screen readers will repeat the information twice, which could frustrate users. The same approach goes for images that are purely decorative (like a pretty stock image or stylized graphic). If they don’t add any meaning to the page or they’re not intended to be noticed (like a spacer graphic or border image), leave the alt attribute blank.

It’s impossible to cover all the different types of images with these rules… and the contexts you could find an image in are endless. So if in doubt follow this one rule: write the image description. Users will skip ahead if it's not relevant for them. 

Quick tips for writing image alt descriptions

• Keep it conversational - use proper sentences, not keywords or phrases
• Don't write "an image of..."
• Stick to 1-2 sentences
• If you need a longer description, write a brief summary in the alt text, and include the full description underneath the image
• Describe what's relevant for the context and intent
• Include emotion and humor if it's relevant
• Always consider the user experience and how you can make it accessible to all users

Want more tips? Check out our previous blog on image alt text best practices for content creators. And make sure you’re following us on Twitter for more conversation and content around accessibility #a11y 🙌

Many thanks to W3C for their image alt text decision tree and definitions that inspired this infographic and blog!