Do It Myself Blog – Glenda Watson Hyatt

Motivational Speaker

WordPress Misses the #1 Accessibility Tip

Filed under: Blog Accessibility — by at 6:22 pm on Monday, September 28, 2009

Today I am fine tuning my “How POUR is Your Blog?” presentation for WordCamp Las Vegas at BlogWorld. In my original presentation I pointed out a flaw in the way the blogging platform WordPress handles alt attributes with images. With WordPress 2.8.4 now in widespread use, I checked to see if the issue had be rectified, in hopes of updating my presentation. Sadly, the issue remains unresolved.

Allow me to provide some background information… In web page design, the alt attribute provides a text equivalent for those individuals unable to see the image. For individuals who are blind and who use text-to-speech or text-to-Braille screen readers, having images represented as text is the only way to access that information.

In earlier versions of WordPress and now in version 2.8.4, the software continues messing up the handling of the alt attribute. When inserting an image into a blog post; the blogger is presented with the following dialog box:

The

in this box, the blogger can add information about the image and adjust how it will be displayed in the blog post.

The image file name is automatically entered into the Title, an required field. In the example above, the default title becomes “glendabooksbyglendacom_102c1971.jpg”. If the blogger does nothing else, the alt attribute also becomes “glendabooksbyglendacom_102c1971.jpg”. This means an individual using a screen reader will hear “glendabooksbyglendacom_102c1971.jpg” in place of the image. If the screen reader is set to also read image titles, the individual will hear “glendabooksbyglendacom_102c1971.jpg” twice!

Totally useless!

If the blogger changed the title to one more meaningful, the alt would also change. However, this is also incorrect. The image alt and the image title are not the same information. They serve different purposes in html: the alt provides the text equivalent, the title provides additional information about the image.

An image with a caption Similarly, if the blogger enters text in the Caption field, then that text becomes the alt text. Again this is wrong.

For example, when I first used the photo to the right, the caption provided the photo credit, whereas the alt read “Glenda reaching for a ring during a physio session", which provided equivalent information for when the image is not seen or not available. Again, the caption and the alt do not serve the same purpose and, thus, should not provide the same information.

Granted, bloggers could go into the html and manually add a correct alt. But, how many bloggers know enough html to do that? Likewise, how many would bother taking that extra step before hitting the Publish button?

WordPress could rectify this issue by simplifying the “Add an image” dialog box, making it more straightforward for bloggers to use and benefiting blog readers who rely on the correct use of the alt attribute.

I began in the web accessibility field back in 1998. Using alt attributes has always been the first tip I’ve offered when asked how to increase a site’s accessibility. For a blogging platform committed to accessibility, why does the #1 accessibility tip continue to be an issue? How can we be nearing the end of 2009 and still talking about alt attributes?


For tips on writing alts and other tips on increasing your blog’s accessibility, download the free ebook “How POUR is Your Blog? Tips for Increasing Your Blog Accessibility”.

Technorati Tags: ,

If you enjoyed this post, consider buying me a chai tea latte. Thanks kindly.

Related Posts

Trackbacks

  1. someone wants to know « Levite Chronicles
  2. YouTube Captioning | Dis/Embody
  3. Do It Myself Blog – Glenda Watson Hyatt » Top 10 Most Engaging Posts of 2009

26 Comments »

Comment by Duane Storey

September 28, 2009 @ 6:38 pm

The ALT field probably should be mandatory for WordPress, and required when uploading a new image. Lack of a proper ALT tag is a W3C error for sites trying to validate, so it should be meaningful, or probably just empty when not defined. I was working on a plugin a while ago that automatically added proper ALT tags for Flickr images on WordPress blogs (based on the Flickr image title) — I’ll probably release that at some point, which would fix most sites that primarily use Flickr for their images.

Comment by Dona

September 28, 2009 @ 6:46 pm

Glenda,

Thanks so much for this post. I have been wondering how to approach the image properties on my wordpress blog and this really helps.

Dona

Comment by Glenda

September 28, 2009 @ 6:55 pm

Duane, I completely agree that the alt field should be a mandatory one in WordPress and separate from the caption and title. I’m no programmer, but surely that wouldn’t be hard to do. Yes?

Let me know once your plugin is finished. I’m curious to see it.

Comment by Jeff O Hara

September 28, 2009 @ 7:00 pm

Glenda, isn’t that what the caption field does in your image? Adds text to the “alternate text” field. Should it be separated completely from the caption option, I dunno. At least there is an optiion.

Comment by Glenda

September 28, 2009 @ 7:03 pm

My pleasure, Dona. The “add an image” interface doesn’t seem to be the most intuitive. Its probably best to add the alt manually in the html view, for now.

Comment by Duane Storey

September 28, 2009 @ 7:09 pm

