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.
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:
- 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.
- Insert an image into your post. If you are using the Gutenberg editor, click the + sign to add an image block.
- 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.
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.
Make sure to save your draft (or hit publish) to save your changes.
Other FAQs about Alt text
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.
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.
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
- 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.
- 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.)
- 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.