WCAG 2.2 (AA) SC 2.5.7 Dragging Movements (w3.org)
Issue description
WCAG 2.5.7, “Dragging Movements” addresses the challenges that drag-and-drop interactions can create for users with motor impairments who may have difficulty with precise mouse or touch movements.
Many websites and applications use drag-and-drop for various tasks, such as:
- Reordering items: Dragging items to rearrange their order in a list.
- Moving objects: Dragging objects to different locations on a map or within a game.
- Uploading files: Dragging files from the user’s computer to a designated area on the web page.
However, drag-and-drop interactions can be difficult for people with:
- Tremors: Users with tremors might find it challenging to keep the pointer steady while dragging.
- Limited dexterity: Users with limited dexterity might have difficulty coordinating the mouse or touch movements required for dragging.
- Cognitive disabilities: Users with cognitive disabilities might find it difficult to understand or remember the drag-and-drop sequence.
WCAG requirements
This guideline requires that for functionality that involves dragging movements, at least one of the following is true:
- Drag-and-drop is not essential: The same task can be performed without drag-and-drop, using alternative mechanisms like buttons, keyboard controls, or menus.
- Target can be reached with one-pointer activation: The drag-and-drop target can be reached with a single pointer activation (e.g., a click or tap), without requiring dragging.
- Dragging is not required: The user can complete the task without any dragging movements, such as by selecting the item and then selecting the destination.
Benefits
- Improved accessibility: It ensures that users with motor impairments can still perform the intended actions without needing to rely on precise drag-and-drop movements.
- Enhanced usability: It provides alternative ways to complete tasks, making the interface more flexible and user-friendly.
- Reduced frustration: It prevents users from struggling with drag-and-drop interactions that might be difficult or impossible for them to perform accurately.
Essentially, this guideline promotes accessibility by ensuring that drag-and-drop functionality is not the only way to complete a task, providing alternative methods that are easier for users with motor impairments to use.
Who this issue impacts
Follow the links for additional information on user impairments:
Suggestions for remediation
Remediating WCAG 2.5.7, “Dragging Movements” involves providing alternatives to drag-and-drop actions, ensuring that users who cannot perform precise dragging movements can still complete the tasks. Here’s how:
Provide alternative mechanisms
- Buttons or links: Offer buttons or links that perform the same action as the drag-and-drop interaction. For example, instead of dragging an item to a trash can to delete it, provide a “Delete” button next to the item.
- Keyboard controls: Provide keyboard shortcuts or other keyboard interactions that replicate the drag-and-drop functionality. For example, allow users to use arrow keys to move items in a list or to select an item and press Enter to move it to a new location.
- Menus and selection controls: Use menus or selection controls (e.g., dropdowns, lists) to allow users to choose the source and destination for moving items or changing their order.
Make drag-and-drop optional
- Don’t rely solely on drag-and-drop: If drag-and-drop is used, ensure that it’s not the only way to complete the task. Provide alternative methods as described above.
Simplify drag-and-drop (if essential)
- One-pointer activation: If drag-and-drop is essential, consider ways to simplify it. For example, allow users to select an item with a single click and then click on the destination to move it, rather than requiring continuous dragging.
- Visual cues: Provide clear visual cues to guide users during the drag-and-drop process, such as highlighting the draggable item and the drop target.
Provide clear instructions
- Explain alternatives: Clearly explain to users that alternative input methods are available and how to use them.
- Demonstrate: Use tutorials or examples to demonstrate how to use the alternative methods.
Testing
- Test alternative methods: Thoroughly test all alternative input methods to ensure they are functional and easy to use.
- Assistive technology testing: Test with assistive technologies to ensure that users can access and operate all functionality without needing to perform drag-and-drop actions.
Examples
- Reordering list items: Provide buttons to move items up or down in a list, as well as keyboard shortcuts for the same actions.
- Moving objects on a map: Allow users to select an object and then choose a destination from a list or menu, instead of dragging the object.
- Uploading files: Provide a traditional file upload button in addition to drag-and-drop functionality.
By implementing these techniques, you can make your website or application more accessible to users with motor impairments, ensuring that everyone can interact with the content and complete tasks effectively, regardless of their ability to perform precise drag-and-drop actions.
