Alternative Text For Images

Images play a crucial role in increasing traffic and helping visitors understand your site's content. Therefore, everyone should understand the meaning of your images, regardless of whether or not they can see the pictures. And the best way to do this is by providing alt texts for the images in your site.

How to Include Alt Text in Images

You simply have to make use of the “alt” attribute when writing the code for your images. Here is an example of a code using the alt text.


<img src=”sky.jpg” alt=”blue sky with white clouds” />


As the example suggests, the value of the “alt” attribute should be the textual description of the image.

Why Use Alt Text

Here are some of the best reasons why it is a good idea to have alt text in images.

For Screen Reader Users

Screen readers are applications that enable users to hear the text contents displayed on the screen. This technology is used primarily by blind people. When an image in a page has an alt text, the screen reader will be able to read it. This lets the blind user understand the image’s content and purpose although he cannot see the image itself.

On the other hand, if an image does not include alt text, the screen reader would simply read the file name of the image. This obviously does not provide sufficient information to the user.

For Users of Text-Only Browsers

A web page containing images with alt text allows users of text-only browsers to read the description of the images in the page. Text-only browsers are applications that display a page’s text content and the text equivalent of non-text content.

When an image has an alt text, a text-only browser would display the text description of the image. The user can in turn read the image’s description. Otherwise, the browser would only display the file name of the image, which, similar to the previous example, does not provide enough information.

For Better Search Engine Ranking

A page containing images with alt text would have a higher chance for better search engine rankings. This is because search engine spiders use the alt text to match pages with keywords. Therefore, providing alt text for your images lets search engine spiders place your site in the correct category. This eventually leads to a higher place in search engine listings.

For Compliance with Web Accessibility Guidelines

You would be able to follow internationally recognized web standards once you include alt text in your images. The WCAG (Web Content Accessibility Guidelines) 2.0 states that non-text content should have text equivalents. Non-text content includes images.

So if you include alt text in your images, you not only adhere to web standards but are also making your site more accessible.

Exceptions to the Rule

Not all images should have text descriptions. If you have spacer images and decorative images in your site, you do not need to provide them with alt text.

You nonetheless have to put a null value to the codes for spacer and decorative images. This is done by placing alt=”” in the codes. Here is an example:


<img src=”spacer.gif” alt=”” />


How to Create Effective Alt Text

Include All Necessary Details

Try to provide all necessary information when creating alt text for your images. Examine the image and think of the appropriate statement to best describe it to someone who cannot see.

Some of the important details you should normally include are colors, shapes, important objects, and text if there are any.

Keep Alt Text Concise

Avoid providing alt text that is too lengthy and wordy. Screen reader users who need to listen to the site’s content would take a longer time to know the image’s description if it has a lengthy alt text.

To make alt text more concise, do not use the phrase “image of” or “picture of” as it is obvious enough. Also, you may want to focus on the important details of the image and skip the unnecessary ones.

Make Alt Text Adhere to the Page's Language

This simply means that the language of your alt text should be the same as the site’s language. Your alt text should be in English if your site is in English. The same goes with sites in other languages