Accessing Drupal 7 Table Drag with JAWS 10

Posted:

Dragging and dropping or re-ordering objects is a challenge for screen-reader users on pretty much any platform, especially on the web. There are some solutions, like the Fluid Infusion Image Reorderer, which uses WAI-ARIA to create an accessible experience for users of assistive technologies that support WAI-ARIA. Drupal implements a complex UI component called "table drag". A table drag UI control is essentially a table which provides users with the ability to reorder rows by dragging and dropping.

There has been some discussion of how to make table drag accessible to those users who cannot use the mouse at Drupal issue #448292 - Drag and Drop for table rows is not accessible to screen-reader users. It is important to note that the UI does provide the ability for users to re-order rows using the keyboard. However, there are no instructions provided to users on how to accomplish this. Even with instructions, performing a table drag would be difficult for a screen-reader user, as the UI does not implement WAI-ARIA roles, and therefore a screen-reader user wouldn't know where they were moving a row. Today I was playing around with the table drag and noticed that I was able to reorder rows with JAWS 10 in Firefox 3.6. Again, I had to guess at where the rows were landing in the table, as the UI is not currently designed in a way that provides information to assistive technology about what row has moved where.

The following instructions should enable a JAWS 10 user to use table drag with Drupal (and should also work with some older versions of JAWS).

  1. Open a Drupal page that contains a table drag UI component.
  2. Navigate to the row of the table that you would like to re-order.
  3. Using the Tab, or Shift + Tab, keys place focus on the "Drag to re-order" link, which appears in the first column of the row.
  4. Disable the "Virtual Cursor" by pressing JAWS Key + Z.
  5. Use the Up and Down arrow keys to move the row within the table.
  6. Enable the "Virtual Cursor" by pressing JAWS Key + Z again (you may need to do this twice).