Use Code LOVE25 at Checkout

GET 25% OFF IN THE SHOP

00D 00H 00M 00S

How to Write Alt Text for Images: Best Practices & Examples

Feb 20, 2024

filed under  //

DESIGN TIPS
on Tap

Get my best tips and tricks on design & marketing in your inbox every week.

HOT TOPICS

Subscribe

1

Search:

If you’re concerned about your website’s SEO or accessibility (and you definitely should be in 2024) writing ALT text is something you need to become familiar with.

What is ALT Text?

In short, Alt text, or alternative text, is a brief written description (yet often hidden) of an image on a website (or application), included in the code of an image tag.

Most users will never actually see the ALT text on your site. However, in the case that your image doesn’t load, ALT text will be displayed in its place, or it will be read aloud for visitors that use screen-reading technology.

broken image - this is an example of what alt text looks like when an image doesn't load

Here’s an example of ALT text you might see in the code of a website:

<img src="/images/image1.jpg" alt="a woman typing on a laptop"/>

Luckily, most website platforms, such as WordPress, Squarespace and Showit, have a way for you to add your image Alt text easily through their interface that doesn’t require you to touch any code. Phew! (Want to jump to the section of this post that tells you how to add Alt text in WordPress? Click here.)

Benefits of Alt Text

The purpose of descriptive ALT text is two-fold.

Alt text helps with User Experience / Accessibility

First and foremost, ALT text helps you make your content more accessible, meaning people who use screen readers or that are using slow internet connections can still understand and browse your site. Without the use of ALT text, your users might be missing key information to understand your content, especially it if you use a lot of illustrative images or your content is heavy on the visuals.

Alt text can help to boost SEO rankings

ALT text is scanned and read by search crawlers to help Google understand the topic of the content and images on your site and web pages. (John Mueller, Google) Not only can it help you rank for keywords through your written content. It can also help you rank your images for SERP features like Google’s image pack. However, don’t forget that ALT text is only one small piece of the SEO puzzle for ranking, not the whole picture.

How to Write ALT Text

Writing ALT text doesn’t have to be overly complicated. There are just a few things you should keep in mind when optimizing the images on your website.

ALT Text Best Practices

  • Be descriptive and clear: Your audience should easily and quickly understand what the image is about. If it’s relevant for user to understand, try to include the “who”, “what” and “where”, similar to how journalists write captions for images in newspapers and media publications.
  • Don’t be overly emotive, creative or include details that are subjective. When writing ALT text, your goal isn’t to write some highly praised creative work. It’s just to provide the facts. Leave out any creative interpretations, analogies and non-objective details and save those for the content on your page – not your image ALT text descriptions.
  • Go beyond the obvious. Include specific details that a sighted user might take for granted but are crucial for an inclusive experience. For example, if you have an image showing a dog, instead of just writing ALT text that says, “dog”, include what breed of dog it is, what size the dog is, the color of it’s fur, and what the dog is doing (Essentially, you want to include any detail that someone could readily discern who is able to see it).
  • Use keywords organically: Integrate relevant keywords where they add meaning and context, but don’t force them into your descriptions if they have nothing to do with what the image is actually showing.
  • Consistency with surrounding content: Ensure your ALT text makes sense with the written content on the page. For example, if you are writing an article about “How to Write ALT text” and you include an image of a women typing on a computer, the ALT text should explain how this image relates to the content of your post, such as “woman writing ALT text for her website on a laptop”. (If your image is purely decorative, such as to divide sections on the page and the content has nothing to do with the topic, don’t include any ALT text at all.)

ALT Text Examples:

Let’s try a couple examples to illustrate what “good” ALT text looks like in practice.

Take the following image for example:

closeup of person organizing landscape photographs on a wall
  • Bad Alt text: photographs
  • OK Alt text: photographs on a wall
  • Good Alt text: closeup of person organizing landscape photographs on a wall

OK let’s try another one:

  • Bad Alt text: coffee
  • OK Alt text: drinking coffee
  • Good Alt text: closeup of woman’s hand on a latte at a table setting

How to Add Alt text in your WordPress Blog

