Monday, October 4, 2010

Configuring WordPress Widgets With JAWS Screen Reader

This blog post explains how to add, remove and configure widgets for a WordPress blog when using the JAWS screen reader. These instructions assume that you are using: Wordpress 2.9.2, JAWS 11, Internet Explorer 8, and the WordPress Default theme.
If you are unfamiliar with WordPress, read my previous blog posts: Using JAWS Screen Reader To Write A WordPress 2.9.2 Post and Accessibility Issues With WordPress.com, JAWS 11 & Internet Explorer 8.

Access to and Layout of Widgets Page

Login to your blog's administration interface.
To navigate to the Widgets page, select Presentation link, then Widgets link.
The layout of this page, from top to bottom (excluding the site's navigation elements), is as follows:
  • Sidebar Arrangement (heading 2)
  • Static text that says, "You can drag and drop widgets onto your sidebar below."
  • Sidebar 1 (heading 3): tall rectangular area on the left-hand side of the page; it does not extend across the entire width of the page. Sidebar 1 is a list with each list item being a widget that is currently displayed on your blog. The widgets are in a single vertical column and their order from top to bottom matches how they appear on your blog. Each widget spans the width of the sidebar.
  • Widget: a type of content that can appear on the left or right hand side of your blog page, depending on the template you have chosen e.g. Recent Posts, Archives, Search, Categories. It is represented by a rectangle that contains its name (left justified) and an optional Configure icon (right justified) which JAWS reads as "equals".
  • Available Widgets (heading 3): wide rectangular area that extends the width of the page. It is a list with each list item being a widget that is not on your blog sidebar yet but which you can add. Each available widget is represented by a rectangle in a horizontal row from left to right; if the widgets do not fit in one row, they will wrap around to the row below.
  • Save Changes buttons: after making modifications on this page, activate one of the two Save Changes buttons to have them take effect
  • Widget Configuration dialog boxes: these dialog boxes display when you choose to configure widgets that have this option.

JAWS Commands For Interacting With Widgets

The following JAWS commands will help you to navigate, add, remove and configure the widgets for your blog.
  • Headings List: Insert F6 -- to access the Sidebar 1 or Accessible Widgets areas
  • Links List: Insert F7
  • Form Fields List: Insert F5 -- to access the Save Changes button or form fields in the widget configuration dialog boxes
  • Lists List: Insert Control L -- to access the list of Sidebar widgets or Available Widgets
  • List Item navigation quick key: I -- to access a widget in the Sidebar or Available Widgets list
  • Virtual PC Cursor: Num Pad Plus -- returns you to the default web page navigation mode where you can tab through the page, use JAWS navigation quick keys, display lists of links, etc.
  • Route JAWS Cursor to PC Cursor: Insert Num Pad Minus -- moves the mouse pointer (JAWS cursor) to the location on the page where the Virtual PC cursor is located (e.g. Heading or List Item you navigated to); this helps you to orient yourself on the web page prior to using the JAWS cursor
  • Left Mouse Click: Num Pad Slash -- note: your JAWS cursor needs to be active for this command to work
  • Drag and Drop: Left Control + Insert + Num Pad Slash -- this command is used to drag and drop widgets. JAWS Help describes how it works as follows (which I have found is accurate except that I need to press the Left Control key -- Right Control did not work): "Position the JAWS Cursor on the item you wish to move and press CTRL+INSERT+NUM PAD SLASH. You can leave the JAWS Cursor active, or you can switch to the PC Cursor. JAWS will keep speaking as you navigate. Once you have positioned the JAWS or PC Cursor in the location to which you would like to move the item, press CTRL+INSERT+NUM PAD SLASH again, and the item will be moved to the position of the active cursor."

General Process for Dragging and Dropping a Widget

In the following sections, I explain how to perform the major actions available for widgets. Several of these involve dragging and dropping a widget. Here are the general steps for doing this. I will reference these steps in the sections below where I'll give more information about setting up for the drag and drop, etc.
  • if you are not in Virtual PC cursor mode, press Num Pad Plus
  • go to the list that contains the widget you want to drag and drop e.g. use the Lists List with Insert Control L (or press L, the List navigation quick key)
  • press I to navigate to the widget (list Item) you want to move
  • route JAWS Cursor to Virtual PC Cursor with Insert Num Pad Minus
  • initiate the drag command with Left Control + Insert + Num Pad Slash
  • switch back to the Virtual PC cursor with Num Pad Plus
  • use the JAWS navigation quick keys or List dialogs to move to the location you want to position the widget
  • route JAWS Cursor to Virtual PC Cursor with Insert Num Pad Minus
  • drop the widget into place with Left Control + Insert + Num Pad Slash
  • switch back to the Virtual PC cursor with Num Pad Plus
  • to confirm that you moved the widget into the correct location, navigate the list with the list Item command (I)
  • when you have completed all of the changes you want to make to your widgets, remember to activate the Save Changes button to have them take effect.

Issues With Using JAWS

The actions available on the Widgets page are accessible if you learn how to use the JAWS cursor commands and if you take the time to confirm that the action was performed correctly afterward. The drag and drop command works best if you switch back to the Virtual PC cursor and use your navigation quick keys to position the Virtual PC cursor at the location you want to drop the item. Finally, you should confirm that the action occurred correctly by navigating the widget list or, in the case of configuration changes, saving the changes and browsing your blog to check that they are present. There is a JAWS command that displays the droppable elements in the ARIA Drag and Drop dialog box (Windows Key + Control + Equals) but the developers of the Widgets page have not coded this information.

Sidebar Widget Movement

You can rearrange the order of the widgets in the sidebar from top to bottom. Follow the steps listed in the General Process for Dragging and Dropping a Widget listed above while considering these additional instructions/comments:
  • the widget name that JAWS announces will precede the widget you are moving
  • you cannot move a widget above the very top widget, so move the desired widget into second place and then move the top one down.

Available Widget To Sidebar Movement

Follow the steps listed in the General Process for Dragging and Dropping a Widget listed above while considering these additional instructions/comments:
  • after initiating the drag command on the widget you want to move into the Sidebar, you need to locate the Sidebar by using the Lists List with Insert Control L or by pressing L, the List navigation quick key until you have reached the Sidebar list; then use I to move to the widget you want positioned above the widget you are moving.

Sidebar to Available Widget Movement

If you want to remove a widget from your sidebar, you need to drag it into the Available Widgets area. Follow the steps listed in the General Process for Dragging and Dropping a Widget listed above while considering these additional instructions/comments:
  • the widget position in the Available Widgets list is irrelevant, so just navigate to the first available widget (using the I navigation quick key) and then drop the sidebar widget; it will appear at the beginning of the Available Widgets list
  • confirm that the widget has been removed from the Sidebar by navigating the Sidebar list (it should be gone) and the Available Widgets list (it should be present).

Configure Sidebar Widget

If a widget in the Sidebar can be modified it will have a Configure "icon" on the right hand side of the rectangle that represents the widget. JAWS reads this icon as "equals". Below are the steps for how to access the Configure icon and its dialog box. The most difficult part of the process is closing the dialog box!
  • if you are not in Virtual PC cursor mode, press Num Pad Plus
  • go to the Sidebar list e.g. use the Lists List with Insert Control L (or press L, the List navigation quick key)
  • press I to navigate to the widget (list Item) you want to configure
  • press down arrow to go to the Configure icon which JAWS announces as "equals" (the widget is not configurable if you hear the name of the next widget instead)
  • route JAWS Cursor to PC Cursor with Insert Num Pad Minus
  • click the Configure icon with Num Pad Slash
  • a popup dialog box appears
  • switch to the Virtual PC cursor with Num Pad Plus
  • locate the form fields in the dialog box with the Form Fields List (Insert F6)
  • complete each field as appropriate, tabbing between them; if you tab out of the dialog box (e.g. number of text widgets dialog box) press Shift Tab to return
  • close the dialog box as follows:
    • route JAWS Cursor to PC Cursor with Insert Num Pad Minus
    • press up arrow until you are in the title bar of the dialog box i.e. you'll hear JAWS speak the title followed by "X"; the X is the icon in the upper right corner of the dialog box that you need to click to close it
    • press the right arrow until you hear JAWS say "X"
    • click the X icon with Num Pad Slash
  • switch to the Virtual PC cursor with Num Pad Plus
  • activate the Save Changes button (e.g. use the Form Fields List to find it) to make your changes take effect
  • go to your blog and check that the changes you made to the widget are present there.

No comments:

Post a Comment