Drag-and-drop is a highly interactive and visual interface. We often use drag-and-drop to perform tasks like uploading files, reordering browser bookmarks, or even moving a card in solitaire.
Overview
The article discusses the challenges faced by the GitHub Accessibility team in creating an accessible drag-and-drop sortable list. It highlights specific issues encountered with keyboard navigation, screen reader interactions, and the need for user feedback to improve accessibility.
What You'll Learn
1
How to implement accessible drag-and-drop functionality for keyboard users
2
Why using role='application' should be approached with caution
3
How to effectively announce item movements to screen reader users
4
When to use a move dialog for voice control users
Prerequisites & Requirements
- Understanding of accessibility standards and practices
- Experience with drag-and-drop interfaces(optional)
Key Questions Answered
What challenges do screen readers face with drag-and-drop functionality?
Screen readers often use arrow keys for navigation, which conflicts with drag-and-drop operations. Users relying on screen readers may find that arrow keys do not trigger drag-and-drop actions, leading to accessibility barriers.
How does NVDA handle keyboard events during drag-and-drop?
When using NVDA, pressing Enter or Space simulates mouse events instead of triggering keyboard events. This necessitates a different handling approach for drag-and-drop operations to ensure accessibility for keyboard users.
What solutions were implemented to announce item movements?
To announce item movements effectively, a debounce of 100ms was added to announcements, and aria-live='assertive' was used to ensure that the latest positional announcements are communicated without lag.
How can first-time users be supported in using drag-and-drop?
A dialog with instructions was added to assist first-time users when they activate drag-and-drop via the keyboard. This dialog can be dismissed by users who feel confident in their understanding of the functionality.
Key Actionable Insights
1Implement a move dialog for users who struggle with traditional drag-and-drop.This approach not only assists users with disabilities but also enhances usability for all users who may find drag-and-drop challenging.
2Use aria-live announcements judiciously to enhance the user experience.By ensuring that announcements are timely and relevant, you can prevent confusion for users relying on screen readers.
3Conduct user testing with diverse groups to validate accessibility features.Feedback from actual users is crucial in identifying issues and improving the overall accessibility of your application.
4Be cautious with the use of role='application' in your accessibility implementations.While it can help in overriding default screen reader behaviors, it can also lead to unintended consequences if not scoped correctly.
Common Pitfalls
1
Overusing role='application' can disrupt the expected behavior of screen readers.
This attribute changes how screen readers interpret the content, which can lead to confusion if applied too broadly.
2
Failing to account for rapid movements in drag-and-drop can lead to stale announcements.
Without proper debouncing, users may receive outdated positional information, which can disorient them during interactions.
Related Concepts
Accessibility In Web Development
Keyboard Navigation Best Practices
Voice Control Assistive Technology