Drag-n-drop accessibility strategies

I'm worried our strategy is lacking to solve Drag and Drop for table rows not accessible to screen-reader users. This issue is flagged as critical for Drupal 7 and it's very important for accessibility of many admin screens in Drupal core and contrib.

Not accessible or usable

So far the patches in the issue queue allow users to choose to disable the javascript drag-n-drop and instead keep the weight and parent fields available.

That is a good start, but I believe the resulting interface is still bad for accessibility and usability.

I've attached a screenshot of a typical drag-n-drop interface (/admin/structure/menu/manage/management). The screenshot shows the form without javascript drag-n-drop. The draggable handles are not added in, and the weight and parent fields are visible because they haven't been removed.

But this interface is a challenge for accessibility and usability:

1. Weight and parent fields do not have labels
2. Parent field is not even named anywhere (at least Weight is the name of the table column header)
3. Rows do not have a table header (so when a screenreader is reading a cell in the middle of the table somewhere, it cannot use row and column headers to put the cell in context)
4. Weight is just a meaningless number, and you have to jump all over the page to compare to the weight of siblings (while ignoring all the weight numbers for non-siblings)
5. Parent is more meaningless because you cannot find the ID number of an item anywhere on the page, so you truly have no idea what to enter in the parent field

New Strategies

So how can we solve this? Here are a few proposals:

Meaningful weight options

Display the weight values with meaningful names. Instead of "-9" the option in the weight dropdown would be "-9: Roles". So as you choose weight from the list, instead of just numbers you would be choosing names of where you want to put your item next to. If there are multiple items at that weight already it can say "0: File system and 2 others" or "0: File system ... Image toolkit".

Choose a parent by name

The parent field should be a dropdown select field with options for every other item. In the case of menus, the dropdown would list all menu items by their name, not ID. It would be an optional field that defaults to the item's current parent or 'Top-level item'. Leaving an item as 'Top-level item' would keep its parent ID as 0.

Labels and column headers

• Weight and Parent fields get a label
• Parent field gets its own column with a column header
• The name of each row should be tagged as the row header (thead span="row")

Feedback?

Do these suggestions make sense?

Do they begin to solve the challenges of accessibility and usability, both for people using assistive technology and also making these screens work for users without javascript?