Adding Alt text in WordPress is relatively easy and straightforward. Even if you aren’t a WordPress pro, I’m confident you can add your own Alt text in less than a minute on your own website or blog.

  1. Insert an image into your post. If you are using the Gutenberg editor, click the + sign to add an image block.
showing how to add an image inside of a WordPress blog post with the Gutenberg editor image block
  1. Choose an image from your WordPress Media Library or upload a new image. Once you select / upload your image, you can write your Alt text in the right hand detail field next to where it says Alt Text.
showing the WordPress media library with an image selected next to the alt text written inside the alt text field

It’s that easy!

If for some reason, you forget to add your Alt text before inserting it into your post or want to go back to add Alt text to old posts with images already in them, don’t worry! You can easily add it inside of your blog post too.

Just select your image inside the WordPress post editing screen and you’ll notice on the right sidebar block menu, that you now have an option to enter in your Alt text here.

example showing how to add alt text inside of the WordPress post editing screen, showing a selected image with the corresponding Alternative text field highlighted

Make sure to save your draft (or hit publish) to save your changes.

Other FAQs about Alt text

How long should Alt text be?

A good rule of thumb is that ALT text descriptions should be around 100-125 characters, which is roughly 1-2 sentences. Some browsers will truncate your text after this amount, while others will not. However, even in the case where longer text may not be truncated, a shorter description will provide a better user experience and be more quickly interpreted or read by the user than a longer description would be.

Can you include Alt text in other places besides webpages?

Yes! Most online websites that allow image sharing such as social media sites like Instagram, Linkedin and Pinterest, or even online applications like Google Docs or software like Powerpoint, have ways to add alt text to your images. For offline applications, this is primarily to create more user-friendly, accessible experiences. For online sites and apps, this has the same SEO + accessibility benefits that using Alt text on your website does.

What is the difference between title and alt text in WordPress?

The title of an image is another attribute that you can set on a photo in your WordPress media library that is typically hidden. A title attribute can be assigned to other HTML elements, besides images, such as menu links or buttons. The title is often displayed as a tooltip when a user hovers over an element. Your title could be used to display a simple caption or a more detailed description about what that element is. Similar to Alt text, title attributes help create a better user experience and play a small role in SEO rankings, however, Alt text is considered more critical than the title attribute.

Things to Avoid when Writing Alt text

  1. Avoid using the words “image”, “picture”, “photograph”, etc. This information is redundant. Screen readers will already identify there is an image on the page because of how it’s coded on your site, using an IMG tag. 
  2. Don’t include unnecessary information or words to describe things that aren’t actually being shown in the image. (This includes adding keywords, just for the sake of adding keywords.)
  3. Don’t skip the spell-check. Misspelled words could be confusing for people using screen-reading technology. Apart from a poor user experience, having misspelled words in your Alt text could interfere with your ability for these images to be properly indexed by search engines.

In short, writing Alt text doesn’t have to be tedious or time consuming if you plan to incorporate as step of your blog writing process. In reality, it should only take you a couple of minutes per post and can greatly impact user experience and even give your SEO a little boost. So, ultimately in my book, it’s a no-brainer to make the little extra effort.

Need more SEO and accessibility tips? Check out some of these other articles below.

Don't worry, we hate SPAM too and we promise to never blow up your inbox!

Get our best tips and tricks on design & marketing in your inbox every week.

Subscribe

1

DESIGN TIPS

on tap

Subscribe to our newsletter and get free goodies, insights and discounts delivered to you with love.

Your not-so-typical brand and web bestie.

kristin pruis

Armed with a decade of design prowess and keen business insights to boot, she's the creative powerhouse behind these digital musings.

hey-o

meet the blogger

learn more

When she's not crafting brands and websites that turn heads, you'll find her penning blog gems that cut through the noise with wit and wisdom. Get ready for a rollercoaster ride through the world of branding, design, and entrepreneurship – with a side of sass and humor. Buckle up, babe - you're in for one heck of a journey!

FREEBIES

Flawless fonts Pairing Guide

brand your business messaging checklist

Looking for the free goods? Check out our curated collection of free resources and essential tools to help you craft a distinctive and bold online presence.

fan-favorites resources

color palette inspiration guide

0
Your Cart is empty!

It looks like you haven't added any items to your cart yet.

Browse Products