Loading...
Loading content...
Loading content...
Provide alternatives to drag-and-drop interactions like buttons or direct input.
Why it matters: Users with motor disabilities may struggle with precise dragging movements.
All functionality that uses a dragging movement for operation can be achieved by a single pointer without dragging, unless a dragging movement is essential.
What This Means: This success criterion requires that any functionality using drag-and-drop interactions must also be available through alternative methods that don't require dragging. Users should be able to achieve the same result with a single click, tap, or keyboard interaction.
Why It's Important: Dragging requires precise motor control and sustained movement, which can be difficult or impossible for users with motor disabilities, tremors, or limited dexterity. Some assistive technologies may not support dragging movements. By providing alternatives, you ensure all users can access functionality.
For sortable lists, provide up/down buttons or arrow keys. For sliders, add number input fields or increment/decrement buttons. For file uploads, always provide a file input button in addition to drag-and-drop. The key is that users should be able to accomplish the same task without dragging. Dragging can still be available as an optional enhancement.
This criterion ensures that users with motor disabilities can access and understand the content, improving their overall experience and ability to use the website effectively.
This criterion ensures that mobile users can access and understand the content, improving their overall experience and ability to use the website effectively.
This criterion ensures that users with tremors can access and understand the content, improving their overall experience and ability to use the website effectively.
Impact: When this criterion is properly implemented, it removes barriers for these user groups and creates a more inclusive web experience for everyone.
A slider that can only be adjusted by dragging, with no alternative input method.
<div class="slider" onmousedown="startDrag(event)"></div>A slider that can be adjusted by dragging OR by typing a value in an input field.
<div class="slider" onmousedown="startDrag(event)"></div>
<input type="number" min="0" max="100" value="50" onchange="updateSlider(this.value)">This success criterion benefits the following user groups:
Tip: Use this checklist during development and testing to ensure all requirements for 2.5.7 Dragging Movements are met. Check off items as you complete them.
To meet this success criterion, ensure the following requirements are met:
While meeting the minimum requirements ensures compliance, consider these enhancements for a better user experience:
If I provide drag-and-drop, that's enough - users can figure out alternatives.
You must explicitly provide alternatives. Users shouldn't have to figure out workarounds. Alternatives must be clearly available.
Keyboard navigation counts as an alternative to dragging.
Keyboard navigation is required separately (2.1.1). For drag-and-drop, you need specific alternatives like up/down buttons or form inputs that achieve the same result.
Sortable lists that only work with drag-and-drop.
Add up/down buttons or arrow keys to reorder items. Provide a form interface where users can enter positions.
File upload that only works with drag-and-drop.
Always provide a file input button as the primary method. Drag-and-drop can be an enhancement.
Sliders that only work by dragging.
Add number input fields or increment/decrement buttons. Allow users to type values directly.
Note: These are official W3C resources for 2.5.7. For the most up-to-date information and detailed technical guidance, always refer to the official W3C documentation.
Implementing 2.5.7 Dragging Movements correctly requires understanding your specific context. Code solutions vary significantly based on multiple factors:
HTML, React, Vue, Angular, PHP, Python, and other frameworks each have different patterns and best practices.
Server-side rendering, client-side rendering, static generation, and hybrid approaches require different solutions.
Your existing components, styling approach, and UI library influence how accessibility must be implemented.
Your specific user base, content type, and interaction patterns determine the most appropriate implementation.
We provide tailored implementation guidance by analyzing your specific technology stack, coding patterns, design system, and project requirements. Our team reviews your codebase and provides custom solutions that integrate seamlessly with your existing architecture.
Get Custom Implementation HelpPart of
Operable PrincipleGuideline
2.5 Input Modalities