That dialog is sort of confusing. Caption and title seem like redundant fields in my opinion. Really you want something like “caption” and “alternate” or something along those lines. I also think it’s a mistake to prime the title field with the filename — that doesn’t do anyone any good at all.

Comment by Melissa

September 28, 2009 @ 7:12 pm

Hi Glenda. I found this post via your “rant” tweet. My blog runs on WordPress, and I thought that I was correctly addressing the alt tag issue by adding the image to my post, clicking on the embedded image to open an editing dialog box, selecting the “Advanced Settings” tab, and making the necessary changes under “Edit Alternate Text.” Is this equivalent to going into the html and manually adding a correct alt as you described?

I enjoy your blog and look forward to future posts (including rants!).

Comment by Glenda

September 28, 2009 @ 7:13 pm

Jeff, you are correct. Text entered into the caption field then becomes the alternative text, as well as text displayed under the image. The problem is the alt and caption might not be the same information. The alt describes the image, whereas the caption might be a photo credit, a silly phrase, a quote or something like that. A separate field would be ideal.

Comment by Glenda

September 28, 2009 @ 7:16 pm

Hi again, Duane, exactly! 😉

Comment by Melissa

September 28, 2009 @ 7:22 pm

Here’s an example of how I’ve used the image editor’s “Advanced Settings” tab to provide alternate text. Using the process described in my comment above (433799), I get an image with the following properties:

Title: Autumn (Alphonse Mucha, source: artwallpapers.net)

Alternate text: An Art Nouveau style painting of a woman from Mucha’s The Seasons series

This seems correct to me, but now I am wondering if I need to manually edit code as well.

Comment by Glenda

September 28, 2009 @ 7:28 pm

Melissa, what you’re doing sounds correct. I’m busy looking for the “Advanced Settings” tab. What am I missing? Could point me in the right direction, please?

Comment by Melissa

September 28, 2009 @ 7:39 pm

Glenda, the way I access it is by adding the image to my post and, while editing the post in the Visual mode, clicking on the image to open up an editing dialog box.

Here is a URL to a brief and soundless screencast showing how I do it: http://screenr.com/Fy7

Even with this option, the process is very roundabout and not at all intuitive. I agree that it would make more sense to present all image property editing options at the time of upload.

Comment by Glenda

September 28, 2009 @ 7:57 pm

Melissa, thanks for doing that screencast! I didn’t know that “Edit Image” option was available in that way. So, if “alternative text” is available through this way, why not also make it available when uploading/inserting an image? Strange.

Comment by Tzaddi

September 28, 2009 @ 10:33 pm

I agree this is a problem. The media uploader is undergoing a big re-work for version 2.9, so let’s hope it will be addressed in that version!

A big challenge is making the masses understand how important Alt info is and what it should contain. I suppose that making it required, and putting something like “describe the contents of the picture” in the admin might help.

Another reason I would like them separate is that sometimes I don’t want to display a caption, but I do want to provide Alt info for accessibility and search engines.

Comment by Bob Easton

September 29, 2009 @ 5:03 am

Glenda,
THANK YOU!

During your presentation, please be loud and persistent about this fault. I have tried multiple times, through multiple mechanisms to get the WordPress developers to understand the issue. They still don’t.

ALT text is NOT the same as CAPTION text and should not be automatically coded from caption. In fact, captions are NOT valid attributes for images. They are additional elements for tables, and some of us don’t display then at all. Auto filling a mandatory field form an optional field, which is intended for another element, is nonsensical. As noted above, captions are often used for giving credit or other purposes. They are NOT alternate descriptions of the image.

By the same token ALT text is not TITLE text. Title text has a purpose different from alternate description. Most of us use it to show brief text on hover. Many screen readers have pronunciation of title set off by default. Those who think TITLE and ALT are equivalent should go read the W3C specs.

Lastly, this is so basic that one should not have to go to an advanced options dialog to get it right.

Bottom line: WordPress has been doing it wrong for a very long time. The correction should be made to the primary dialog for adding images, not to the advanced options.

References:
Read: W3 spec for ALT attribute
Read: W3 spec for CAPTION element
Read: W3 spec for TITLE attribute
Read: W3 spec for the IMG (image) element

Comment by Cheryl

September 29, 2009 @ 7:31 am

I’m never sure I’ll do alt txt right, always nervous, so I don’t even bother. I just put [image description: such and such] in my actual post as regular text (usually in italics) that way I know it works in any browser run on any OS no matter how old or how new. It’s a big relief. Something I picked up from Kara…

Comment by Jane Wells

September 29, 2009 @ 8:16 am

