• Skip to content
  • Skip to footer
A Bright Clear Web

A Bright Clear Web

A Bright Clear Web - Simple, effective, accessible websites

  • Home
  • About
  • Websites
  • Writing
  • Learn
  • Blog
  • Contact
You are here: Home / Accessibility / The Importance of WordPress alt text for Accessibility and SEO

The Importance of WordPress alt text for Accessibility and SEO

Posted: August 5, 2016 Updated: January 4, 2018 by Claire Brotherton
24 Comments

Pilot whale squirting water in the ocean

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" />

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.

Image attachment details area with alt text field highlighted

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.

Image markup in WordPress 3.0 with a blank alt

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.

Selecting an Attachment Page

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.

A Twenty Fifteen attachment page, showing the description

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.

WordPress Image Details dialog for an image link

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="".

Manually editing alt text to make it blank

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.

The Decorative checkbox in WP Accessibility

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.

This image requires alt text, but the alt text is currently blank. Either add alt text or mark the image as decorative.

In WordPress 4.6 and earlier

WP 4.6 has a different warning.

The alt text for this image is the same as the title.

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.

A golden retriever with wet fur runs on a beach

alt="A golden retriever with wet fur runs on a beach"

Golden retriever lying in the mud

alt="Golden retriever lying in the mud"

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.

Bowl with dried dog food

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.

Related

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

About Claire Brotherton

Freelance web designer and front end developer based in Edinburgh, Scotland. I love WordPress, code, learning and blogging.

Reader Interactions

Comments

  1. Nomy says

    August 5, 2016 at 2:09 pm

    Hey Claire,

    Great post and thanks for adding new knowledge of using keyword in alt text to my database 😉

    Reply
    • Claire Brotherton says

      August 5, 2016 at 3:13 pm

      Thanks Nomy! Glad it helped.

      Reply
  2. David Withington says

    August 5, 2016 at 2:24 pm

    Thanks Claire – I thought I knew about alt-text, but I learned lots more from your post. Interesting to discover that a blank alt-text is automatically populated from the title. I love the use of the gif and video too.

    Reply
    • Claire Brotherton says

      August 5, 2016 at 3:13 pm

      Thanks David.

      I’m not sure exactly when WordPress started using the Title as alt text if you didn’t add any of your own, but it was between WordPress 3.0 and 3.5.

      Reply
  3. Col Gray says

    August 5, 2016 at 3:12 pm

    Absolutely perfect timing Claire. This will be really useful for me to send to clients as part of me handing over their WordPress websites.

    You’ve explained everything perfectly.

    Reply
    • Claire Brotherton says

      August 5, 2016 at 3:44 pm

      Cheers Col! Look forward to your next video. 🙂

      Reply
  4. Christi Cline says

    August 5, 2016 at 3:37 pm

    Thank you for pointing this out! I’ll have to take better care of how I name my files or make the extra effort to help the picture be seen!

    Reply
    • Claire Brotherton says

      August 5, 2016 at 3:52 pm

      Thanks Christi. 🙂

      These posts might help you also:

      How To Optimize Your Images For Your WordPress Site

      How to resize a picture to the correct size

      Reply
  5. Graham Armfield says

    August 6, 2016 at 7:39 am

    Hi Claire, nice article.

    You mentioned the longdec attribute in the section on the description. I just wanted to point out that WordPress does not automatically add the longdesc attribute to an image placed on the page when the image is a link to the attachment page.

    For me, your wording there implied that it would.

    The longdesc attribute itself has some controversy attached to it, and for a while was removed from the HTML5 spec, but I believe it’s back in again now. This GIT issue implies the battle is still not over: https://github.com/w3c/html/issues/258

    Reply
    • Claire Brotherton says

      August 11, 2016 at 11:33 am

      Thanks Graham for your comment and the link.

      I’ve checked the code (it’s on localhost) and it looks like the longdesc attribute is added to that image with the link to the attachment page. (longdesc="http://localhost:8888/twentyfifteen?longdesc=22&referrer=4")

      Have you seen many cases where it isn’t added – does it depend on the theme and WordPress version used?

      Reply
  6. markdeafmcguire says

    January 24, 2017 at 9:38 pm

    This helps me a lot because I can’t “listen” to voice overs and struggled with understanding how they read alt, captions, and descriptions in WP.

    Seems like there’s still a bit of a ways to go in defining accessible parameters in these “little” details. But you helped me get one step closer to understanding.

    Thanks, Claire.

    Reply
    • Claire Brotherton says

      January 24, 2017 at 10:05 pm

      Thanks Mark. It’s an art writing good alt text etc. and I’m still learning!

      You could try this extension to see what alt text images have (works on Chrome on desktop, when you hover); Alt Text tester

      Reply
  7. web design chennai says

    August 7, 2018 at 1:19 am

    Very good information. Lucky me I ran across your website by chance (stumbleupon).
    I’ve book-marked it for later!

    Reply
  8. seo sydney experts says

    December 13, 2018 at 8:00 am

    Love this post. Great insights and you have covered it amazingly!

    Reply
  9. Ravi Singh says

    August 13, 2021 at 7:18 am

    Alt tag or text are really very important for Image reading by Google bots. Thanks for sharing this information which is very useful and most of people just missed it, but you helped a lot. Subscribed your blog.

    Reply
  10. Andy Globe says

    January 25, 2022 at 11:48 am

    Hi: I was wondering if I should have dashes in between the words in my image title. i.e. (yellow-gold-round-earring). I was sure I saw that somewhere, but it doesn’t seem you use that method. Any help would be much appreciated.
    Thank you!

    Reply
    • Claire Brotherton says

      February 1, 2022 at 11:48 am

      Hi Andy

      I’ve read that you should use dashes too (not underscores).

      Here’s a reference from Google Search Central’s documentation: https://developers.google.com/search/docs/advanced/guidelines/url-structure

      So it looks as if it’s a good thing to do.

      Reply
  11. Charles Friedo says

    March 10, 2022 at 8:30 am

    Thanks Claire, for sharing this valuable info that it’s main purpose is helping People who are visually impaired not just to help google bot in reading and rank images.

    Reply

