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:
<img src="img_file.jpg" alt="Image Description" width="500" height="600">
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”.
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.
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.

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">
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.
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.
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.
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">
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" />
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);">
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.
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">
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.
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.
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.
Some common mistakes include not using an image, using all caps, not using punctuation, or not being specific enough.
2768 Bailey Rd, Sun Prairie, WI 53590
Comments are closed.