Thursday, October 14, 2010

Configuring WordPress.com Blog Widgets In Accessibility Mode Using JAWS Screen Reader and Firefox WP Widgets In Accessibility Mode

I recently wrote about how to configure widgets for the WordPress blogging software. This was in response to a question someone asked me. But it turns out that the question was from a blogger who created their blog on the WordPress.com web site. The blog I'm working with is being provided by my web site's hosting company (1and1.com) and it is an older version of the WordPress blogging software. In another blog post I wrote about Accessibility Issues With WordPress.com, JAWS 11 & Internet Explorer 8; basically, JAWS doesn't recognize this version of WordPress as being composed of web pages so it's unusable. But I decided to try WordPress.com using Firefox version 3.6.10 and have found that it is much more accessible to JAWS version 11. The only part of the blog administration interface that I've explored in detail thus far is the Widgets page. Below I describe how you can configure widgets for your WordPress.com blog using Firefox version 3.6.10 and JAWS version 11. And the good news is that you don't need to use the JAWS Drag and Drop command -- the secret is to enable the "accessibility mode" screen option.

Layout of Widgets Page

The Widgets page is divided into different widget areas. The centre portion of the page consists of two widget areas: Available Widgets and Inactive Widgets. Available Widgets are listed alphabetically in two columns and represent all of the widgets that you can add to your blog depending on the theme that you have selected. Inactive Widgets are also listed in a two column format if you have enough of them. Inactive Widgets are those that you had on your blog at one point and decided to remove but not delete because you wanted to retain the settings. If you change to a different theme, widgets from the previous theme that aren't a default for the new one will be moved here as well.
The right portion of the Widgets page contains the widgets currently displayed on your blog in a single column and organized into one or more widget areas depending on the theme you have selected. For example, the most popular theme, Kubrick, has only one widget area entitled "Sidebar." The Twenty Ten theme has 6 widget areas: Primary, Secondary and four Footers.
According to the WordPress.com Widgets Help page, "If you haven’t added any widgets to your sidebars, the theme will show a default set of widgets, which will not be listed in the Sidebar area. When you add widgets to a sidebar the default set of widgets will no longer be used. Try adding a blank Text Widget if you don’t want anything to show up in a widget area."
The Widgets page uses headings extensively and this is how I recommend that you locate the various lists of widgets. Each widget area name is a heading level 3. Each widget name is a heading level 4. Because adding a widget to your blog doesn't remove it from the Available Widgets area, I like to ensure that I'm selecting the correct widget by using the Headings List (Insert F6) to find the widget area and then pressing down arrow in the list to find the widget I want to add or edit.

Adding and Editing Widgets with Drag and Drop

By default, the method used to add a widget is to drag it from the Available Widgets or Inactive Widgets area into one of the widget areas on the right side of the page. After you've dropped a newly added widget, a form will open up in the page below the widget heading so that you can configure it. To remove a widget, drag it back to the Available Widgets area or the Inactive Widgets area, depending on whether you want to keep its settings or not.
I tried using the JAWS Drag and Drop command to perform the above actions. I was successful to a certain extent. One difficulty I had was being unable to position a widget. When adding a new widget, it would always appear at the end of the list even when I had positioned the cursor between two other widgets. I can reorder the widgets using the JAWS Drag and Drop command only if I move a widget down; it just stays in its original position when I try to move it up. More importantly, I'm unable to perform the drag and drop if the source and destination aren't both simultaneously visible on the screen. So I wasn't able to drag an Inactive widget into my Sidebar because the Sidebar is located at the top of the page, and I have to scroll down to access the Inactive Widgets area.

Adding and Editing Widgets with Accessibility Mode Enabled

After trying to drag and drop widgets with the JAWS Drag and Drop command, I fortuitously discovered a link near the top of the page called "Screen Options". Activating this opens a new section on the Widgets page where you can activate a link entitled "Enable accessibility mode". After doing this, the Widgets page changes so that drag and drop is no longer required to add, remove and reorder widgets. Instead, "Add" or "Edit" links now appear to the right of each widget name.

Widget Configuration Page/Form

When you activate an Add or Edit link for a particular widget, the Widgets page is replaced by the configuration form for that widget. Read the Issues section below for my suggested navigation strategy for this form. Important form fields that you'll find for all widgets include:
  • Sidebar and Position: a table with 2 columns.
    • The first column contains a group of radio buttons. The last one is for the Inactive Widgets area. Above that will be a radio button for each widget area your theme supports.
    • The second column contains a combo box for the position the widget is to occupy in the widget area. So this is how you order the widgets in the widget areas on your blog. The position will be a number from 1 to the number of widgets you currently have in that area + 1. (Note that the Inactive Widgets area does not have a position combo box.)
  • Cancel: second last button (which is actually a link); present if this is a widget you've chosen to add; activate this button if you decide not to add the widget as it returns you back to the Widgets page.
  • Delete: second last button; present if this is a widget you've chosen to edit; activate this button to delete the widget from your blog (it will still appear in the Available Widgets area); it also returns you back to the Widgets page.
  • Save Widget: last button; you must activate this button to save your changes; it also returns you to the Widgets page.

Issues

I've encountered the following 3 issues on the Widgets page.
Selecting a Widget to Add or Edit
You have to be very careful that you activate the correct Add or Edit link. Because they all have the same name, I use the Headings List to locate the widget area I want to go to e.g. Available Widgets. Then I press down arrow within the Headings List to find the widget I want e.g. Calendar. I press Enter to go to that location on the page. At this point I would expect to press the Tab key to go to the Add or Edit link for the widget because the link visually appears to the right of the widget name. But within the HTML source code for the web page, the link precedes the widget's heading tag, so pressing Tab takes me to the Add/Edit link for the next widget (Categories in this case)! So remember to Shift Tab from the widget heading to move to the correct Add or Edit link. I also recommend that when the configuration form for the widget displays, you check the widget heading to ensure you've selected the correct one; it is a heading level 3 and for the calendar widget, it is named "Widget Calendar".
Widget Configuration Form Navigation
Most configuration forms contain static text that you should read. If you go to the first form field via the Form Fields List, and Tab to the remaining fields, you'll skip over important text positioned above or below the fields that you should read. The most reliable method I've found for ensuring I don't miss any static text is to start from the form heading (level 3) via the Headings List and then press down arrow to read all static text and locate each form element.
Also, I've found that tabbing skips over the unselected "sidebar" radio buttons. It is important that you are able to access these because you may want to move a widget from one area to another (e.g. Inactive to Sidebar). You'll be able to locate the unselected radio buttons if you down arrow through the form but you'll get there more quickly if you use the Form Fields List.
Unable to Enable Accessibility Mode with Internet Explorer 8
As I said in my introduction, I've been unable to get JAWS 11 to work with the WordPress.com administration interface using Internet Explorer 8. For some reason, JAWS doesn’t think the site is composed of web pages. This means that I'm unable to use the commands that JAWS provides to navigate web pages. These include the JAWS navigation quick keys and list commands. I can't even get the JAWS cursor to move inside the page. What I'm able to do is navigate to the Widgets page via tabbing but once there I cannot tab to the Screen Options link. I can sort of put the focus on it via the Find command (Control F) but I'm not able to activate the link.

No comments:

Post a Comment