What is Alt Text and How to Add Alt Text to Images?

• To help visually impaired users
• Displayed on incompatible browsers
• Help search engine bots

For Visually Impaired Users

Generally users with visual problems use screen readers to translate the web page text to speech and listen to the content. Again images will become problem for the screen readers if they don’t have a text content associated with it. When alt text is used with images, screen readers will read this text as normal text content.

For Incompatible Browsers

When the browser cannot display an image due to any incompatible or momentary server issues the alt text attributed to that image will be displayed.

Alt Text in non-compatible Image

For Search Engine Bots

As search crawlers cannot understand images properly, alt text helps them to understand the meaning of an image and index in the database correctly. Search engines have separate crawlers for images and web crawling so that corresponding image or web search results can be effectively served to users. Adding alternative text to images is an essential part of optimizing images for search engines.

Syntax

Alt attribute is used as part of HTML image tag <img> when adding images on a web page. Below is the syntax of using <img> tag with alt attribute:

<img src="image URL" alt="short image description">

Adding Alt Text to an Image

Alt text can be added to any image using the above syntax as part of HTML image tag <img> attribute. But this is a time consuming tasks and most of site builders offer a simple user interface to add the text without changing HTML code. Here are two examples from Weebly and WordPress showing how easy it is to add alt text to images uploaded on a page.

On Weebly site builder, you can upload the image and just click on the image to open the popup shown like below. Alt text can be easily added in the desired text box.

Alt Text for Weebly Image

On self-hosted WordPress platform when you upload an image, there are options to add title, caption, description and alt text.

Adding Alt Text in WordPress

Guidelines for Alt Text

Alt text should provide an appropriate meaning of an image to make it meaningful for all the above-mentioned usages. Below are some basic guidelines for webmasters on how to add alt text to images:

• Alt text is required only for the meaningful images to be understood by users and search engines. For example, a tick mark image used for a bulleted list in a web page really does not need an alt text as “tick mark”. Similarly decorative images can have caption without alt text.
• Provide short, simple and meaningful text for images. Think what if the text to be entered in case the non-textual element cannot be used on that place.
• If the images contain words, it is good idea to use the same words as alt text.
• Ensure the alt text is inline with the main keywords of the entire article. Using irrelevant text for images will reduce the search ranking since crawlers think there is no relevancy between the images and the content of that page.