Understanding WCAG SC 2.5.7 Dragging Movements
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.
Note: This requirement applies to web content that interprets pointer actions (i.e. this does not apply to actions that are required to operate the user agent or assistive technology).
The intent of this success criterion is to ensure that functionalities such as drag and drop are made accessible to users with motor disabilities. Not all users can drag and drop an element using the mouse or perform long press, drag, and slide gestures on touch devices to rearrange elements in a web or mobile application.
In this scenario, the user must be provided with the ability to move the content block using a button or other alternative techniques. For instance, in a range slider, the user can be presented with a text field to input the desired range, serving as an alternative method.
One of the classic examples is the ability to rearrange content blocks in the WordPress editor. Here, a button enables the user to move the content block from one section to another and provides necessary feedback.
A video demonstrating the drag-and-drop alternative in the Gutenberg editor.
Transcript
Hi, my name’s Raghavendra Satish Peri from DigitalA11y.com. And in this video, we are going to see an example on Gutenberg editor where to drag and drop a particular element. We will use a keyboard and observe how feedback is provided to screen reader users. This example demonstrates dragging movements, which is covered in WCAG 2.2.So, I’m on the Gutenberg editor. I have a post open here and a section. Screen reader: “You work out of region magnetic post way area.” I just checked the page title, and I’m on the post. I’m going to navigate to a paragraph. Screen reader: “Saying let clickable optional title, block, paragraph document editable, one or more emphasized characters, paragraph block.” I moved into forms mode in the paragraph so that I can read the paragraph content. Screen reader: “Table of contents block, paragraph block, row two. Heading block, paragraph block, row two, one or more emphasized characters, paragraph block, row two, one or more emphasized characters.”
If I press Shift + Tab from here. Screen reader: “Table of contents block, row one, table of contents paragraph block. You are currently in edit mode to return to the net.” First, I pressed edit and moved into the edit mode by pressing Enter. Then I pressed Shift + Tab. Screen reader: “Block Tools toolbar high block tools button.” I moved into the block tools. There is an alternative way in the form of buttons that I can use to drag within the blocks here. I can move the paragraph block that is in block level two to even level 10, level three, or level four. Feedback will be provided to screen reader users.
Screen reader: “Section paragraph menu button collapse submenu pair move up move paragraph block from position two up to position one. Move down button, move paragraph block from position two down to position three. Use arrow keys to navigate between the elements here in the toolbar.” If I press Enter here. Screen reader: “Move paragraph block from position three down to position four. Move paragraph block from position four down to position five.” That is the way it moves the paragraph block from one section to another section. I can do this with any block in the system here.
Screen reader: “Move paragraph block from position three up to position two. Move paragraph block from position two up to position one.” If I want to move another block. Screen reader: “Printable add title add clickable optional title at block, block hidden document editable description. Block heading document editable description. Description selected T block Tools toolbar, section heading menu button, move up and move heading block from position three up to position two. Move down button, move heading block from position three down to position four.” It is the same feedback again.
We can use this technique to pass dragging movements, and this is the alternative way. Mouse users can drag the paragraph block from position two to position four directly. But for keyboard and screen reader users, this is the alternative technique. This is the end of the video. Thank you.
Points to Ponder
- Ensure Alternative Functionality: Wherever drag and drop functionality is employed, it’s crucial to provide an alternative method. This ensures that users with diverse abilities can interact with the interface effectively.
- Simplify Single Pointer or Touch Interaction: Ensure that interactions involving a single pointer or touch are intuitive and don’t burden users with excessive cognitive load. Simplify actions to enhance user experience and ease of use.
- Simplicity in Design: Keep the user experience simple. During the design process, evaluate whether such complex functionalities, like intricate drag and drop features, are truly necessary for the product. Strive for elegance in simplicity to enhance user understanding and engagement.
Hi Raghavendra,
It was a good demonstration. Could you also explain or comment here regarding how to handle the file selection. We have a component where we can drag and drop files, Also the same widget has a link to open the file selection window from the system. Does it meet the success criteria.