We made drag-and-drop interfaces accessible by allowing users to TAB through the original list, press ENTER on the item they want to move, then use the arrow keys to move the item and press ENTER again when done (or ESC to cancel). After each move, the item's current position, and any necessary local context, was announced via `aria-live` region.
There are other ways that this can be accomplished with even fewer keystrokes, so I can't imagine a scenario where drag-and-drop interfaces would have to be avoided because they couldn't be made meaningfully accessible.
Comments
thanks for that insight. that kind of throws drag and drop interfaces out the window
We made drag-and-drop interfaces accessible by allowing users to TAB through the original list, press ENTER on the item they want to move, then use the arrow keys to move the item and press ENTER again when done (or ESC to cancel). After each move, the item's current position, and any necessary local context, was announced via `aria-live` region.
There are other ways that this can be accomplished with even fewer keystrokes, so I can't imagine a scenario where drag-and-drop interfaces would have to be avoided because they couldn't be made meaningfully accessible.
do you have a demo or a gif or this? would love to see it
I can't share the work I referred to above, but it was very similar to the last example on this page: https://salesforce-ux.github.io/dnd-a11y-patterns
Disclaimer: I have no affiliation with Salesforce or the creation of that example page. I just found it in a web search.