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.
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”>
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:
Last of all, many people are sight-impaired. The alt attribute is very important for this user group in particular.
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 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:
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.
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.
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.
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.
No related posts.
Dieser Artikel wurde am 17.May 2018 von Jan Knupper geschrieben.
We are using cookies to give you the best experience on our website.
Find further information in our data protection policy. Change cookie settings.
Cookies are small text files that are cached when you visit a website to make the user experience more efficient.
We are allowed to store cookies on your device if they are absolutely necessary for the operation of the site. For all other cookies we need your consent.
You can at any time change or withdraw your consent from the Cookie Declaration on our website. Find the link to your settings in our footer.
Necessary cookies help make a website usable by enabling basic functions like page navigation and access to secure areas of the website. The website cannot properly without these cookies.
If you disable this cookie, we will not be able to save your preferences. This means that every time you visit this website you will need to enable or disable cookies again.
Any cookies that may not be particularly necessary for the website to function and is used specifically to collect user personal data via analytics, ads, other embedded contents are termed as additional cookies.
Please enable Strictly Necessary Cookies first so that we can save your preferences!