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

What 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.

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:

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.