ALT Attributes

From Seobility Wiki
Revision as of 10:04, 14 March 2019 by Techteam (talk | contribs) (Created page with "<seo title="ALT Attributes" metadescription="Definition ✓ Purpose of the alternative text ✓ Specification in HTML code ✓ Requirements ✓ Difference to TITLE attribute...")

(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to: navigation, search

Definition

ALT attributes are part of the HTML standard. They can be used to specify alternative texts for images that are included in web pages. They play an important role in search engine optimization (SEO) and in barrier-free, handicapped accessible websites.

Purpose of the alternative text

Images and graphics are important elements in web design. They often convey complex interrelations better than written descriptions, summarise what is written vividly and make a page look more appealing. Background images, logos, and banners, as well as frames and other decorative graphics, are indispensable for aesthetics. In addition, many images are stand-alone content in which website visitors are directly interested - for example, photos on Instagram or in an online gallery.

However, not all internet users are capable of seeing images and also search engines only understand graphic content to a limited extent. ALT attributes solve this problem by providing a textual alternative to an image. Web browsers and other programs use this text if the corresponding image cannot be displayed, seen or understood. Even with defective or otherwise not displayable images, no information is lost and visitors still know what the graphic is about. Thus, ALT texts improve the usability of a page and make it more user-friendly.

In detail, ALT attributes are used in the following cases:

  • Screen reading programs for the visually impaired read the alternative text aloud.
  • Search engines such as Google analyze ALT texts to find out what is visible on an image.
  • In the case of broken image links or unsupported file formats, web browsers display the ALT attribute.
  • Some Internet users turn off the display of images in their browser to speed up page loading or save data volume. In these cases, web browsers also display the alternative text as can be seen in the following screenshot:

Example for the display of an ALT attribute on a website

Screenshot of an ALT attribute on telegraph.co.uk

Search engines attach great importance to the quality of ALT texts, as they help them to understand an image and the overall page. This enables them to correctly categorize image and page content. In addition, they rank barrier-free and generally accessible websites higher. Therefore, the attribute is very important from an SEO point of view.

In addition, good alternative texts improve the ranking of images in Google’s image search. Especially graphics that have a strong relation to the page content generate more traffic because they draw additional users from image search to the actual website. If images are particularly relevant for a certain search term, they may even be displayed in organic search results and thus bring more traffic to a website. With regard to SEO, ALT attributes are therefore indispensable.

Specification of ALT attributes in HTML code

ALT is a mandatory attribute in HTML. Although most browsers ignore missing ALT attributes, they are mandatory for all IMG tags of a standards-compliant webpage. Therefore, the HTML code for images should at least look like this: 

<img src="imagefile.jpg" alt="alternative text"/>

The attribute should also be used for purely decorative images such as decorative graphics, background images, lines or frames. However, the alternative text should remain empty in this case, since such an image has no meaning in terms of content: 

<img src="background.jpg" alt=""/>

Voice output systems and other handicapped accessible assistance software ignore such IMG tags with an empty ALT attribute.

Requirements for ALT attributes

The HTML standard stipulates that alternative texts should be an appropriate and complete substitute for the graphic content of images. Ideally, ALT attributes should, therefore, contain neither additional content such as further explanations nor titles or captions. They are only intended to provide a textual description of the image content so that a page can be understood even without its images and still has the same information content.

These requirements do not contradict the requirements for ALT attributes with regard to search engine optimization (SEO). In some ways, search engines are also blind to graphical content, so they benefit from similar ALT texts as visually impaired people. A good alternative text is thus equally useful for blind people, search engines and users who have turned off the display of images.

However, even a perfectly optimized ALT attribute can't hide deficient content on a web page. Misuse of the alternative text, therefore, does not help SEO and can - in the case of keyword stuffing - even be counterproductive, as Google and other search engines punish such SEO practices.

Suitable alternative texts for different image types

The optimal content of a high-quality ALT text depends largely on the purpose and content of an image. A good starting point is the question of which text would replace the image if it did not exist in the first place. In addition, a differentiation into the following image types can help to formulate the right ALT attribute for SEO:

  • Independent images: graphical content that stands for itself. For example, photos in galleries and albums, demonstrative screenshots of applications, "fun pictures", pictures to download or buy and the like. The alternative text provides a short but meaningful description of the image including the most important keyword for image search SEO.
  • Inline images: These graphics replace single or a few words for aesthetic or space-saving reasons. This includes smileys and emoticons, symbols and icons as well as simple pictograms. The corresponding ALT attribute contains the text that the image replaces - for example, "grinning emoji" or simply "grinning".
  • Explanatory image: graphs, statistics, explanatory screenshots. If a graphic only summarizes the surrounding text without providing new information, the ALT text remains empty. Otherwise, it contains a short version of the image content. For longer explanations, the normal continuous text is more suitable because it is useful for all visitors.
  • Decorative graphics without informational value: background images, frames, lines and the like. Since these images are used exclusively for visual aesthetics, they are provided with empty ALT attributes.

Difference to TITLE attribute

Among web designers, there often is uncertainty about the difference between ALT and TITLE attributes. While ALT can only be applied to IMG tags, TITLE is a universal attribute that’s supported by most HTML elements. Its purpose is to add comments, short explanations, or additional information. Web browsers display the TITLE as a tooltip when the mouse pointer is on it. Due to their importance for accessibility and usability, alternative texts are more important for SEO than image titles. Therefore ALT is a mandatory specification, whereas TITLE is only used sparingly and prudently.

Related links

Similar articles