Accessible Images

Alt text exampleAs you add photos and graphic images to your blog posts, you may have noticed the image uploader includes a field for alternate or Alt Text. Here’s what it looks like in WordPress.

In some browsers, the text entered in that field will appear as a “tool tip” when you hover your mouse over the image for a second or two. In screen readers – applications that read the contents of a web page to your blind visitors – that text is read to them to describe the image they cannot see. If there’s nothing entered in the Alt Text attribute, the screen reader can’t give your blind reader any information about your image.

Unfortunately, several blog platforms do not offer the ability to include the alt attribute in the HTML for your images. This makes it a little more difficult, but not impossible, to do it yourself. You can view your content in HTML mode and add the alt attribute yourself.

All you need to do is add alt= and whatever short description you want to include inside quotation marks. Some blog editors may already have an empty alt attribute included in the image HTML (alt=” “) and all you need to add is your description.

Here’s what the HTML for the above image looks like:

<img src="" alt="Alt text example in WordPress image editor" />

If helping the less fortunate isn’t enough to get you mucking around in the HTML goo, here’s something else that might. Search engines are also blind so including an alt attribute with a concise description makes that image visible to them too. You never know who might be searching for photos of Cousin Rob Dan and his bomb shelter and little steps like this make your blog and its contents more visible to the search engines and your research cousins using them.

Learn more about online accessibility and other Web style issues in The Yahoo! Style Guide – available at Amazon.

  • Lorelle VanFossen

    Thank you for pointing this out to your readers. They should also know that in many countries, including the United States as of March 2012, if they have a commercial, public, or non-profit site (commercial means this is their business or they have ads on the site or generate income with the site), all links and images must have descriptive alternative text. For images, this is the “title” and for links it is the “alt” or alternative text.

    It is more than just helpful to those with disabilities. It is the law now. The United States was behind many other countries taking accessibility seriously. Ten years behind.

    I teach family history blogging as well as WordPress and web publishing workshops and classes and I’m always surprised that people don’t know this, so thank you for helping to educate people. It’s very important, and commercial sites can be sued if they do not comply.

    • Bookseller

      Thank you, Lorelle, for this information. I was aware that government entities were required to do this (Section 508), but not that there was a commercial requirement now too.