Trackbacks

  1. Alt text entries to increase your site’s accessibility – Tutor site says:
    August 14, 2018 at 9:05 am

    […] Some background. It’s SUPER EASY to add alt text (alternative texts) on WordPress? When you add an… […]

    Reply
  2. Accessibility in WordPress: Alt Text – MEWS News says:
    February 12, 2019 at 4:00 am

    […] For more on the importance of alt text and its different usages, read this blog post! […]

    Reply
  3. Increase Your Website Traffic says:
    July 31, 2019 at 12:13 pm

    […] Add “alt” tags to the images on your website. Not only does this boost your usability factor, but it also helps the search engines understand […]

    Reply
  4. Problems with accessibility and online content: How to create digital content for impaired vision, hearing and disabilities - Content Marketing Academy says:
    October 2, 2019 at 7:19 am

    […] Read my post for more advice on adding alt text. […]

    Reply
  5. How To Improve Your Social Media Image Accessibility says:
    October 27, 2020 at 5:25 pm

    […] way to make images more accessible to users with visual impairments is to add alternative text for images. This is a textual description of the image […]

    Reply
  6. 60 Ways To Increase Your Website Traffic | Online Visibility Academy says:
    July 7, 2021 at 6:09 pm

    […] 1. Add “alt” tags to the images on your website. Not only does this boost your usability factor, but it also helps the search engines understand your content better. […]

    Reply

Leave a Reply Cancel reply

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

Subscribe to Blog via Email

Enter your email address to subscribe to this blog and receive notifications of new posts by email. Read my privacy policy.

potted cactus and laptop with code

Footer

Categories

  • Accessibility
  • Blogging & Content Marketing
  • Business
  • Personal
  • Software & Tech
  • Websites
  • WordPress

Top Posts

  • How To Create WordPress Excerpts And Include Links In Them
  • How To Solve WordPress Image Alignment And Text-Wrap Problems
  • Improve Your Divi Website's Reach With Divi Accessibility
  • How To Set Up And Customize Twenty Nineteen Theme
  • Registering a Domain Name with GoDaddy - Step by Step

Let’s Be Social

  • E-mail
  • Facebook
  • LinkedIn
  • Twitter
Copyright © 2014 -2025 A Bright Clear Web
  • Privacy and cookies policy
  • Site map