It’s common knowledge that placing alt attributes on images can help your users and boost your website’s rankings. So why are they so often ignored, abused, or incorrectly used, and how can you make them work for you?
Overview
The alt attribute (often incorrectly referred to as a ‘tag’) provides the ability for the owner of a web page to add extra information to images. Specifically, the alt attribute is designed to allow alternative content in the case that an image is unavailable or disabled.
This feature is particularly useful to visitors who rely on assistive technologies such as screen readers or text browsers, who may suffer from visual impairments, colour blindness, or simply have low bandwidth. There are many reasons why a user may not (or may choose not to) see an image on your website – the alt attribute provides a fallback which they may access instead. In an ideal scenario, the alt attribute should accurately describe the content and nature of the image, allowing the document flow to be uninterupted, and the experience of the user undiminished by the lack of an actual image.
There is also a common misconception that the alt attribute should provide a ‘tooltip‘ type popup when hovering over images. This behavior is demonstrated when using old versions of Internet Explorer browsers, but this is in fact an incorrect implementation, and this behavior is actually the domain of the title attribute. We will talk more about using the title attribute on images and other elements in a future article.
When it comes to SEO, search engines look at alt attributes to get an idea about the content of an image, which they may use as part of their ranking algorithms. Historically, search engines didn’t handle images very intelligently, and ‘keyword stuffing’ of alt attributes became an uncomfortable and widely accepted practice used to improve results at the expense of many users who rely on accurace alt attributes. Thankfully, modern search engines look at a much bigger picture – that of the surrounding content, the page focus and a variety of on-site metrics. The increasing difficulty of improving rankings by writing ‘spammy’ alt attributes has lead to a ‘back to basics’ approach, and many website developers are joining us in our position of focussing on quality, informative, well constructed alt attributes.
That’s not to say that ‘doing it right’ doesn’t have its benefits. In fact, by following the guidelines below, you’ll be providing a better experience for all your users, presenting yourself as an informative and authorititive source, and telling the search engines much more about your content. All this is great for usability, accessibility, and of course, SEO.
Best Practice
As mentioned above, the goal of the alt attribute is to describe the content of the image in such a way so as to provide non-visual, alternative content which may act replace the image without interrupting the document flow. With regards to SEO, we may also use it as an opportunity to build keyphrase relevance, and rank in image searches. However, this should be a secondary goal, and should in no way impare the quality of the alt attribute text.
Example – A Red Apple
The following image has an alt attribute of “Photo of a red apple covered with water droplets against a blue sky”. If I have images disabled, or the image fails to load, this text provides sufficient context to ensure that I still understand the concept of the image, and any information that it may convey to the viewer. It also uses keywords – ‘red apple’, ‘water droplets’ and ‘blue sky’ are all descriptive terms based on the image which may help search engines to gain context and improve search engine rankings of the image and the page.
[code lang="html" toolbar="false"]<img src="red-apple.jpg" alt="Photo of a red apple covered with water droplets against a blue sky" />[/code]
Example – An Image With Text
The following image contains text, which changes our approach. It has an alt attribute which reflects the textual content of the image; “Photo of the winning red apple in the Red Apple Competition”. Note that the alt attribute text does not match the exact textual content of the image, as this would not provide sufficient context – the text ‘this image…’ taken out of context without the actual image is not useful to visitors.
[code lang="html" toolbar="false"]<img src="red-apple.jpg" alt="Photo of the winning red apple in the Red Apple Competition" />[/code]
Note that when an image contains a large amount of text, or text not directly and contextually related to the actual visual content of the image, alternative implementation methods such CSS text replacement should be used. We will explore this in depth in a future article.
Example – An Image Within A Link
The following image is wrapped within an anchor tag – a link to another page. In this case, the image links to the fictional ‘Red Apple Shop’, where visitors may purchase red apples. The alt text in this case is “Visit the Red Apple Shop – Buy Red Apples”. When the image is the sole tag within a link, the alt attribute should be used to describe the link destination. When there is other content within the anchor tag that sufficiently describes the destination and provides contextual anchor text, the image may retain a more visually orientated description, as in the previous example.
[code lang="html"]<img src="red-apple.jpg" alt="Visit the Red Apple Shop - Buy Red Apples" />[/code]
Decorative Images
Generally speaking, in cases where images are used for decoration, CSS should be used rather than an actual image – however, this isn’t always practical. In cases where an image tag is used for purely decorative purposes (perhaps if we’re placing our red apple in the sidebar of a corporate site to convey a concept of ‘freshness’), and CSS cannot be used due to technical reasons, avoidance of bloated markup or oher layout constraints, then the alt attribute should remain empty.
[code lang="html"]<img src="image.jpg" alt="" />[/code]
Dealing With Captions
In cases where an image has a text caption either directly before or after it, it is not nescessary to add content to the alt attribute for the sake of avoiding duplicating information. In this case, the alt attribute should remain in the image tag, but the content left blank.
It may be argued that a better way of approaching situations like this would be to use javascript to extract the alt attribute content from the image, and use that text to create the caption when the page is rendered. Depending on your policy regarding javascript, the target audience of the site, and any technical limitations, this approach may prove the most efficient in terms of accurate implementation of the alt attribute.
The following code may be used with the jQuery javascript library in order to easily create captions based on the alt attribute content of any image within a #content element. It should be noted that for users with javascript disabled, the caption will not be created, but the alt text will remain in tact.
[code lang="js"]
$('#content img').each(function () {
var $this = $(this);
var title = $this.attr('alt');
$this.after('
<div class="caption">'+ title +'</div>');
});
[/code]
Summary
By providing accurate, informative and authoritive alt attributes, you improve user experience, accessibility, and give search engines more information to chew on. These are all benefits which drive an increase visibility and conversions, and provide real, measurable business results.
If you’ve found this article useful, or would like to know more, please don’t hesitate to comment below, or to contact us for more information.
