How to Add an ALT Attribute to an Image

‘A picture is worth a thousand words’. Or is it? When building web pages, it’s common to add beautiful images to help tell stories and provoke emotions. But (and this is a big but), a picture is worth absolutely zero words to someone using a screen reader if you don’t have an ALT attribute to describe it.

What is ALT text?

In HTML, ALT text is the alternative text description given to an image that explains what the image is about. There are various reasons for adding alt text to images. 

• It is best practice
• It provides an alternative description for people who are blind
• It helps provide descriptive context to low bandwidth users.
• Did I mention that it is the right thing to do?

The alt text describes what’s on the image and the function of the image on the page. For example, if you use an image as a sign-up button, the alt text should say: “sign-up button.”

As a rule, alt text must be descriptive and specific. Do bear in mind, though, that you can do more harm than good if the alt text does not fit the context of the image. 

Now consider this image and the examples of good alt text and bad alt text below:

Bad Alt Text

alt="Picture of a cat."

Good Alt Text

alt="a black cat sitting outdoors on a pile of photographs staring sideways into space."

The first alt text is technically descriptive, yes. But not in the right way. It is a picture of a cat. But Google will recognize it as an image, so there’s no need to state the obvious.

Also, what is the color of the cat? Where is it? What is it doing? These are important details that screen readers need to properly describe the image to a blind or visually-impaired user. 

How to add ALT text to an HTML document

HTML is the markup language for the web. Web developers and web admins use it all the time to create and manage web pages. It’s therefore essential to know how best to add ALT text to an image using HTML.

Here is an example of how best to insert an image using HTML 

<img src=“image.jpg” width=“500px” height=“600px” alt=“image description” title=“image tooltip”>

The alt attribute describes the image, and the title attribute provides a tooltip that appears when a user hovers over the image.

What if I use an image purely for design purposes?

If you use an image purely for design purposes, embed the image in the CSS file, not the HTML file. However, if the image is in the HTML file, leave the alt attribute empty like so, alt=“”. This ensures that the screen reader skips such an image.

ALT attribute and SEO

By adding alt text, you provide search engines with a contextual description of what’s on that image. This improves accessibility and your chance of ranking in image search.

Google places a high value on alt text. Google uses it to determine what is on the image and how it relates to the surrounding text.

How do I add an alt attribute to my WordPress site?

To add an alt attribute to your WordPress site, follow the instructions below:

• Log in to your WordPress website.
• Once logged in, open the post or page to edit the content.
• Click on “add media” to open the Image settings on the sidebar.

• The  “Add media”  tab opens
• Add the alt text and the title attribute.

• Click “insert into post” to insert your image.

FINAL THOUGHTS

Whether you’re using static HTML or a content management system, adding alt attributes to your images is of great importance. And the best part is that by adding alt attributes, you solve for many users and use cases.