It’s common for businesses to assume that their images aren’t important for visually impaired users.

This is a mistake.

Images help to convey or accentuate written content on the page. A visually impaired person using a screen reader will be confused as to what an image is about if alt tags are missing or don’t describe the image correctly.

Having said that, sometimes alt tags shouldn’t be used, are often overlooked or used incorrectly. The key is knowing when to use them and where to add or change them in WordPress.

Ok but first, can you explain what an alt tag is?

You bet! And I’ve included a video below that shows you where to find alt tags and how to edit them.

First of all it has to be said, website accessibility compliance is a journey. It’s an ongoing process of considering and changing some if not all aspects of content on your website. That doesn’t mean it isn’t important now though. Your website visitors can’t wait. They need accessibility now. From alt tags to optimizing images, to colour contrast, navigation and so much more. It is easy to get overwhelmed by the amount of things to consider. My hope is that you’ll soon understand that

Alt tags or ‘alternative tags’ are bits of descriptive text that are used to describe an image; not to be confused with the actual image name. For example, An image with the file name “dog-1234567.jpeg” that has not had a custom alt tag added will have an alt tag of “dog-1234567”. This is of no use to anyone, especially those who use a screen reader on the web. Including alt tags as part of the quest for better accessibility is a good place to start. That’s why this post focuses strictly on the best ways to make images more accessible.

Alt tags are better for everyone and seo

It’s better for everyone, search engines included, to not only name your images correctly but to also give the image a descriptive alt tag to help your visually impaired website visitors understand the content of the image. They are also useful to a user who has chosen to turn images off to increase page load time. Alt tags also help a website stand out in search results and they, hopefully, contain relevant keywords to your content which is important for seo.

When to use alt tags effectively

Use alt tags for images to support the meaning or provide context to the written content. It can be helpful to put yourself into a visually impaired person’s shoes when thinking about each image or you can use your computers built in accessibility features or a screen reader to scan your site. You’ll soon see how mislabeled images can be confusing to the website visitor.

When not to use alt tags

If an image is simply for decoration and serves no other purpose, alt tags shouldn’t be used as they don’t provide further value for accessibility. A perfect example of this is a background image that has text overlay. The image is perhaps providing ambiance or portraying your brands colours and doesn’t need to be explained by way of an alt tag. Having said this, it’s important to consider image choices carefully and evaluate the accessibility of each one separately.

Where to add alt tags in WordPress

WordPress makes it easy to add alt tags in the media library. The best way to help you understand how to use alt tags is to walk you through the process of editing, adding and updating the alt tags on your WordPress website. Before that, I want to get back to the above example and show you how we can make this image more accessible with a better file name and alt tag.

Here’s how to correctly use alt tags

First of all, consider the image as it relates to the blog topic. If the blog post topic is ‘How to keep your dog cool in summer.’,

“dog-playing-pool.jpeg alt=”Playful dog splashing in a pool on a hot day.” 

you can see how this makes more sense than the example above. Also, it’s best to use proper grammar in alt tags — using a capital letter at the start of a sentence and a period at the end of a sentence.

One thing to note — the image above provides an example of how to use alt tags in a post about keeping your dog cool in summer, but in the context of this blog post, the image isn’t really relevant to the topic and the alt tag doesn’t make sense then.

What do you think would be the best alt tag to use?

How about this one — “This is an example of an image made more accessible with the correct use of grammar in an alt tag.”

You got it!

Now for a walk through of how and where to add alt tags. This video shows you where to find alt tags in the WordPress media library and goes into a bit of detail on when to use captions and links to a great resource about accessibility.

Watch the video.

In the video you’ll notice that media files are organized into folders which is available with Happy Files, a plugin that allows you to drag and drop bulk files into folders for easy sorting. You can get the free version of this plugin at HappyFiles. I’m using the Premium version which has a lot more features but the free version is great too.

Scanning for Alt Tags in Bulk

There are many tools online that will scan images for missing alt tags.

Here are two great options:

SEOptimer – offers a ton of free, easy to use tools you can use to check your website. Download the free version of SEoptimer here.

Screaming Frog – more comprehensive and detailed than SEOptimer and is best suited for those who want to really dig in to the details. Download the free version of Screaming Frog here.

There are other aspects of how to make images accessible as well, but that is for another post. This is enough to get you started for today!

I hope you found this post helpful to get your website one step closer to being accessible for all users. If you have any questions or would like to talk about how we can help improve the accessibility of your website images please don’t hesitate to reach out and schedule a free 15 minute consultation.