Why you should never ignore the alt attribute

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.

What is the Alt Attribute?

The alt attribute is a bit of code which gets added to your image to allow screen readers and search engine crawlers to understand what the image is. Below is an example of how you would add the alt attribute to your HTML.

<img src="image_url.jpg" alt="Alt attribute text goes here" />

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 (e.g. “Red circle with a white X inside”).

Context is also incredibly important when thinking about the text to add to your alt attribute. The detail you add needs to correspond to the content of the rest of your page.

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 text within their alt attribute, so an empty alt attribute should be used rather than excluding it completely.

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 (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 within the context of your page.

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 gives the search engine crawler a broader picture of the content on your page, and website as a whole.

Be aware, that if you copy text from the same page and paste it into the alt attribute, bots crawling your site may think that you’re purposefully spamming the phrase and thus it can be detrimental to your overall SEO score.

Good Examples

A single potted plant on a windowsill

This is clear and concise, and tells us exactly what is happening in the picture. By including the fact that the potted plant is on its own, alleviates any ambiguity as to how many plants there are.

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 well-being, or mental health. Only include adjectives if it makes sense within the context of your site.

Bad Examples

Boat

There just isn’t enough information here about the image - plus, I'd argue it's a ship, not a boat. Depending on the context of the site, the location and type of ship may be important. If they’re not, include detail about the appearance of the ship, whether it’s decrepit, etc. For example, a better alt attribute here could be "A white cruise ship named Seaborn Quest".

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.

In Summary

Don't forget the alt attribute!

Even if its left empty, those with screen readers will thank you! And if you are adding text, make sure it's relevant to the content.

Photo Credits

A single potted plant on a windowsill
A refreshing glass of water with sliced lemon and mine
A white cruise ship named Seaborn Quest
The word RESOLUTIONS spelt out in Scrabble letters

Comments

[Mateus Amorim]

And for captions, we can use the HTML tag

 <figure>
  <img src="someimg.jpg" alt="some alt text">
  <figcaption>Some description</figcaption>
</figure> 

Depending on your html structure and the importance of the caption, you may also do it like this:

<img src="assets/someImg.jpg" alt="" aria-described-by="description">
//...
<p id="description" >
  //...
</p>

[Mateus Amorim]

It is also interesting to mention that this could be valid to assertive tecnologies:

<div role="img" aria-label="Something you would place in an alt attribute that describes the entire image">
   <img src="./assets/img1.jpg" />
   <img src="./assets/img2.jpg" />
</div>

Assertive technologies will treat it as a black box and use the aria-label instead.

btw, it seems like the "resolutions" image alt was not included in the post text, just the image element.

[𝐍𝐚𝐭𝐚𝐥𝐢𝐞 𝐝𝐞 𝐖𝐞𝐞𝐫𝐝]

Ah! Thanks for pointing that out to me! I'd added it to the actual alt attribute, but not included it in the copy beneath.

And thanks for your comment on aria-label's! There are now so many ways of making your site accessible - for this post I wanted to touch on the absolute bare minimum.

[T.Hunold]

Alt is required to be a valid tag.