The Importance of WordPress alt text for Accessibility and SEO

Updated 24 January 2017.

What is alt text and what is it for?

Alt text is short for alternative text. It’s a short textual description of the content of an image.

People who are visually impaired can’t view any images on a page, so the alt text describes the images to them. The page content including alt text can be read out by a screen reader.

Search engine robots only read words on a page, so the alt text lets them know the meaning of any visual content.

In HTML code alt is an attribute of the <img> tag.

An example is:

<img src="https://www.abrightclearweb.com/wp-content/uploads/2016/02/houseplant-300x200.jpg" alt="Houseplant with watering can and secateurs" />

Every image should have an alt attribute.

But the alt attribute can actually be blank. i.e. alt=""

More on this shortly…

How is alt text implemented in WordPress?

When you upload an image to WordPress, you are invited to add alt text in a field in the image Attachment Details section.

Alt text behaviour in WordPress 4.6 and 4.7

In WordPress 4.6 and other recent versions prior to that release, WordPress filled in alt text for you from either the image title or caption upon inserting the image into the post.

But this was not always a good thing.

Why?

1. If the filename of your image was a string of letters and numbers, that could be duplicated as your alt text. Not very meaningful! This is one of the reasons why you should change the filenames of images from a camera before upload, and follow good image optimization practices.
2. The filename might be only a single word e.g. cat.jpg. This might not adequately describe the image as well as some well-chosen words e.g. Persian cat reclining on a rug.

Rule of thumb: always add your own alt text.

As of WordPress 4.7, the alt text field behaves as it did back in version 3.0 i.e. leaving the alt text field blank results in a blank alt attribute.

To see why this change was made, read Improving accessibility of image alternative text in 4.7.

 

What are the Caption and Description fields?

The caption is text which labels the image. It normally sits underneath.

The description correlates to the longdesc attribute in HTML, short for longer description.

A description is not shown next to the image; it’s rendered if the image is linked to an attachment page. The option is available in the Link To dropdown.

This is what an attachment page looks like in Twenty Fifteen theme. The description – Mixed vegetables: carrots, a leek, four peppers (two cut), onion and garlic. Sitting with a knife on a wooden table – is under the image.

In practice, longdesc is not often used. It’s not part of the HTML5 spec, which many WordPress themes adhere to.

If an image needs further description, it may be better to:

• Add the longer description into the page text.
• Add a link beside the image which links to a page containing the longer description.

WordPress alt text: special cases

Alt text for images which are links

Images which are also links should describe the destination of the link rather than the image itself.

You can turn an image into a link by changing the Link to dropdown to Custom URL, and adding the URL.

Alt text for image buttons

The alt text should describe the button’s function. (“Buy now”, “Submit” etc.)

Alt text for logos

A logo’s alt text should be the company or organisation name.

You don’t need the word “logo” in there.

Alt text for infographics, graphs or charts

If the information is extensive, you can write a short summary in the alt text e.g alt="Clothing sales by type Q1 2016".

Then add text below the image indicating its content.

I forgot to add alt text to my image or I need to change it…

You can edit alt text by clicking on the image and choosing the Edit option.

The Image Details dialog pops up, with a field where you can change the alt text.

When do I not need alt text?

I said that you could have a blank alt attribute, alt="".

This is used when an image is purely decorative and doesn’t add meaning to the page text.

Another instance is when the image content is described by the text before or after it e.g it has a caption.

It’s not necessary to add the same alt content again, as it could be read out twice by a screen reader. In this case, you could legitimately mark the image as decorative.

How do I add the blank alt attribute in WordPress?

Unfortunately there isn’t a simple way to do this built into WordPress.

As already stated, the alt attribute is auto-completed from the image title if left blank.

You can manually edit it by switching to Text mode and cutting the alt text to give it a null alt attribute alt="".

The WP Accessibility plugin

Another option for blank alt text is to use the WP Accessibility plugin by Joe Dolson (which helps with other accessibility issues as well).

WP Accessibility adds a checkbox to the Insert Media screen. When an image is uploaded or selected for insertion, checking the Decorative checkbox gives it the blank alt attribute.

With WP Accessibility active, something else changes.

Adding an image and leaving the alt text box blank brings up an image with a warning!

In WordPress 4.7

This is the warning WP Accessibility generates in WP 4.7.

In WordPress 4.6 and earlier

WP 4.6 has a different warning.

Fixing the warning message

You can remove the warning image by clicking on it and choosing Remove.

Then check the alt text for your image, or mark it as decorative if it doesn’t need alt text.

Changing an existing image to be decorative with WP Accessibility

If you use WP Accessibility and want to change an image to make it decorative, you’ll notice that the Decorative checkbox isn’t available in the Image Details dialog.

In this case, you’re best to delete the image from the post or page. Re-add it from the Media Library using the Add Media button, and check the box there.

I’ve heard alt text is good for SEO, right?

It can be… remember that search engines can’t see!

But alt text still has to accurately describe what the image contains.

If the image can be legitimately described with keywords, by all means use them in your alt text.

Example: You are writing about dogs, and you have a post on Golden Retrievers. Your keyword is “golden retriever”.

You can use that keyword in the following photos since it describes the dogs portrayed.

Alt text should not be used as some kind of spamming mechanism to force keywords into your page where they don’t belong.

If you have a photo of a bowl of dog food, label it as such.

It doesn’t make sense to have alt text of "dog food for golden retriever" for the following photo because it’s not what the photo shows. That’s just keyword stuffing.

Be aware that SEO plugins such as Yoast can check that you have alt text for images, but can’t check its meaning.

Only a human being can do that!

Test: how WordPress alt text works with screen readers

I created a page with different images and uses of alt text, captions and description. I used two free screen readers to test them.

VoiceOver is native to Mac. You can choose the voice used. I chose Scottish Standard English with Fiona Compact.

ChromeVoxis an add-on for Chrome browser.

Each screen reader behaves slightly differently.

Note: this video was created using WordPress 4.6, when alt text was auto-completed from the caption or image title. If you’re using WordPress 4.7 or newer, this behaviour has been removed.

If you watch the video, you will notice the following:

• One image was uploaded with the original filename, and had no alt text set. It is read out as digital-art-1444990_640 by both screen readers – not good!
• ChromeVox reads out both the caption and alt text for an image, which is not so good if both are the same.
• If an image has both alt text and a caption, VoiceOver reads out only the caption. This is fine if they are identical; we don’t want identical text read out twice. However, in the case of the image with the jokey caption, only the caption is read aloud. The user has no idea what the content of the image was.
• For the image with the description, VoiceOver reads out the description twice.
• Both screen readers ignore decorative images.

Further reading

• Alternative Text
• Alternative Text for Images: the ALT attribute
• Title, Caption, Alt Text, and Description: Harnessing the Power of WordPress Image Metadata

Found this post useful? Got a question? Please leave a comment.

Category: Accessibility, WordPress Tags: alt text, caption, description