What are image alt attributes?

Image Alt Attributes or Img Alt Attributes are used in HTML or XHTML documents to specify alternative texts for images that cannot be rendered. It can also be used by “screen reader” software so that a person who is listening to a content of a webpage (for instance, a person who is blind) can interact with the image element.

Simply put, they’re the “text equivalent” of an image content.

Why do you need to add image attributes?

It is imperative to add alt attributes to your image files for a couple of reasons:

• Computers and screen readers cannot analyse images, thus requiring a text attribute to help them interpret a non-text content. This way, users with visual and cognitive disabilities will be able to interact with the image contents.
• As search engines cannot interpret rich media files such as images and videos, an image alt attribute provides them with a semantic meaning and description to the rich media, thus helping them properly index and rank a page in the search results.
• Alt image attributes can also help images rank in the Google Images search results, which could help generate a significant amount of search traffic for certain visual products (though the conversion rates are usually much less suggesting low commercial intent).

Types of image alt attribute

Empty alt attribute

Used for decorative images which do not have any function, or does not express a concept related to the web content. Examples of images which use the empty alt attribute are horizontal rules, glyphs or spacer images.

Empty alt attributes can also be used for clip-art and stock images which are always next to the text description equivalent to the image.

Empty alt attribute structure:

<img src=”image_filename.png” alt=””>

Brief alt text attribute

Used for images which express a concept related to the text itself, such as photos of a product, event, people, or situations.

NOTE:  Some images may require a more detailed description than a brief alt text attribute can allow (you need to limit the brief alt text attribute to 125 characters only).  In this case, you’ll need to add a caption to provide more explanation about the image.

For more complex images, such as diagrams, graphs and screenshots, a longer brief alt text attribute is required, plus a caption that explains, in detail, what the image is all about.  

Brief alt text attribute structure:

<img src=”image_filename.png” alt=”short description within 125 characters”>

Title Text Attribute

This can also be used for images which expresses a concept related to the text itself, much like the images described in Brief Alt Text Attribute. These are much shorter than the brief alt text attribute as these are designed to display as a tooltip when the user hovers their mouse over the image. You can either place a brief description of the image or place a call to action.

Title text attribute structure:

<img src=”image_filename.png” alt=”short description within 125 characters” title=”your preferred image title”>

Functional image alt text attribute

Used for images that serve a function, such as buttons or navigation. There are three types of functional image alt text attributes:

• Widgets – These are used to communicate status information, such as weather updates.
• Buttons – These are used for clickable icons or navigation buttons on a webpage.
• Thumbnails – These are used for image thumbnails that redirect to its full-size version.

General alt text attribute structure for images with function:

<a href=”URL of target”> <img src=”image_filename.png” alt=”where the link should redirect e.g. Next Page”> </a>

Other tips

• It is a good practice to give your images a descriptive filename before uploading. For instance, if your image’s original filename is DC23400005.jpg, it’s best to rename the image file to yellow-rubber-duck.jpg. This will not only make it easier for you to find the images you want to upload, but also help Google understand the content of the image and the page.

• Do remember that “alt” attributes are contextual in nature. This means that the alt attribute you’ll use for the image will depend not only on what it is and how it functions on your webpage, but also on how it figures in with the other contents of a webpage.