2

This is a component that I'm trying to make accessible:

enter image description here

As I understand, the ARIA Authoring Practices guidelines for drag and drop is basically:

  1. Tab to move through the list of items
  2. Space to select an item
  3. Arrow keys to switch between the dropzone(s)
  4. Enter to Drop

.. which works fine to get the items within the drop zone, but I wonder how should the sortable work?

  • 1
    Are the guidelines you've mentioned really standards? Seems highly non-standard. Could you provide a reference link, please? – Shreyas Tripathy Jun 27 '17 at 6:04
  • 1
    Updated question to reflect the correct accessibility keys set by WAI-ARIA – Shreyas Tripathy Jun 27 '17 at 10:01
2

The W3.org site gives an accessible drag-and-drop example that offers the following key controls:

  • Use the Tab to move to the item you want to move.
  • Select the item you want to move with the Spacebar.
  • Use the Up and Down cursor keys to select a target in the context menu.
  • Press Enter to move the item to the target list.

From this it's not difficult to extract the following controls for your situation:

  • Use Tab to move between items
  • Use space to select an item
  • Use enter to move it between lists (add or remove)
  • Use arrow keys to move an item within a list

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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