A Super Simple Way to Make Images Accessible: Alt Text versus Title Explained

Glenda's cat Faith asleep on the deskWhat does a photo of my cat have to do with blog accessibility? More than you might expect.

Allow me to explain:

Bloggers often use photos and images in their posts:

  • to catch readers’ attention,
  • to set the tone of the post,
  • to illustrate a point,
  • to provide information in graphical format,
  • to breakup long chunks of text,
  • and the list goes on…

However, for individuals who are blind and rely on screen readers – software that reads aloud text on the screen – they cannot access these images; screen readers cannot interpret images.

But, all is not lost.

What can I do to make images accessible?

Bloggers can add two bits of textual information, which then can be read by the screen reader and, hence, make the images accessible to individuals who are blind:

  1. Alternative text (alt for short): a required bit of text providing a succinct description of the image; and
  2. Title: an optional bit of text providing additional information or a caption for the image.

With the photo of my cat, the alternative text – read by screen readers – reads “Glenda’s cat Faith asleep on the desk” and the title reads “Ahh, cute kitty!

Some screen reader users turn off the reading of image titles to decrease the amount of information required to listen to in order to navigate blogs. This is why alts are required – they are read in place of “image”, and titles are optional – in terms of accessibility.

Image showing the title Contrary to popular belief – thanks largely to a mistake in early version Internet Explorer – the image title, not the alt, appears when the mouse is hovered over the image.

For sighted individuals, to view the alt text on a blog or site, turn off the loading of images.

In Firefox, go to Tools > Options >Content > uncheck Load Images Automatically > OK. You may then need to refresh your page to make the images disappear.

Where do I enter alts and titles?

From my own blogging experience and based on emails from bloggers attempting to do the right thing, blogging platforms – the blogger’s tools – make this task more confusing and complicated than it needs to be.

For example, when uploading an image in WordPress 3.0, the title is marked as a required field, which is wrong – the alt is required! And, by default, the file name is entered as the title – totally useless for sighted and blind users alike!

In Windows Live Writer, which I use for writing my posts, the alt becomes the title by default; although better than the file name, the redundancy doesn’t benefit anyone.

With the current state of blogging platforms and related tools, bloggers need to understand how their specific tools work. When inserting an image into WordPress blog post, it means deleting the file name from the Title box and typing in an optional title, and definitely entering a succinct description into the Alternative Text box:

Dialog box showing where to enter an image title an alt text in WordPress

Other blogging platforms may vary in how they handle the image alt and title. Experiment with yours and please share what you discover in the comment section below.

What is the bottom line?

Definitely continue using photos and other images to catch readers’ attention, to illustrate points, and to break up long blocks of text. Be sure to add an alternative text for every image. When writing alt text, consider what you would say about the image if you were reading aloud your post over the phone. Ensure the image title is the not the file name; add a title if desired. Where possible, check that the title and alt text are not the same.

For specific tips on how to write alt text, download How POUR is Your Blog?: Tips for Improving Your Blog’s Accessibility.

9 Responses to A Super Simple Way to Make Images Accessible: Alt Text versus Title Explained
  1. [...] This post was mentioned on Twitter by Glenda Watson Hyatt and TherExtras, Pat Strader. Pat Strader said: RT @GlendaWH: use images in your blog posts? A Super Simple Way to Make Images Accessible: Alt Text vs Title Explained http://bit.ly/9s9cnH [...]

  2. Gary Miller
    October 1, 2010 | 2:36 am

    Good advice for newer WordPress users and a reminder for those of us with more experience.

    Thanks Glenda!

  3. Glenda
    October 1, 2010 | 3:38 pm

    Gary, thanks for being the very first to comment on my new blog! I’m glad you found this post useful – much more to come. Feel free to ask any questions have – they may trigger future post ideas.

  4. Ricky Buchanan
    October 2, 2010 | 1:02 am

    This is good advice – I’m glad WordPress now lets you add alt text, it didn’t used to do even that, but I wish it did a better job too! I work hard to put alt text on all of ATMac’s pictures but I’m sure I’ve missed some… I need to go back and check.

    Congrats on your new blog!


    • Glenda
      October 4, 2010 | 12:25 pm

      Thanks Ricky!

      I completely agree that WordPress needs more work in terms of accessibility. One baby step at a time I guess…

  5. Vlad Alexander
    October 2, 2010 | 9:14 am

    Hi Glenda,

    May I propose some wording changes?

    1. Alternate text does not make images accessible. Alternate text makes content that contains images comprehensible when images cannot be seen. What’s the difference? If alternate text makes images accessible, then reading the alternate text for an image on its own should sufficiently describe the image. This may work for some images but not for all. In the following example, simply reading the alternate text in isolation will not adequately describe the image:

    <p>I <img alt="love" src="heart.gif" /> you!</p>

    Instead, the real function of alternate text is to work with surrounding content to make that content comprehensible (and therefore accessible) when images cannot be seen.

    The longdesc attribute actually makes images accessible.

    2. Alternate text is not a description of the image. I would suggest calling it a textual substitute or replacement for images.

  6. Glenda
    October 4, 2010 | 12:32 pm

    Thanks Vlad, point taken.

    Yes, for the most part, the image’s purpose or function is provided in the alternative text, not a detailed description.

  7. Danny Dance
    December 15, 2010 | 3:15 pm

    Thanks a ton for the very blogger-level, straightforward, and (finally!) non-confusing explanation of the two. I just spent 30 minutes researching this topic on Google and had gotten no practical clarity on the issue until I hit your blog. Thank you :)

    • Glenda
      December 16, 2010 | 4:53 pm

      Thanks Danny, I’m glad you found the post useful. No point making things more confusing.

Leave a Reply to Glenda

Wanting to leave an <em>phasis on your comment?

Trackback URL http://blogaccessibility.com/a-super-simple-way-to-make-images-accessible-alt-text-versus-title-explained/trackback/