Why alt-text is so great for SEO and accessibility

The alt attribute (sometimes called alt-text) is part of the code we use to display an image on a website. It’s the part that actually says (in words) what the image is actually of.

Adding this attribute to images has to be part of your image optimisation strategy, which will help your SEO, as well as the accessibility of your website.

It doesn’t matter whether you’re hand-coding your site or using software like WordPress, Squarespace, Drupal, Wix, or something else, you still 100% MUST use alt text.

It might seem a bit unintuitive to have to do that, considering that the other main attribute on an image tag is src (source), which is the actual image file itself.

For those who aren’t familiar with HTML, this is the code we use to display an image on a webpage:

Here’s a picture I took of Bruce Springsteen a few years ago. For those playing at home, the gig was at Rod Laver Arena in Melbourne on 24 March 2013 and was sensational.

We’re going to use this picture, and it’s underlying code, as examples.

The code that shows this image looks something like:

The src attribute on an image tag

Looking at the above code example, the src is where the file is on the server, as well as it’s file name. If the file was in a folder called images, and the file was called Bruce-Springsteen-live.jpg, then the value of src would be “images/Bruce-Springsteen-live.jpg“.

That would then display the image on the webpage, exactly as it has above.

So… why do I need alt text?

The image has displayed – why do I need to also type out what the image is of?

A few reasons, the most important being:

1. Accessibility
2. SEO
3. Image not loading

The alt attribute and accessibility

This is arguably the most important reason why you need an alt attribute.

People with little or no vision use screen readers to read out web pages to them. In some cases, a screen reader will actually transform the visual information on a web page to a braille reader.

If a screen reader is reading out a webpage, it has no idea what the image is, unless we specify it within the code.

One of the worst things you can do is have your alt attribute value to be the filename of the image, which some pieces of software do by default. I suppose it’s not so bad if your image has a reasonable file name (like Bruce-Springsteen-live.jpg), but with most images actually being called something like P1020029.JPG, then that’s not going to work at all.

If you leave off the alt attribute, some screen readers will actually read the file name instead, so again, don’t ignore your alt attribute.

With our alt attribute in play, the screen reader will say something along the lines of “picture of Bruce Springsteen and the E Street Band playing a concert”, as opposed to just saying “image”, reading the file name or saying nothing at all.

Now that a screen reader can actually tell your user what your images are of, I’m sure you’ll agree they’ll be far more likely to enjoy and revisit your site.

The alt attribute and SEO

When a search engine, like Google or Bing scan your webpage, they don’t necessarily know this is a picture of The Boss.

Due to the fact that we have our alt attribute correctly entered, the search engine now knows that this is, indeed, Mr Springsteen. In fact, they know that it’s Bruce Springsteen and the E Street Band playing a concert.

Google places a high value on the alt attribute to determine what the image is of, but also to help determine the topic of surrounding text.

The alt attribute and image loading

Images mightn’t load for a variety of reasons. You might have them stored on a separate Content Delivery Network (CDN) that fails. You may have made a typo while putting in the src attribute. Your images also may not load if they’re too big and your server is under heavy load.

Many users actually disable image loading to save on bandwidth. This is especially prevalent in areas with spotty coverage.

In any case, regardless of the reason, let’s pretend that something like that has happened and we’re looking at this page expecting to see Bruce.

What do we see? Yes, the value of the alt attribute:

Hooray.

What are the guidelines around alt text?

There is much to consider when writing alt text. Context and brevity are some.

What should the alt text say?

As far as the Web Content Accessibility Guidelines (WCAG) are concerned “All non-text content that is presented to the user has a text alternative that serves the equivalent purpose, except for the situations listed below. (Level A)“.

The ‘situations listed below’ include decorative images, CAPTCHA and input controls – things that don’t concern us for now as we’re talking about images that make up the content of our page.

In the case of the image being a photo, logo, drawing or something else that adds to the written content, then the alt attribute is required. The value of the attribute should be short, yet descriptive. I think “Bruce Springsteen and the E Street Band playing a concert” is actually pretty good.

Other examples might be:

What alt text shouldn’t say

While it might be tempting to stuff your alt text full of SEO friendly keywords, or the title of your page or blog post, this is an absolute no-no. It will confuse your users, and Google doesn’t look too highly on it either.

Other information that has nothing to do with the actual photo should also be left out. Things like the photographer’s name, the date the photo was taken etc should not appear here. If this information needs to be conveyed, then do it as a caption to the photo.

Don’t write too much in your alt text

Although we need to be descriptive with our alt text, don’t go overboard.

“Bruce Springsteen and the E Street Band playing a concert” is a perfectly adequate alt text for this image:

Something like “Bruce Springsteen playing a Fender Telecaster while on stage with E Street Band on the 2013 Wrecking Ball tour at Rod Laver Arena in Melbourne” is probably a little too much.

Alt text is context dependent

An image within an article will generally have some sort of context to do with the text around it.

If our example article that this image appeared in was actually about Tom Morello (the strapping lad to the left of Springsteen), then the alt value should probably be something like “Tom Morello playing guitar with Bruce Springsteen live in concert.”

Complex images

There are some situations where being brief isn’t actually best practice. Things like charts and graphs do require a longer explanation than could be done with a picture of Bruce Springsteen.

There are a few options when you’re faced with complex images.

1. Provide an explanation within the page content

The ideal solution is to provide a description of the complex image within the page content. This would need to be directly before or after the image.

In this example, there is a graph showing browser market share from January 2009 to January 2010. To be an accessibility superstar, you would talk about the graph within the content of the page. Maybe something like:

The graph shows browser market share in Oceania between January 2009 and January 2010

• Internet Explorer: 55.96%.
• Firefox: 32.18%.
• Safari 6.21%.
• Chrome 4.07%
• Opera: 1%.
• Other: 0.57%

By adding this description to the page content, everyone has all the data, even if they don’t even see the image.

In the example, above, the alt value would be alt=”Browser market share in Oceania between January 2009 and January 2009.”

2. Use the longdesc attribute

If adding all that extra explanation is just too much for your design, or the data itself is too detailed to be able to add it to the page content, then you can use the longdesc attribute.

Now, the longdesc attribute has a chequered past, and is a little contentious, in that it used to be in HTML4, was deprecated in HTML5 but is now back on the table. The end result is that no browser will do anything with your longdesc attribute, but screen readers will apparently more than likely abide by it.

The longdesc attribute could have an article all to its own, which might well be an option down the track.

As its name might imply, longdesc means long description, and there are a few ways to use it. Contrary to popular belief, the value of the longdesc attribute isn’t for the long description itself, it’s for a URI to where the longer description is.

Example of longdesc

What if the image isn’t of anything?

A purist would say that these sorts of images should only be loaded via CSS, and although I do agree with that, I think this is a time to choose your battles. If you’re puritanical about things that don’t really matter, you end up in a world of pain. There’s a motto for life by the way, free of charge from me to you.

So really – if you want to load images like that via your HTML, go for it. You still need the alt attribute, but leave its value empty:

.

Examples of those situations might be some sort of decorative divider that has nothing to do with the content of the site at all. As an example, the following image has no at text value (but it does still have the attribute).

Now you can be an accessibility hero, and don’t leave that alt text blank when you really have something to say. You put those images on your website for a reason – make sure all your audience can enjoy them.

If you want even more SEO and accessibility tips and tricks, why not book in a workshop?