Drag-and-drop functionality can give users more control over content, which can open up exciting possibilities for web designers. The idea is simple: A user acquires a visible object onscreen by clicking it, drags the object to another part of the screen, and releases the object (typically by letting go of the mouse button).
Some common examples of drag-and-drop motions:
- Using a kanban system in a web app to track work productivity.
- Adjusting the width of a spreadsheet column to view more data.
- Dragging a file to place it in a folder on a cloud storage app.
Drag-and-drop movements can make the internet more intuitive and useful, but they can also create accessibility issues. Many people use alternative input devices like speech-controlled mouse emulators, which might not be able to perform the drag-and-drop movement. Other people might use a mouse and keyboard, but they may not have the necessary fine motor skills to handle the action easily.
To build an accessible website, you’ll need to consider the experiences of these users. That doesn’t mean that you shouldn’t use drag-and-drop movements, but by providing alternatives, you’ll avoid creating accidental barriers (and serious frustrations for your users).
The WCAG framework directly addresses drag-and-drop accessibility
The Web Content Accessibility Guidelines (WCAG) are the most commonly cited accessibility standards for digital content. Built on a principle-based approach, WCAG establishes success criteria for accessible websites, and several of those success criteria apply directly to drag-and-drop movements.
WCAG Success Criterion (SC) 2.1.1, :Keyboard,” requires all content to be operable with a keyboard “without requiring specific timings for individual keystrokes, except where the underlying function requires input that depends on the path of the user's movement and not just the endpoints.”
We’ve written extensively about the importance of keyboard accessibility, and following this guideline will resolve many accessibility issues with drag-and-drop motions. If the user is able to use a keyboard to operate the controls, they have an alternative. For instance, instead of moving a kanban card with a mouse, a user might be able to open a drop-down menu to move the card to the correct column.
WCAG success criteria are organized into three levels of conformance: A (lowest), AA, and AAA (highest). WCAG SC 2.1.1 is a Level A criterion, so all sites need to pass this guideline in order to be considered reasonably accessible.
However, it’s important to understand that people with disabilities aren’t a monolith: Some people use assistive technologies instead of a keyboard. Wherever possible, it’s important to accommodate those users.
Even if a site is keyboard-accessible, developers should provide a single-pointer alternative
All websites have users with disabilities, and those disabilities affect browsing behavior in a variety of ways. Some people use assistive technologies like eye-gaze systems, head pointers, and speech-controlled mouse emulators; others use modified smartphones and tablets. Performing drag-and-drop movements with these technologies may be difficult or impossible for some people.
Good design should accommodate users' preferences, and simply providing keyboard access won’t accommodate every person. WCAG addresses this issue in Success Criterion (SC) 2.5.7, which reads:
All functionality that uses a dragging movement for operation can be achieved by a single pointer without dragging, unless dragging is essential.
For the purposes of the guidelines, “dragging motions" refers to instances where the start and end point of the motion matters, but not the actual path. “Single pointer" refers to pointer input that operates with a single point of contact with the screen.
In practice, this guideline can help web developers create more usable content. To use our example from earlier, a user could move a kanban card by moving the card by tapping with a single pointer; other users can still drag and drop the card, but the site is still intuitive for people who use single-pointer technologies.
Sites can be accessible while still offering drag-and-drop controls
Jesse Hausler, Principal Accessibility Specialist at Salesforce, provided detailed guidance for accessible drag-and-drop interactions in a 2017 piece published on Medium. That piece is an excellent starting point for developers who are looking for creative ways to expand accessibility while using drag-and-drop elements.
Interactive elements can create issues, but when sites are designed with an accessible mindset, these issues can be addressed and resolved early in the development process. By working with accessibility experts and using the WCAG framework, you can expand your audience and provide a better experience for all users. The Bureau of Internet Accessibility offers a Compliance Roadmap hub to help developers, designers, and programmers take the first steps.
