Alt Text — What, Why, How & FAQs

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">

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.

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.

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);">