Plenty of websites offer a ‘drag and drop’ feature, providing users with an interactive and inclusive experience. It is, without doubt, a powerful tool to help users perform a range of tasks efficiently.
Users can effortlessly rearrange items within an application, for example, moving task cards in Trello or uploading documents on Google Drive. They can also move items from one application to another using drag-and-drop gestures.
With drag-and-drop functionality, it is particularly easy for a normal user to organize files in their cloud storage, reorder tasks in a to-do list, or adjust elements in a website using a web-based application. That’s one side of the story.
What about users with special requirements? Does this functionality equally benefit users with disabilities? In reality, people with disabilities often face drag and drop accessibility challenges, and addressing these issues has become a necessity for websites operating in the United States.
All national and government websites operating in the US need to comply with the Website Content Accessibility Guidelines (WCAG) to ensure everyone, including people with disability, has equal opportunities to access their content.
Among other elements, such as smooth navigation, clarity of information, accessible content format, etc., websites also must provide an alternate way to the ‘drag and drop’ functionality—also called drag and drop accessibility.
With the introduction of WCAG 2.2, new guidelines have been established to ensure that drag-and-drop functionalities are inclusive.
In this post, we shall explore the WCAG guidelines, including WCAG 2.2, and see how accessibility challenges related to drag-and-drop interactions can be addressed. We shall also explore the best practices for ensuring compliance while maintaining usability.
WCAG 2.2 and Dragging Movements: An Overview
Understanding Success Criterion 2.5.7: Dragging Movements
WCAG 2.2 introduces Success Criterion 2.5.7, titled “Dragging Movements,” which requires that any function using a dragging motion must also be achievable through a single pointer action without dragging unless the action is essential.
The Success Criterion states:
“All functionality that uses a dragging movement for operation can be achieved by a single pointer without dragging, unless dragging is essential or the functionality is determined by the user agent and not modified by the author.”
This criterion ensures that users who rely on alternative input methods, such as keyboard navigation, speech recognition, or assistive devices, are not excluded from interacting with drag-and-drop functionalities.
Developers must provide alternative methods, such as buttons, keyboard shortcuts, or numerical input fields, to achieve the same action without requiring a dragging gesture.
This not only improves accessibility but also enhances usability for a wider audience, including those using touchscreen devices with limited precision or experiencing temporary impairments.
Why Need Success Criterion 2.5.7
Users relying on assistive technologies such as Screen Readers, alternative input devices, or keyboard navigation may face drag and drop accessibility issues.
For example:
- For online users with cognitive disabilities, drag-and-drop movements can be confusing
- People with motor impairments may find it difficult to hold a mouse button and move the device simultaneously.
- Those using speech-controlled devices may not be able to use dragging movements like normal individuals.
- Similarly, people relying on eye-tracking devices for online interaction can’t use this feature because of the limitations of the devices.
For these people, website owners must develop alternative input methods to enable drag and drop accessibility. They must find accessibility solutions to comply with the WCAG 2.2 Success Criterion 2.5.7.
Common ‘Drag and Drop’ Accessibility Challenges
The basic purpose of the WCAG’s ‘Dragging Movements’ is to limit reliance on dragging for user actions. So, website owners and developers must provide an alternate way (a single pointer alternative) for any action that involves ‘dragging.’
Let’s understand different kinds of tasks associated with ‘dragging movement’ and how you can provide an alternative way to facilitate users with disabilities.
The tasks linked with ‘dragging movement’ can be categorized into:
1. Rearranging Items in a List
There are many websites and mobile applications that allow users to rearrange items in a list by simply dragging and dropping them.
The table below shows different types of online applications that implement this feature.
| Category | Example | Description |
| File organization systems | Google Drive | Users can upload documents, images, and other file formats by simply dragging them onto the cloud storage interface. |
| Task management platforms | Trello, Monday.com, and Asana | Users can drag and drop tasks between different categories. They can reorder the tasks within a list. |
| Email and communication systems | Gmail, WhatsApp, Airdrop | Users can attach files to their emails and messages using this feature. |
| Video/Music streaming services | Spotify and Soundcloud | Users can rearrange videos and songs in a playlist |
While this feature is quite convenient for normal users, it may pose big challenges for people with disabilities. For example:
- Motor impairments: Users with tremors or limited dexterity are often incapable of dragging the mouse while holding the mouse button simultaneously.
- Keyboard navigation: Users who are totally reliant on a single point of input (keyboard) will struggle to use this feature. They need alternative accessibility solutions.
- Assistive technologies: Text-to-speech software and screen readers often lack features to detect and interact with draggable elements.
To align with WCAG guidelines, developers should offer alternative ways to reorder list items.
What Are the Possible Accessibility Solutions?
- Up and down buttons: One effective approach is incorporating up and down arrow buttons next to each item, allowing users to move them sequentially.
- Move-to-position menu: Implementing a “move to position” menu, where users select the target location from a dropdown or list, provides an accessible and efficient way to reorder elements.
- Assign numerical values: Another method is enabling users to enter a numerical order value manually, ensuring they can precisely place items without needing to drag them.
2. Sorting and Categorizing
Drag-and-drop sorting mechanisms are widely used across different industries. Examples include:
- Kanban boards — Jira and Trello
- eCommerce platforms — merchants organize products within a catalog
- Educational tools — Learning management systems (in which users can categorize quiz answers or organize study materials).
Drag-and-drop functionality allows many users to have an efficient and intuitive sorting experience. On the other hand, people with disabilities may face accessibility barriers while using this feature.
| Users with disabilities | Accessibility Barriers |
| Individuals with cognitive disabilities | It can be difficult for them to understand how to manipulate elements through dragging motions. |
| Individuals relying on alternative input devices | Interacting with sorting interfaces with switch controls or voice commands is virtually impossible. |
Preventing Barriers with Alternative Accessibility Solutions
Developers should find creative ways for these individuals to sort or categorize items using their respective devices. For example:
- Implementing a dropdown menu with items: This approach helps people with the disabilities mentioned above to sort items by simply selecting an item and then choosing a category from a dropdown list.
- Providing keyboard shortcuts: Developers can design keyboard shortcuts, allowing users with disabilities to move items from one category to another quickly.
- Add a “Move” button: You can simply implement a “Move” button to open a menu of destination categories. Users can simply select the desired category to move a particular item.
3. File Uploaders (Dragging Items to Drop Zones)
As mentioned earlier, you can upload files on Dropbox or Google Drive by simply dragging them into particular spots called “drop zones.” This feature is common among modern applications, such as file conversion applications, image editing software, etc.
This approach has significantly improved user experience and is proving to be more efficient than the tedious technique where a user had to:
- Locate the file in their computer
- Manually upload it to the concerned platform
However, individuals experiencing disabilities may have trouble interacting with this feature. This is especially true for users who rely on keyboard inputs.
Moreover, visually impaired users who rely on screen readers may not know in the first place about the presence of a drop zone, let alone interact with the feature.
Addressing the Problem
Developers can resolve this issue by implementing an old-school technique—the “Browse Files” button along with drag-and-drop functionality. This way, users can select files and manually upload them to the desired platform.
The interface must support keyboard navigation, allowing users to:
- ‘Tab’ through elements
- Activate file uploads by pressing the ‘Enter’ key
There must be clear labeling and instructions for screen readers to interpret the purpose of the drop zone and how to engage with it effectively.
4. Sliders and Ranges
Streaming platforms, designing apps, and eCommerce stores offer sliders to set or adjust numerical values. For example:
- A volume slider allows you to set appropriate levels
- You can adjust the brightness of a video or picture using a slider
- The price range slider allows you to filter products that meet your budget
In short, sliders offer a smooth and sophisticated way to control numeric values. That said, users with disabilities may find it difficult to use a slider.
- People with limited dexterity may struggle to apply pressure on the mouse button and drag it to adjust the price range or set the volume.
- Similarly, screen reader users may be unable to interact with the slider or use it effectively as the software may not convey the exact location of the slider.
Accessibility Solutions for Slider and Ranges
Website owners and developers should provide an alternative solution to sliders.
- They can incorporate numeric fields so that users can enter exact values manually instead of dragging the slider.
- Keyboard shortcuts must be there to adjust volumes and price ranges. A good way would be to assign arrow keys as drag and drop accessibility solutions.
- You can also include preset buttons — Low, Medium, and High—to simplify the adjustment process.
Ensuring Drag and Drop Accessibility: Best Practices
While understanding and following the WCAG Guidelines is important, you can also learn from the following best industry practices to the web accessibility standards:
Keyboard Navigation
You need to ensure that the drag-and-drop functionality on your website is aligned with keyboard navigation. This means users can access your content by using just a keyboard.
Smooth keyboard navigation involves:
- Moving through draggable elements
- Selecting the elements
- Repositioning them efficiently
So, how can you implement keyboard navigation as an alternative to drag and drop accessibility?
There are certain keys that are commonly used for navigating websites:
- The Tab Key: You can enable the ‘Tab’ to navigate through the interactive elements. This allows users with disabilities to focus on items that they want to move.
- Arrow Keys: After selecting an item, users can reposition it with the help of Arrow keys.
- Spacebar or Enter Key: You can set either key as an activation mechanism. For example, users can pick up and drop items using Enter key.
Use ARIA Roles and Attributes for Visually Impaired Users
Implement ARIA roles and attributes effectively. Here are some examples:
- When moving an item: Assign “aria-grabbed=”true” to help assistive technologies (Screen Readers) recognize the change in state so they can interpret the same to visually impaired users.
- Where to drop the item: Assign “aria-dropeffect”attribute to indicate where an item can be dropped.
Also, label all the drag-and-drop elements with short yet meaningful text. This allows assistive technologies to understand the purpose of each element.
Clear Visual and Auditory Feedback
Highlight selected items, providing clear feedback to the user. You can simply change the color of the selected items so that users can understand what items are being dragged.
Also, you can incorporate auditory feedback by adding a subtle sound effect, giving an impression that the item has been successfully picked or dropped.
These multi-sensory cues make drag-and-drop interactions more accessible and intuitive for a diverse range of users.
Conduct Regular Accessibility Testing
After implementing the above-mentioned best practices, it is important to test the accessibility of your website. For this purpose, you can use online tools like Accessibility Spark.
- Simply head over to the ‘Free Audit’ page
- Fill in the details
- Click “Get Result” to get a comprehensive report via email.
Accessibility Spark checks your website across multiple accessibility standards, including WCAG 2.2 (AA).
Even better, you can choose an appropriate pricing model for round-the-clock monitoring to keep your website accessibility intact.
Final Words
With WCAG 2.2 Success Criterion 2.5.7, website owners must provide alternative input methods to ensure drag and drop accessibility for the disabled.
However, this is just one aspect, along with plenty of others, that websites must comply with in order to meet WCAG standards.
Professional services, such as Accessibility Spark, can help you understand your website’s current state.
Accessibility Spark offers comprehensive reports across multiple web accessibility standards recognized worldwide. Along with free assessment, it also offers affordable packages to monitor your website’s accessibility 24/7.
Don’t wait till it’s too late.