Young People and MS

For a long time, I had been saying "Alt tag" instead of "Alt text".

You too huh?

As well as this, I never knew how to write image alt text.

I used to just keyword stuff the crap out of every image on the page!

This, of course, is not the best way to go about it.

This guide aims at helping you understand what image alt text is, it's purpose and the best practices for writing proper image alt text, consistently.

Let's get into it.

What is Alt Text?

Alt text, which is short for "Alternative Text", is the correct term for "Alt Tag".

Alt text is an HTML or XHTML attribute, used to describe the appearance and function of an element on a page.

You are probably wondering why I said "element", instead of "image", right?

This is because alt text is not unique only to images.

It is also required for area tags, optionally for input tags and previously applet tags, which are now deprecated.

Why is Alt Text important for images?

There are three main reasons why alt text for images is important. They include:

  1. Visually impaired users using screen readers will be able to hear the alt text of an image.
  2. Alt tags are displayed if the image file can't load.
  3. Alt tags provide context for search engine crawlers

Every image should ideally have an alt attribute, but it does not necessarily need to contain text. It can be an empty or null attribute.

When should Alt Text be left blank for an image?

Sometimes it's actually better not to include alt text. Though this depends on the type of image. Here are some types of images why you should consider leaving the alt text blank for.

Images used for design

Images used for styling such as lines, borders, spacers etc can be nulled (left empty) as their only purpose is design.

Example:
Code Snippet:
<img src="decorative-line.png" alt="" />

Sometimes it might be better to use a different element instead of a decorative image. For example, instead of using the image of a line as a spacer, you could use the <hr> tag.

Images that are used as part of a text link

You don't need to add alt text when using an image as part of a text link because it does not add any extra information.

Example:

Learn more about Chihuahuas
Code Snippet:
<a href="/chihuahuas.html">
<img src="chihuahua.png" alt="" />
Learn more about Chihuahuas
</a>

Images that are described by adjacent text

Images that are described by adjacent don't need alt text as it would be repetitive.

Example:

Sleeping Lion: Sleeping is
something a lion does around 18
to 20 hours a day!
Code Snippet:
<p> 
<img src="sleeping-lion.jpg" alt="" />
Sleeping Lion: Sleeping is something 
a lion does around 
18 to 20 hours a day! 
</p>

Images used solely for the purpose of making a page more visually appealing

Example:

Make sure you check out the London Eye when you visit London!
Code Snippet:
<p> 
<img src="london-eye.png" alt="" />
Make sure you check out the London 
Eye when you visit London! 
</p>

To summarise, if the image does not have a contextual purpose, keep the alt text empty.

How do I write good Alt Text for an Image?

In order to consistently write good alt text for any image, here are some points to consider each time.

  1. Describe the image as accurately but concisely as possible
  2. Include your keywords where naturally possible
  3. Never keyword stuff
  4. If an image is functional, write appropriate alt text
  5. Avoid using "image of"
  6. If the image serves no purpose contextually, use nulled alt text (alt="")

Best Practice for Image Alt Text

What does good alt text for an image look like? Here are some examples:

Sumatran Tiger roaring

Acceptable Alt Text:

<img src="tiger.jpeg" alt="Tiger" </a>

Good Alt Text:

<img src="tiger.jpeg" alt="Tiger roar" />

Better Alt Text:

<img src="tiger.jpeg" alt="Sumatran tiger roaring" />

Tying Boot Lace

Acceptable Alt Text:

<img src="laces.jpeg" alt="lace" </a>

Good Alt Text:

<img src="laces.jpeg" alt="Tying shoe" />

Better Alt Text:

<img src="laces.jpeg" alt="Tying boot laces" />