Quick tip: Handling the sub menus in the WordPress 3.3 admin area with a screen reader

This is a quick tip to show how to use the new sub menus in the admin area of WordPress 3.3 with a screen reader. For this, I’m using NVDA 2011.3RC, and Firefox 9.

The new sub menus are a way to more quickly access items in the sub menus of “Dashboard”, “Posts” etc. without having to reload the page with the menus opened. Instead, the menus are opened and closed dynamically by either hovering the mouse over the item that is, by NVDA, announced as “sub menu link”, or by executing a press of the enter key on such an item.

The problem arises from the fact that screen readers on Windows capture the enter key and many others and execute functions based on their functionality inside the virtual documents/browse mode documents. For example pressing enter on a link usually clicks the link.

In this case, a click on a link is not what we want, since that would indeed reload the page. The menu would still be opened, but we’d lose all advantages of the more dynamic, time-saving approach that is made possible in 3.3.

Instead, what we do is the following:

  1. Position NVDA’s virtual cursor on the desired sub menu item.
  2. Press NVDA-key+F2 to invoke the function to pass the next key press straight through to the application.
  3. Press enter.
  4. Navigate down with the virtual cursor to find a newly expanded sub menu with links we can click.

Your preferred screen reader offers the same functionality, no doubt. Be aware, however, that some screen readers do not set focus to focusable items under the virtual cursor automatically, so an additional key press before step 2 may be needed to route the system focus or PC cursor to the item the virtual PC cursor is pointing to.

This way, we can easily access the dynamic menus. It requires an extra keystroke, yes, but this is still quicker than having to wait for a page load and looking for the new items starting from the top of the virtual document.

Happy blogging!

WordPress 2.6 brings a lot of accessibility improvements!

I just upgraded this blog to WordPress 2.6.

This version brings with it a number of accessibility enhancements.

One thing you might have noticed already is that there is now a default language set. Default English blogs should now always cause screen readers that support language switching to use the English variant of their default speech synthesizer.

Also new: Whereever possible, there are now labels properly associated with the corresponding form controls. This means that now also screen readers that do not do their own HTML processing should pick up the labels fine.

One more addition that the WordPress team has embraced is the inclusion of some WAI-ARIA markup. Whenever you comment on my blog now, and soon hopefully many others, and you use a compatible browser such as Firefox 3, and a compatible screen reader such as NVDA or Orca, you’ll hear that the text fields also textually marked as “required” in their labels, now are announced as “required” fields. The WordPress default theme now uses aria-required to denote such fields as required, giving even more accessibility to WordPress!

I’d like to thank the WordPress community to embrace ARIA! It is really amazing that ARIA is now finding its way into such a widespread mainstream piece of software!

Social Bookmarking feature added to blog

Umm well, I sort of had it already, you could either add posts to digg or del.icio.us. But this all was a bit hacky, and the implementation wasn’t too accessible, either.

I therefore browsed around a bit on the WordPress plugins site and tried out a few Social Bookmarking plugins on my local test install.

I found that Social Bookmarking reloaded both offers a wide range of Social Bookmarking services and is also accessible.

However, it displays a button for each service, and this can easily clutter up the page. Also, some feedback both here on the blog as well as through other means, it was indicated that the right service is hard to find, even for sighted mouse users. In addition, whatever service I deactivate, I’ll never get just the ones everyone needs.

So after a day, I’ve now decided to not go with “Social Bookmarking Reloaded”, but instead try out AddThis. Their WordPress plugin is unintrusive, only adds a single image at the bottom of each post. I’ve tweaked it a bit so it has proper alt text on the image.

So when you click this link, a new window will open allowing you to bookmark any of my posts with any bookmarking service you like. They offer even more than “Social Bookmarking reloaded” I believe, so there should be something there for everyone now.

Thank you again for your feedback! It’s very helpful, especially when not always seeing the effects of an idea.