Talking Pictures: Using ALT attributes for accessible images

July 18, 2017  • 

Thanks so much to everyone who appreciated part one of my Accessibility Guide which covered forcing links to open in a new tab! I was really excited by the response, which is why I decided to just jump right into the next guide.

Accessible images is a less controversial topic than links, with basically everyone agreeing on how things should be done. Even Twitter included the functionality to add ALT attributes last year.

If you’ve ever seen an image in HTML, it probably looks like this:

<img src="imageURL.jpg" alt="Image description" />

The attribute at the end is the alternative text to the image. In the event that the image does not load, it will show that text. It also is the text that screen readers use to describe an image to somebody with a visual impairment. Using alt text is how we make accessible images.

Since HTML 4.0 the alt attribute has been required, meaning any image without it is invalid markup. However, while alt should always exist within your image, it should not always have content.

When to add a description to the alt attribute

If the image you are displaying has a context, i.e. it explains something on the page, it should have descriptive text within the alt attribute. For example, a recipe may have a photo showing a teaspoon of sugar being added to a bowl. The alt text for that image could then read “a teaspoon of sugar being added to a bowl.”

A social media icon should also have an alt attribute, however, in this case, you would not, for example, describe the Facebook logo as “a lowercase F within a blue square.” Instead, your alt text may read “Facebook logo” or simply “Facebook.”

When not to add a description to the alt attribute

Obviously, it’s quite easy to overdo the text added to an image. Remember, screen readers read the text but don’t necessarily understand nuance. Image alt text doesn’t need to repeat what was written alongside it. It shouldn’t be too verbose.

[bctt tweet=”Omit alt text for images which are purely decorative” username=”prettycontentco”]

Often SEO practices will encourage using alternative text to bash in a few extra keywords, however, this isn’t great for accessible images. What people need are concise descriptions, not filler text to appeal to Google. I will write a whole article on this and other ways in which SEO contradicts Accessibility soon.

You also should omit alt text for images which are purely decorative and do not provide context within the page. For example, you may have a pretty picture of a bunch of flowers in your post, but unless your post is about pretty flowers, describing this image isn’t necessary. In that case, you should still include an alt attribute, but leave it empty, such as:

<img src="imageURL.jpg" alt="" />

Alt attributes in WordPress

If you’re not coding your own images into your page, chances are you’re adding them via an interface, such as the Media library on WordPress. Each file in the Media library has several field options attached to it, including one for alt attributes.

The WordPress Media library showing the location of the alt text field on the right hand side

So all users are able to add descriptive text, where appropriate, with ease, in order to make accessible images!

But wait, how do I retrofit my 500+ blog posts?

With the last accessibility guide, the lovely Sarah Rose tweeted me to say that she’d gone through her blog and removed each target=”_blank” on her links. That’s amazing! However, I’m realistic and know that blogs are very image heavy these days. Even on my own blog I’ve neglected quite a few alt attributes over the years. We’re all human, and we’re all learning, so to quote Sarah Rose: “once you know better, do better!”

These accessibility guides are not meant to shame anybody. We’re all about working together to build a more inclusive web. And a more inclusive world.

Disclaimer: All examples of disability in this post are acquired via research and are a generalisation of the sort of obstacles web users face. I am not personally affected and therefore may have overlooked nuances of certain disabilities. Web accessibility is something I am passionate about and am constantly learning about, so if you wish to share your personal experience, I’d love to chat in the comments, via email or on Twitter

This article was last updated 16 July 2017 and will be updated as needed.

Thank you for reading!

I’d love if you’d leave a comment and join the conversation! Also, if you found this post useful, please share it on social media (and/or you could buy me a little chai latte to fuel further post writing!)

Leave a Reply

Your email address will not be published. Required fields are marked *

Comments

  • I’m loving this series! It’s so informative.

    I knew alt attributes were used for accessibility so I always put an alt attribute in because I want my blog to be accessible by everyone. But I didn’t know that you don’t need to have one for every image if it’s not relevant to the page, and that you can leave an empty alt attribute in the img tag. I also didn’t know that you’re required to have the alt attribute in every image tag!

    I’m looking forward to the next post!

  • I had no idea alt attributes were used for screen readers! This is so informative, thank you!