2

I have a component comprising a list of entries which can be re-arranged by the user, removed, or added to. The add/remove functionality and in-list navigation is easy to mark-up with ARIA attributes, but the movability functionality has me uncertain. On the left hand side, each item has a small handle button which a user can use to begin dragging the element to a new position.

I read a bit about approaches to draggable elements in regards to ARIA, and felt that in my case, since this is strictly a simple vertical list, it would make a whole lot more sense to augment this handle (which is tabbable) with keydown behaviors than to try to "describe" complex draggability in aria terms. That would be a lot of complexity for no gain, and would be confusing since in this case the dragability is for convenient sorting, not for "I am putting x over inside y" concepts. The up and down keys make perfect sense as an alternative for this, and that solution has the bonus quality of potentially being a useful shortcut for all users.

However I wasn't sure if it was okay to use the up and down keys like this without somehow marking the element in question, since in other situations up and down are navigational and cause no change in the data model. I can label it with non-visible instructions or something, but I don't know if that's adequate.

Should I use different keys? Note that, if so, I lose the advantage of this functionality being easily discoverable for non-ARIA users. Is there a role that would make it "okay" to use the arrow keys this way? And is aria-label an appropriate place for explaining what the available actions are, or is that reserved for inputs?

2 Answers 2

3

We use ctrl+shift+up / ctrl+shift+down to move an item within a list. We've used this behavior in several of our apps and it seems to work well. So you can tab to the list, use up/down to move the focus/selection within the list, or use shift+up/down to make an extended selection, or use ctrl+up/down to make non-contiguous selections (all standard list keyboard behavior), and then use ctrl+shift+up/down to move the entire selection up or down.

We also support drag/drop for reordering but the ctrl+shift+up/down is how the keyboard or screen reader user can reorder things.

2
  • 1
    Both your answer and unobf's are really helpful, thanks. Since in my case multiple list items can't be selected, just using ctrl+up/down seems perfect. I think I should implement this over the entire item instead of just the handle, since the list items are already arrow-navigable and it sounds like this will best match user expectations from what you've described. Then the drag handle can be aria-hidden since its functionality will be provided accessibly by the parent element instead.
    – Semicolon
    Oct 7, 2015 at 23:35
  • 1
    Whatever key you use, I agree it should work on the whole row. You shouldn't have to put focus on the handle before using the keyboard shortcut. But I'm saying that without knowing all the details of your scenario. Oct 8, 2015 at 20:24
3

The biggest hurdle you will face here is that not all screen readers will send the arrow key events to the JavaScript event handlers. The only way to guarantee this is to use an ARIA role of "menuitem" (or one of the other roles that send the events correctly) on the element.

So what you will likely want to do is add a "menuitem" button that toggles into a state where the element is "grabbed" and then allow the arrow keys to be used to move the element up or down.

You can add a tooltip (or help text that shows when the state is toggled) to help keyboard-only and screen reader users understand what keys should be used to move the element. You can associate this help text with the widget using aria-describedby to point ot the ID of the help text element.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.