Alt Text — What, Why, How & FAQs

alt text image

What is Alt Text?

Alt text also called “alt tag”, “alt attribute, and “alt description, is an HTML element that helps screen readers describe website images to the visually impaired and enables search engine bots to better understand the image.

It acts as an alternative to the images, and so it helps a browser to display image description when the image cannot be displayed.

Screen readers may read out ugly file names for images without the alt text tag.

Alt text example:

HTML Code

<img src="img_file.jpg" alt="Image Description" width="500" height="600">

Ideal Format

Always be as specific as possible with your alt text. Use proper sentence structure and proper grammar. Never use all caps and avoid abbreviations if possible. Also, never use a generic description such as “image” or “photo.”

<img src="img_file.jpg" alt="Image Description" title="Image Description as title">
Mona Lisa painting illustration

As you can see that the image on the left is an illustration of the Mona Lisa painting.

Thus, if you have to add an alt text to this image instead of marking it as Mona Lisa or Mona Lisa painting, you would be precise in specifying in the alt text that “Mona Lisa painting illustration”.

Why is alt text important?

Alt text helps users and search engines understand each and every image on the webpage much more clearly. Alt-text helps in three key places: (1) corrupt image, (2) hovering over the image, and (3) search engines.

1. Corrupt image

Due to technical or human error, sometimes the website images may get corrupted or deleted, and if these images were added to a webpage without an alt txt, it would end showing up as an error.

Adding an alt text to these images will ensure that even if the image does not visually appear on the webpage, the alt text will be enough to explain what the image is all about.

Mona Lisa painting illustration

2. Hovering over the image

In few cases, when it is tough to understand the image the alt text comes in handy, as when you hover over the image, it would show the users information about the image, as mentioned in the alt text. Make sure to add the title=”here” attribute to your alt tag to enable the alt tag when hovering over the image.

<img alt="alt text" title="Title of title text" src="https://www.image-url.com.png">

3. Search engines

Search engines will crawl your alt text tag to get a better understanding of the image. Based on which they will rank the image and also use the same to boost the overall webpage rank.

How to add alt text to your images?

When it comes to adding the alt text to your images, it totally depends on what types of content management system (CMS) you are using to manage your website. Let’s look at some of the ways to add alt text to few popular CMS’s.

1. Adding Alt Text in WordPress

To add the alt text to a WordPress website is fairly easy, simply add the image and from the left hand side panel, fill the alt text field with relevant detail of the image.

add alt text to WordPress

2. Adding Alt Text in HTML

Simply add the image code along with the alt text tag and the image description, as shown in the code below. The src is the source URL of the image and alt= defines the alt text of the image.

Here is code to add alt text in HTML.

<img src="img_url.jpg" alt="Image description goes here">

3. Adding Alt Text in PHP

Your alt tag for PHP will go in the img tag, here is PHP code to use to add alt text tag in PHP.

<img src="<?php $image_url='https://image-url.png'; ?>" alt="alt text description goes here" /> 

4. Adding Alt Text in JavaScript

Here is the code snippet below showcasing how to add alt text attribute in JavaScript.

<script> function set_alt_attribute(image) {   image.setAttribute("alt", image.src); } </script> <img src="my_image.jpg" onLoad="set_alt_attribute(this);">

Alt Text Frequently Asked Questions

Can I use the same image and alt text for multiple pages?

You can certainly use the same image on multiple pages if it adds value to the reader. But, you need to provide different alt text for each page that uses that image.

You can use the same alt text on multiple images on the same page, but consider that if you are using this tactic to stuff keywords into your pages, it may actually hurt your SEO if the text doesn’t read well or add value to the reader.

Why doesn’t the alt text appear on the image when hovering over it?

The alt tag text doesn’t appear on the image when you hover over the image because your alt text element is missing the title attribute. Here is an example of the title attribute placed in the alt tag element.

<img alt="alt text" title="Title of title text" src="https://www.image-url.com.png">

How long should the alt text be?

The ideal length for the alt description is about 1-3 sentences. If you can’t describe your image in that many sentences, then you might need to re-think your choice of images.

What is the purpose of alt text?

The main purpose of alt text is to provide a text alternative for the image in case the image doesn’t load properly for any reason. Search engines also use the alt tag to describe images when they are included in the SERP.

Can I use dashes in the alt text?

Yes, you can use dashes in the alt text. This is commonly done in long product descriptions that have a series of features or benefits.

What are some common mistakes with alt text?

Some common mistakes include not using an image, using all caps, not using punctuation, or not being specific enough.

Back to Top
Top