Alt text is an important aspect of web design and accessibility, and quality alt text is one of the easiest ways to improve the accessibility of your website. In this article, we will look at how to write effective alt text, so that your website can reap all the benefits of your hard work.
Nerd Vocabulary
Let’s set up an example image
Consider the following image, and pretend you were adding it to your blog article. When search engines or visitors with accessibility settings visit your article, they are not going to be able to see the graphic itself, and they will rely on technology to try and inform them as to what the graphic is displaying. The technology will look for an attribute in the HTML code for the image that should effectively describe the content.
“The Five Rules of good Alt Text”
Now that we have established the purpose of alt text and the image that we would like to describe, let’s look into the 5 rules for writing quality descriptive text.
1. Be Descriptive
The primary goal of alt text is to convey the same information that a sighted user would gain from the image. This means being precise in your description. For example, “A boat with fisherman on a sunny day” is more descriptive and helpful than just “boat”.
2. Keep it concise
Alt text should be brief and to the point, ideally under 125 characters. This ensures screen readers can read it correctly, and the description is short enough to keep the user engaged.
3. Avoid “Image of,” or “Picture of”
It’s already implied that alt text is referring to an image. Starting with these phrases can be redundant.
4. Use Keywords Sparingly
While it’s beneficial for SEO to include relevant keywords, it’s important not to stuff your alt text with them. The primary purpose of alt text is accessibility, not SEO.
5. Don’t Forget Functional Images
If your image serves a function, like an image used as a button to subscribe to a newsletter, the alt text should indicate the action that will happen when the image is selected.
Now, let’s write some alt text
So, using the example image above, how would we properly write our text?
Here are some good examples:
- A dog wearing sunglasses on the beach
- A funny puppy wearing shades on a sunny day
Here are some bad examples:
- Dog
- Image of a dog with glasses
- Dog, Glasses, Beach, Palm Trees
- A dog that is wearing sunglasses and appears to be smiling on a beautiful beach while the owner can be seen in the reflection of the lens
Finally, let’s code the text in
After you have written the text, you’ll need to actually add it to the image it is meant to describe. Normally, this means editing the HTML (but not always – if you are on a CMS, there are usually tools to assist you in this process without having to code anything). Here’s how you can add alt text to an image in HTML:
<img src="sunglasses-doggie.jpg" alt="A puppy wearing sunglasses on the beach">Now, when technology scans your site, whether or accessibility or search engine purposes, it knows that you posted an incredible cute image of a dog wearing sunglasses. With just a little effort in the form of paying careful attention to the alt text of images on your website, you enhance your site’s accessibility, user experience, and potentially, your SEO performance.
Want to learn more? Check out this informative video!
