Alt Text

What is alt text?

Alt text can be defined as a snippet of descriptive text-based substitute for non-text content, or an embedded piece of HTML code that conveys the meaning and context of a visual item (photos, graphics) in a digital environment such as web pages, PDFs, or apps.

Originally, alt text was developed to improve the internet browsing experience for the visually impaired as the screen reader describes the function and appearance of a photo or graphic they cannot see. This is still the primary function of alt text.

In the present time, the crucial function of alt text is also to enable an accurate appreciation and acknowledgment of the website images for an appropriate search response by the search engines.

Alt text is usually the text that shows up when you hover over any image or digital asset.

Some common synonyms for alt text are:

• alt description
• alt attribute
• alt tags

Importance of alt text

A well-written, descriptive alt text dramatically reduces ambiguity and improves user experience. Some benefits of including alt text for digital documents and websites are as follows:

1. Improved digital accessibility : 

Including accurate and comprehensive alt text to digital assets (images, graphs, etc.) ensures accessibility to all users, regardless of any disabilities or visual impairments.

Alt text is displayed in place of images in browsers if the image file fails to load, or when the user has blocked images. In the below example, a descriptive alt text is displayed in case of a broken image:

2. Improved SEO: Although the search engine technology has improved drastically over the years,  still the “search crawlers” can’t see images as we do. Adding a target keyword phrase to the alt text can:

Help images and graphics rank better on organic search

Help digital documents such as PDFs rank better than the ones without alt text.

Having better search rankings, and images, by themselves, can help attract substantial traffic from search engines like Google and Bing.

3. Improved overall user experience: For every organization, it is important to provide the best user experience to the people who visit their websites. Including alt text to images, graphs, and documents to provide a better image context ensures relevant user interaction hence improving the overall experience.

How to write good alt text

Writing a good alt text is an art in itself. Let’s see what it takes to master this art of writing accurate alt text:

1. Be specific:  Alt text is primarily designed to provide text explanations of images for users who are unable to see them. So, it is important to stick to relevant content. One of the best approaches is to “think how you would, in short, describe the image over the phone” and then come up with an appropriate alt text.
2. Keep it concise: A few words usually are enough; although sometimes full sentences could be required. Keep in mind that most popular screen readers cut off alt text at around 125 characters, so it’s best to stick within that limit.
3. Use your keywords: It is a good practice to include one or two target keywords in the alt text. This gives more scope to signal to search engines that your page is highly relevant to a particular search query.
4. Avoid keyword stuffing: It’s advised to avoid keyword stuffing as Google can recognize the usage of too many keywords and can bring down the search ranking.
5. Don’t use images as text: A general SEO-friendly web development suggestion is to avoid using images in place of words. If it’s required, explain what your photo says within your alt text.
6. Avoid using “image of,” “picture of,” etc.:  It’s already understood that the alt text is referring to an image, so there’s no need to specify it.
7. Include longdesc=””:  Try to include the longdesc=”” tag for more complex images that may require a longer description.
8. Don’t ignore form buttons: If a form on a website uses image buttons, then it should have an alt attribute that describes the function of the button like, “search”, “apply now”, “sign up,” etc.

Examples of good alt text

Let’s take a look at some of the examples from Moz for a good alt text:

Okay alt text: <img src=”bird.png” alt=”Rooster”>

Better alt text: <img src=”bird.png” alt=”Rooster crowing”>

Best alt text: <img src=”bird.png” alt=”Red-crested rooster crowing”>

Okay alt text: <img src=”escalator.jpg” alt=”man on escalator”>

Better alt text: <img src=”escalator.jpg” alt=”man walking on escalator”>

Best alt text: <img src=”escalator.jpg” alt=”man wearing backpack walking down escalator”>

When to use alt text

It is important to add alt text to the below mentioned digital assets:

• Images and pictures
• Diagrams, flow charts, and graphs
• Videos

When not to use alt text

In some cases, including an alt text is not required. One of them is:

• Decorative visual objects – eg. stylistic borders

How to add alt text to a Microsoft document

For instructions on how to add alt text to Microsoft documents such as Outlook, Word, Excel, and PowerPoint, read here.

How to add alt text to objects in WordPress

Follow these instructions to add alt text in a CMS like WordPress.