What Is The Alt Attribute?

Date First Published: 24th August 2022

Topic: Web Design & Development

Subtopic: Web Development

Article Type: Computer Terms & Definitions

Difficulty: Medium

Difficulty Level: 6/10

CONTENTS

Why Is The Alt Attribute Used?
Example Of The Alt Attribute
How To Write Good Alt Text? - Dos and Don'ts

Learn more about what the alt attribute is in this article.

Short for the alternative attribute, the alt attribute is a HTML element used to specify the alternative text that will display when an image fails to load, due to an invalid file path, slow internet connection, or a removed or renamed image file. The alt attributes often include text that describes the image and can be seen in the HTML source code. The alt attribute was introduced in the HTML 1.2 draft to support text-based browsers and in HTML 4.01, it was required for the img and area tags.

Note:

The alt attribute is often incorrectly referred to as the 'alt tag'. It is incorrect to call it the 'alt tag' as it is not an actual HTML tag, such as <p>. It is an attribute that appears within the img and area tags. More information about examples of the alt attribute can be seen below.

Why Is The Alt Attribute Used?

The main reason why the alt attribute is used is for web accessibility reasons. Some users who browse the web have visual impairments and are unable to visually identify an image. Alt attributes can be read out by screen readers that convert text to speech so that they can understand what the image is about. In addition, users who choose to block images, usually due to low or expensive bandwidth will be able to understand information about the image.

The alt text is also available to technologies that are unable to see images, such as search engine bots. It will provide image descriptions to them, helping them to properly index an image. Search engines can crawl and rank images better when they have the alt attribute, which is good for image SEO. Whilst search engine recognition technology has improved over the years, search engines cannot see and interpret images as people do, so it is a bad idea to leave them to interpret images on their own.

Example Of The Alt Attribute

In this example below, the image of strawberries will display the specified alt attribute when it fails to load. See below how the alt text displays in your web browser.

How To Write Good Alt Text? - Dos and Don'ts

The dos:

Properly describe the image with the alt text. This text is designed to provide clear descriptions of images to people who cannot view them. If the description was unclear, people would never know what the image was about.
Include target keywords - Alt text gives webmasters another opportunity to include their target keywords onto the page and signal to search engines that their page is relevant for a certain search query.
Leave alt text blank if the image is solely used for decoration, such as the background image. The W3C recommends that images that provide no information, but are entirely decorative, should be specified in CSS rather than in the HTML markup.
Keep the alt text relatively short - Alt text should never be longer than 125 characters. After around 125 characters, it was recommended that popular screen readers cut alt text off.

The don'ts:

Keyword stuff - Using alt text for the purposes of manipulating the search engine ranking of a site by stuffing in as many keywords as possible and repeating them can cause websites to be penalised by search engines. Keyword stuffing is against the webmaster guidelines of most search engines.
Use images as alt text. Avoid using images in place of text as search engines cannot read text embedded into an image.
Include 'image of', 'picture of', or 'photograph of' in the alt text as it is already very clear that the alt text is referring to an image.
Use vague alt text, such as 'Image 1', 'Image 2', 'Untitled Image', or 'This is an image', as these are unhelpful and do not describe the image at all.