Accessibility and Drag and Drop Functionality
Drag and drop interactions in eLearning are not accessible. Thus, I was presented with a conundrum recently when I had to build a software simulation for a drag-and-drop application where users build email templates by dropping objects on a pane.
I looked to the Web Content Accessibility Guidelines (WCAG) for ideas on how to solve this problem.
WCAG 2.2 Success Criterion 2.5.7 states that we should not rely on dragging for user actions, because “some people cannot perform dragging movements in a precise manner. Others use a specialized or adapted input device, such as a trackball, head pointer, eye-gaze system, or speech-controlled mouse emulator, which may make dragging cumbersome and error-prone.”
WCAG suggests we provide a simple pointer alternative to dragging movements.
I took their suggestion and built an interaction with multiple options for users: yes, you can drag and drop if you want to, but you can also tab to focus on the object, or click it, and the object will move along a motion path to the intended target.
Give my method a try here. Drag and drop, tap the book, OR click tab + enter/return on your keyboard to see what happens.
I’m always happy to receive feedback as well, as I am continually learning about digital accessibility and by no means am I an expert.
How have you made your digital learning solutions more accessible recently?
