Why is alt Imagery Text Important?

Placing images into a webpage is simple; <img src="filepath" />.

'src' is the img tag attribute that provides the image link to the browser and hence allows it to be displayed.

But often the <alt> attribute is forgotten. And that's bad.

<alt> is a written description of the image which will be displayed if, for some reason your image is not.

This image of the guitar was placed using: A drawing of an acoustic guitar

<img src="images/icons/guitar.png" alt="A drawing of an acoustic guitar">

Note that you will need to add the <title> attribute to get tool tip text when you hover your mouse over an image; <alt> text is not displayed.

A short and accurate description is just what's needed and is one of the building blocks for a good Search Engine Optimisation (SEO) strategy.

Dont try to be too clever and stuff the description full of keywords as that will be penalised in the same way as not having an <alt> entry at all.

Beyond your SEO scores, using good <alt> descriptions allows screen readers to tell your visually impaired visitors what the image is showing. Bear this in mind if the description needs to be fuller to make more sense.

A number of utilities exist to help you test your website for compliance and user experience. This one is good for checking the <alt> entries on your site: www.feedthebot.com/tools/alt/ .

So remember to describe your images to make both users and Google enjoy exploring your site just that little bit more.

See more Knowledge articles