Categories: HTML, Tutorials

The alt attribute was first introduced in HTML 2 (1995), so it’s been with us for an awfully long time. This little three-letter attribute is so important; not only does it help with Search Engine Optimisation (SEO), but it also improves the accessibility of your site.

Alt attributes and accessibility

Accessibility on any site is vital, and alt attributes help by offering a readable text version of an image. If a user has to use a screen reader (for example, due to visual impairment) then they will have the alt text read to them. This means that the text you put into your alt attribute needs to make sense.

Good Examples

Three potted plants suspended in the air near a window.

“Three potted plants suspended in the air near a window.”

This is clear and concise, and tells us exactly what is happening in the picture. By including the fact that the potted plants are suspended alleviates any ambiguity as to where the plants are situated.

A refreshing glass of water with sliced lemon and mint.

“A refreshing glass of water with sliced lemon and mint.”

Whilst including the fact that the drink is refreshing is subjective, it may be useful if the site is about a person’s wellbeing, or mental health. Only include adjectives if it makes sense within the context of your site.

Bad Examples

A coast guard rescue boat

“Boat.”

There just isn’t enough information here about the image. Yes it’s a boat, but what time of boat is it? Depending on the context of the site, the location and type of boat may be important. If they’re not, include detail about the appearance of the boat, whether it’s decrepit, etc. For example, in my alt attribute above, I have added “A coast guard rescue boat”.

The word RESOLUTIONS spelt out in Scrabble letters

“The word RESOLUTIONS spelt out in Scrabble letters. The R is worth 1 point, the E is worth 1 point, the S is worth 1 point, the O is worth 1 point, the L is worth 2 points, the U is worth 3 points, the T is worth 3 points, the I is worth 1 point, the N is worth 1 point. In total the word scores 15 points.”

This is just unnecessarily long… Alt text this long belongs in a caption, rather than an alt attribute – especially if the information is important. Ideally, just the first sentence should be used. It’s important not to make your alt text too long. It needs to be as succinct and descriptive as possible.

Alt attributes are an alternative to an image, and the text should reflect the nature of the image; for example, an error icon should state “Error!” rather than a literal description of the image (“Red circle with a white X inside” for example).

If you don’t include your alt attribute then screen readers may spend an eternity reading out the URL for an image. Decorative images may not need any content within their alt text, so an empty alt attribute should be used rather than excluding it completely.

How the alt attribute aids your SEO

Bots can’t read an image; however, they can read alt text. As long as you choose a logical file name, and sensible text for your alt attribute, it will help improve your SEO as it helps to explain why the image is relevant.

Be aware, that if you copy text from another section of the same page and paste it into the alt attribute, it can be detrimental to your SEO. This may occur because it looks like copied content and the bots crawling your site may think that you’re purposefully spamming the phrase.

What your alt attribute should not do

Ie7_alt_as_tooltipIn early versions of Internet Explorer, the text within an alt attribute was rendered incorrectly as a tooltip. This caused some developers to misuse it when they wished to display additional information about the images, rather than using the correct title attribute. This was rectified in Internet Explorer 8.

Leave a Reply