Image Alt Attributes and Why They’re Important

image alt text featured image

Image alt attributes or alternative text refers to the HTML code used to describe the function and appearance of an image on a web page. In this article we’ll look at why it’s important to include alternative text with your images and how to do it correctly.

What are the Image Alt Attributes?

Alt attributes or alt text is only displayed in a browser if images are disabled or an image can’t be loaded for some reason. The primary purpose of alternative text however is to enable screen readers to describe the image for visually impaired users. Alt text also allows search engines to understand the context of images and improve your SEO.

Here’s an example of alt text

The HTML alt text for the image below could be something like this:-

<img src="labrador-pencil-drawing.jpg" alt="pencil drawing of 2 Labrador dogs">
Pencil drawing of Labrador dogs as an example of image alt attributes.

You will see something like this in your browser if the image above can’t be loaded:-

alternative text if the image can't be displayed

Alternative Text and SEO

Images with no alternative text leave a grey area on your page for search engines. By including alt text you make the the images available to search engines and improve your SEO. Read more on SEO Basics You Can Do Yourself.

Tips for Writing Alternative Text

Image alt text should be specific and represent the topic of the webpage. Here are a few guidelines to writing alt text for SEO.

  • Describe the image using the subject and context
  • Keep our alt text to 12 words or less. Screen readers generally cut the alternative text off at 125 characters which can be awkward when verbalising for visually impaired users.
  • Don’t use “picture of…” or “image of…” as screen readers already identify the image from the HTML code.
  • Use keywords sparingly and avoid keyword stuffing. Use a mix of keywords, natural language and phrases to describe the function and appearance of your image.

How to Add Alt Text to an Image

In this age of CTM‘s and page builders, it’s unlikely that you’ll have to dig in to the HTML code to add your alternative text. Modern CTM’s and page builders allow you to add alternative text to images without any coding.

Wordpress attachment details dialogue box
Attachment details dialogue box in WordPress

You can edit or add alternative text to an image in WordPress from the attachment details dialogue box when you select the image from the media library. Other CTM’s and page builders will have a similar function.

Adding Alternative Text to Social Media Images

To add alternative text to an image in Facebook, click on the edit icon in the top left hand corner after adding the the image to your post. This will bring up the following dialogue box where you can add your custom alt text.

Add alternative text in Facebook photo detail dialogue box.
Facebook photo detail dialogue box

Alternative Text Takeaways

Alternative text creates a better user experience for visually impaired users by describing exactly what is in an image. The alt text also provides useful information on the subject matter of an image for search engines to determine the best image to return for a users’ query.

Spending some time on the alternative text for your images therefore has both usability and SEO benefits for your website.

Cimeron Collins profile image

Cimeron Collins

Cimeron is an artist and designer with more than 25 years experience in the printing and publishing industries. He lives in Edenvale, South Africa with his wife Tamay.

Leave a Comment

Your email address will not be published. Required fields are marked *

Top