Bad, Good and Great examples of image alt attributes

and published
Green Ghost with text good and bad examples of alt attributes

The ALT attribute first came around to aid the visually impaired but since its release, it has been hijacked by the likes of Google, Bing and other search engines. Sadly many webmasters and SEO experts abuse the alt tag, in an attempt to increase their page rankings and for many years this worked, because of this, many impaired users have been frustrated with meaningless image descriptions. The alt attribute is commonly, but incorrectly, referred to as the “alt tag”.

The Bad Alt frustration

The frustration doesn’t just stop with blind people nor the visually impaired, people using an online Image Search such as Google’s Image Search, will often find pictures that have nothing to do with what they are looking for and obviously these images receive no clicks, no traffic and that means you’re effective losing customers or website visitors.

SEO Keyword Changes

Thankfully Google and other search engines do not put so much weight into important keywords appearing in the alt description of an image. Webmaster should treat ALT tags purely for impaired users but with good descriptions you hit both birds with one stone. A good description will tell both users and search bots the context of the image.

Webmasters no longer need to fear about their keywords appearing at the front of the alt, at the end of the alt or even not appearing at all. Search engines can establish the contents and value of the page with many other elements such as: <title>, <meta>, <h1> and <p>, in fact Google and Bing can make sense of content with little or no markup, HTML markup just helps them understand a little easier but in no way is it absolutely required.

Sadly, it is the year 2017 and we are still seeing SEO guides mentioning things like the importance of keywords in Alt tags, key word density, headers and so forth, all these things that really mattered, no longer matter as much at all. You only need to take a good look at Pro Webmasters, excellent rankings… which is filled with thousands of pages with less than 90% of them having any images at all and with hardly any HTML optimisation within the user generated content areas of these pages.

Good usage of the ALT attribute is composing the image ALT value that consists of a short description that informs users the context of the image. Sometimes describing less is often more and other times more is more! Your descriptions should contain the elements of the image that you want them to visualise, it is not for telling Google to rank THIS because of this KEYWORD. Treat the ALT tag as a solution for partially impaired, completely impaired or for users that have disabled images in their browsers.

We are truely living in a era where HTML markup means so little and user experience/accessibility means everything!


Examples of Bad IMAGE Alt Attributes


1. BAD! Example Using: alt=”responsive website design”

Visually Fit Users & Image Search Users

responsive website design illustration on a apple mac screen

Visually Impaired Users Expect

plain image with text responsive website design

2. BAD! Example Using: alt=”website design”

Visually Fit Users & Image Search Users

sketch of the process of a website design

Visually Impaired Users Expect

plain image with text web design process

3. BAD! Example Using: alt=”website design services”

Visually Fit Users & Image Search Users

Visually Impaired Users Expect


Examples of OK, Good & Great IMAGE Alt Attributes


In this example, we will take a look at writing a short but detailed and SEO friendly image alt description.

To the left on your desktop or above on your mobile you can see the master image that we will be embedding on the page and later you will be able to see what users see and what the search engines or impaired users will see.

The image name of this example is: lady-running-in-a-marathon.jpg

OK! Example Using: alt=”ladies running a marathron”

Visually Fit Users

Visually Impaired Users

Image Search Users

As you can see from the alt attribute example above, the normal site visitor will see a lady marathon runner yet both impaired users and search engines see lots of ladies runners due to the misleading alt tag usage. So, lets fine tweak that ALT attribute to something more detailed which will give search engines a better idea what’s in the image and so that impaired users have more to visualise on.

GOOD! Example Using: alt=”a blond woman running in a marathron”

Visually Fit Users

Visually Impaired Users

Image Search Users

The new usage is a far better match and is perfectly acceptable by all parties, but there’s still room for a little more improvement. Let’s crank the detail of the alt description on the image up!

GREAT! Example Using: alt=”a blond woman in black running in a marathron”

Visually Fit Users

Visually Impaired Users

Image Search Users

This image alt attribute is far better than the previous two because it allows the impaired user and search engines to visualise some detail of the runner. While it’s not a perfect match as you can see, you will never get a perfect match, each impaired user will visualise pictures differently and search crawlers have no eyes.

Obviously you could go even further and add alt descriptions about the surroundings but then you run the risk of dampening the user experience for impaired users. A good alt description is one that looks like a short but readable sentence.

Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>