The alt attribute – for SEO and accessibility

17.05.2018

alt attribute

The alt attribute is used to more specifically describe the content of a graphic image on a website. It consists of only a few text characters, but their significance is often underestimated. The purpose of the alt attribute is not only to ensure accessibility; it is also an important SEO factor.

What is an alt attribute?

The source text of a website consists of HTML (Hypertext Markup Language). This markup language instructs the browser to display text passages, images, videos and other elements. Every element, including graphics, can be provided with additional information, as in the following example:

<img src=”flower.jpg” alt=”Flower in garden”>

Note:

  • The angle brackets describe the beginning and the end of an HTML element.
  • The relevant element in this case is an image (img).
  • The flower.jpg, file is designated with the attribute src (for source).
  • The attribute alt refers to the content of the text (“Flower in garden”).

The short word alt stands for “alternative”. The alt attribute for instance ensures that in the case of a loading error, an alternative text appears instead of the missing image. But why aren’t images displayed? There are various explanations:

  • The image is not on the server.
  • Outdated browsers cannot display some types of images.
  • The user has adjusted the browser in such a way that images cannot be displayed.
  • A large image file requires a long loading time – this is why many users decide to exit the page before the full image has been downloaded.

Last of all, many people are sight-impaired. The alt attribute is very important for this user group in particular.

Alt attributes make images accessible

The alternative texts for visual content, such as texts and images, are indispensable for the sight-impaired. A screen reader cannot capture the content of an image solely based on the file. Seen from this angle, exactitude, concision and avoidance of redundancy in the description of the image play a decisive role. Very long texts are therefore just as superfluous as the comment that the description refers to an image (“image of a flower”). When writing a text describing an image, it is important that it fits in the overall context of the paragraph, which the image refers to.

In the case of pure functional graphics (for instance an arrow that leads to the next page), the text also ought to confine itself to the description of the function. It is therefore advisable to use the same text in the <img> tag as in the title attribute in the <a> tag for the alt attribute:

<a href=”page2.html” title=”next page”><img src=”arrow.gif” alt=”next page”></a>

If an image is only used for decorative purposes one still ought to set the alt attribute, however with an empty content:

<img src=”black.gif” alt=””>

In doing so, the user of a screen reader immediately realizes that the image fulfills no contextual purpose. The user is not delayed by unnecessary information provided by the screen reader.

If the image is also a link, the title attribute should not be placed within <img>. The alt attribute is sufficient here. The title attribute belongs in the anchor tag (<a>), which is responsible for linking. This approach ensures that the goal of the link is displayed as tool tip in most browsers. In an image, the title attribute within <a> supersedes the anchor text in a text link.

The practical significance of the alt attribute

The importance of the alt attribute is often underestimated – this also applies to the significance of the alt attribute for SEO. This is because the source text of a website is decisive for the search engine robots. An alt attribute provides important details about an image as such, as well as about the overall context of a website.

Earlier versions of the Internet Explorer displayed the content of the alt attribute as a tool tip – an effect that is actually carried out by the title attribute. However, the way browsers deal with the alt attribute is standardized today. Programmers and designers therefore apply the following rule of thumb:

  • The alt attribute describes the content of the image.
  • The title attribute can be used to provide additional information.

In case of doubt, one ought to dispense with the use of title attributes in images and select a suitable image caption instead. For HTML5, the newest HTML version, it is the <figcaption> tag. The advantage is that the image caption is always displayed, and it can be read by screen readers.

Optimizing alt attributes

Initially created as a technical help tool and for accessibility, today the attribute is also important for SEO experts. Search engine robots are guided by the source text of a website – this also applies to the rating of a graphic. This is why alt attributes play such an important role for SEO – not only for image searches on Google.

When optimizing alt attributes one ought to start by orienting oneself towards Google image search. A comprehensive, yet brief and clear description of the image content improves the ranking here. When the main keyword appears in the URL, in the H1 header and in the description of the image, the file has a good chance of appearing in the top results of Google image search.

  • Important: The size of the file also plays a role in image optimization. Large, high-resolution images ought to be avoided where possible to minimize the loading times of the website. If the image does not load quickly enough, the bounce rates are high. The bounce rate is a decisive ranking factor.

The alt attribute is part of an overall search engine optimization when the goal is to increase the relevance of a website for a specific keyword. Google gives positive ratings to websites that cover a subject to the fullest extent.

Summary: Small, but effective

The alt attribute is more than just a mandatory element for programmers who want to write a rule-consistent HTML text. The alternative text for an image helps people who rely on the use of a screen reader on the Internet. But the correct alt markup of an image file is also important for SEO purposes. It is particularly useful when it comes to creating a well-designed website and, in turn, achieve good positions on Google.

 

Dieser Artikel wurde am 17.May 2018 von Jan Knupper geschrieben.

avatar

Jan Knupper

Jan Knupper is an independent author and writes for clickworker