The media uploader UI is left over from WordPress 2.5. We’re redoing a bunch of things in 2.9 and 3.0 around the way media is handled (as has been announced several times on the development blog, at WordCamps, etc.) to fix major usability issues and make it a more intuitive process. Included in this is separating the alt and caption fields. I’m with you, Glenda, that they need to be separate, and there is a Trac ticket for this fix that has been waiting for some helpful developer to contribute a patch for many months (it predates the media redesign planned for 2.9/3.0).

Unfortunately, in open source, if no one volunteers to actually write the code to fix the problem, it takes longer to get done. But, as I mentioned, in the media upload UI work we’re doing now for the next version, the plan is for the fields to be separate, so if no one volunteers to write a patch, one of the core devs will address it.

This is not the only accessibility issue in the WordPress admin. There are other Trac tickets with accessibility issues that have been identified (though not very many, and I’m certain there are more things that must need fixing) that no one has volunteered to patch yet. We’re also starting to bring together a few people who have volunteered to work on an admin theme that will be more accessible for people with certain disabilities (higher contrast, persistent links rather than on hover, larger click targets). If anyone is interested in getting involved in the efforts to improve the accessibility of WordPress, please join the wp-accessibility mailing list. It’s low-volume so far, but hopefully will get more traffic as the admin theme project begins.

Accessibility is very important. So important, in fact, that when errors or issues are found, it should be brought directly to the core team (they don’t tend to have time to read lots of blogs). Discussing it on the accessibility list is one way to get it on the radar. Another is to create a Trac ticket to report the bug/error. It can also be added to the agenda for the weekly core developer IRC chats. This last is an easy way (you just leave a comment on the blog post that says “suggest agenda items for the [date] dev meeting”) to get the issue in front of not only the core devs, but also the most active community contributors.

I love the passion here around improving the accessibility of WordPress, but it needs to be taken a step further to have a more immediate and satisfactory effect. The way to improve an open source project is to get involved, whether it’s through submitting a code patch to fix a problem, or conducting testing to identify the problems in the first place and creating Trac tickets to report them. After reading your post and discovering that the alt tag ticket has been around for almost a year with no volunteers to code the fix, maybe some of your readers will decide that now’s the perfect time to start contributing to the project, so that your next post about this issue can be a celebration of how the community came together to fix the problem. 🙂

Comment by Glenda

September 29, 2009 @ 12:51 pm

Jane, thank you for explaining how changes to WordPress are made and how we can get involved to ensure the changes are, indeed, made. Being open source, it sounds like WordPress’ level of accessibility is up to us, the community.

Folks, that’s sounds like a challenge to me! Anyone up for it?

Comment by Bob Easton

September 29, 2009 @ 1:10 pm

Just for you Glenda, I came out of retirement for a day to write “Clarifying alt Text for WordPress Bloggers and Developers.” It might be helpful for whoever wants to fix the problem.

I am going to look at the places Jane Wells suggested. No promises on action; retirement is awfully busy! 🙂

Comment by Glenda

September 29, 2009 @ 2:42 pm

Bob, thank you! Your post should be a must-read for all WordPress bloggers and developers – thorough yet easy-to-understand.

Enjoy your boat building ventures, but please continue popping out of retirement. Reading through the Trac ticket on the alt issue, someone with a sound understanding on accessibility and standards is definitely needed to address this and other accessibility issues. Bob, your wisdom, knowledge and guidance are still very much needed! 😉

Comment by Michael

May 5, 2010 @ 11:58 am

I think WP Version 2.9.2 mostly solves this. It is still awkward and unintuitive, and silly, but if you fill out the
TITLE
Alternate Text
Caption

You get something like this when you view the page source later:


<img style="border: 0pt none;" title="I love cherry blossoms!" src="http://farm1.static.flickr.com/43/122550096_c4d3d760a1_m.jpg" border="0" alt="Cherry tree" width="240" height="133" />Photo credit: http://flickr.com/photos/katmere

What do you think of that?

Comment by Sarah Graham

May 14, 2010 @ 1:52 am

i host 5 of my blogs on Blogspot and it is really good for beginners. but if you want something with more features, nothing beats wordpress’:*

Comment by SuzSaver

February 21, 2011 @ 2:03 am

Alt tags are also very important for SEO, as photos without Alt text are seen as blank spaces.

I recommend using Windows Live Writer for blogging. Windows Live writer allows for the easy insertion of alt tags, by simply clicking link to “url” then adding a url to which the picture can be linked , and a line of text as the “title”, reference is also easily handled so you can chose from tag, enclosure,licence of no follow.

One of my major concerns with Word Press and accessibility is the lack of colour contrast in not only its dashboard, but many of the blog templates. For example, according to tests performed by accessibility keys, some areas of your blog lack sufficient contrast for those with low vision.
http://www.accesskeys.org/tools/color-contrast.html
I find the Word Press Dashboard gives me terrible headaches.

RSS feed for comments on this post. TrackBack URI

Leave a comment

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>