We all often come across a game, activity, form, or website where we must perform Drag & Drop functionality to complete our task. It can be enjoyable for some or it may be a serious pain for some of us to do so!
My experience of Drag & Drop largely revolves around games, along with the day-to-day activity where I need to move files or mails from one place to another. Yes, it’s that simple! Drag a file and Drop into another location.
Having said this, I was involved in serious gaming before, which consisted of MMORPG’s (Massively Multiplayer Online Role-Playing Game) where I used to meet the players online to form a sort of clan (group) to complete various objectives. Once, the members from different clan along with mine planned for a Meetup at an HQ (Game Headquarters). This is where, I met one of my clan member Nemanja, for the first time in a person. He brought along his brother Aleksandar. His brother was a visually impaired person. Although what I heard from Nemanja was that, his brother was an avid gamer as well. That intrigued me! Wouldn’t anyone be? So, I got talking to Aleksandar to understand what kind of technology provides him the ability to perform different task along with the gaming. I then found out, he was using different kind of screen readers like JAWS, NVDA, Narrator, etc.
Honestly, it was pretty cool to see, what I was able to do using a mouse and keyboard with the help of my vision, he was able to do with a screen reader and a keyboard. Aleksandar then offered me to play a game of Tic Tac Toe with him, which I was really excited to, knowing he would be using a screen reader and a keyboard to place the “X” and “O” in the respective block. I have to say I lost that game, but I got to learn something as well. After talking more with Aleksandar, he said how accessible the game was which made him to play it smoothly. Then we also talked about other games.
We wouldn’t want to dive into high end gaming here, would we? Nah, that is completely a different level of complexity and we don’t want to go there for now. Who knows maybe some other day 😊. So, coming back to the topic, the idea behind working of a Tic Tac Toe is? Yeah you guessed it right! A drag and drop logic!
Drag & Drop functionality is basically performed within a graphical user interface (GUI). In layman’s term, it involves moving a pointer over an object, selecting it, and moving it to a new location. It’s that simple!
In day to day world, drag and drop is being used for multiple purposes. For example, you can drag and drop an icon on the desktop to move it to a folder. You can perform drag and drop on an open window by activating the title bar and moving it to a new location. Other examples would be programs allowing you to open the files by dragging and dropping file icons directly onto the application icon. On a website, drag and drop functionality is used for various games or questionnaires as well. Having said this, on the contrary it is not an easy task to make the drag and drop functionality accessible. Although, it’s not impossible!
“Dragging” the object in Drag & Drop
- If you are using a mouse, you can drag an object by clicking the mouse button to select an object, then moving the mouse while keeping the mouse button pushed down. This is called dragging of an object.
- If you are using a touchscreen device, you can select an item by simply touching it with your finger. (For selecting an object, some interfaces may require you to hold your finger on the object for a second or two.) Then you can drag the item by moving your finger across the screen to desired place.
“Drop” the object in Drag & Drop
- Using a mouse, once you have moved the object where you want to place it, you can release the mouse button to drop the object in the new location.
- While using a touch screen, simply lift your finger off the screen to drop the object.
“Drag & Drop” interaction for a keyboard and screen reader users
We will cover here about creating accessible Drag and Drop functionality; including ARIA and non-ARIA techniques i.e. using a standard HTML. Specifically, to achieve equal functionality for all user types, keyboard and mouse events must be cross-referenced, and accessible feedback must be provided to convey the role, state and response of draggable objects to screen reader users.
While making any interaction accessible with both the keyboard and for screen reader users, fundamentals are necessary i.e. providing three basic pieces of information: identity, operation, and state.
For a user interacting with an element, as basic as a checkbox, or as complex as drag and drop experience, we need to ask ourselves at least the below three questions:
- Identity: What element I am interacting with?
- Operation: How do I access the element?
- State: What is the current state of the element?
Since we all are so familiar with the use of ARIA-Grabbed and ARIA-Dropeffect which will convey Draggable, Grabbed, and a subset of drop effects such as Droppable, along with the state of grab i.e. when grab is set to true, it has been selected for dragging, supported indicates that element is grabbable, but is not currently grabbed, false indicates the object is not grabbable (default). This may or may not fit the desired functionality. But did you know, these attributes are deprecated in ARIA 1.1?
So, the idea here is now to use native accessibility API features for drag and drop instead along with some use of basic ARIA.
It is critical to keep in mind; an addition of ARIA will not automatically enable accessible functionality! It will only convey the intended behavior of that functionality!
For instance, adding the ARIA attribute role=”button” to a div tag will cause screen readers to announce the element as a link, however this div tag will neither be keyboard accessible, nor it will be keyboard actionable. Infallible scripting must be used to ensure proper functionality in all such cases.
So, without any further ado let’s dive into one of the Drag & Drop examples.
Here too, the use of scripting is critical to ensure proper keyboard functionality, while the addition of ARIA will enhance the user experience for screen reader users.
As I understand, for drag and drop it is basically:
- Tab to move through the list of items
- Space to select an item
- Arrow keys to switch between the drop zone(s)
- Enter to Drop
But, in my opinion, apart from the drag and drop functionalities to be accessible, we need to also provide instruction of how the functionality will work, since it will make life easier for everyone!
It’s like reading a manual before using the actual product!
Some of the Common Patterns for Drag & Drop:
Let’s make ourselves familiar with some common patterns from the mouse users’ perspective. Which can be also made accessible for keyboard users (including screen reader users).
1. Sorting a List
This is one of the most basic one! The goal of a user here is to change the order from an ordered list of items. They click and hold to grab a list item using a mouse, then move the mouse into a position where they want to drop the list item. Voila! they drop by letting go of the mouse button.
Let’s Structure it!
- Code the elements i.e. Article 1, Article 2, Article 3, etc. as buttons using,
- A native <button> element.
- A custom button using <span> or <div> with role of a ‘button’ along with tabindex value of ‘0’ and scripts for making it accessible using a keyboard as well as mouse.
Tip: Being in an accessibility field, I have learnt a lot but if I must choose between a native and custom, I would always say, go for a native approach. Why make it custom and make everything more complicated?
It now, needs a name!
- Provide the <button> with a descriptive label using,
- Place the label text between the <button> element i.e. <button>label text here</button>.
- An aria-label attribute.
Here, I will be playing with an aria-label attribute between the element.
Next? Yes, a State!
- Using an aria-label to change the value using scripting,
- When the element is selected, the value should be Article 1 – Selected.
- When the element is moved to different place, the value should change to Article 1.
Let’s Move the element from one location to another!
- Native <button> with onclick event handler will make it accessible for the keyboard only users as well as screen reader users.
- Use scripting events like onkeypress, onkeydown, onkeyup, onmousedown, onmouseup, to provide the same interaction for a mouse and keyboard.
- Once the focus is on an element, for e.g. Article 1, press a spacebar key to select an element.
- Using arrow keys (up or down) move the focus to location, say Article 3.
- Press Enter key to drop the element.
- Once an element is moved from one location to another, provide a visual feedback to the users. Make this alert available for the screen reader users by structuring the message within a <div> element and providing a role of alert to the div as soon as the message is displayed.
For example, provide a message ‘Article 1 has been moved to Article 3, you can continue to move any other article’.
Voila it’s done!
But how can we forget the instructions! Preferable instructions can be found below to be made available at the top.
To move the elements from one place to another,
- Navigate to the desired element.
- Press Spacebar key to select the element.
- Use arrow keys (up or down) to navigate to the position where you want to place the selected element.
2. Interacting with an Object on a Canvas
This is common in graphical editors, charting and design tools. This type of drag and drop allows the user to place and size an object in their desired position on a 2-dimensional canvas.
Here let’s create an accessible Tic Tac Toe game. We can structure ‘X’ and ‘O’ as image buttons using native <input> element having src value of the ‘X’ and ‘O’ images with an alt attribute of X and O respectively. A spacebar key can be used to select it.
Make it work!
Press tab key to navigate through the blocks to place the X or O in the respective block.
Provide the Escape key functionality for users to cancel the entire operation at any time.
The droppable areas need to be identified as well by providing the main <div> container with a role of region and an aria-label having value ‘droppable area for X and O’. For screen reader users, it will be announced as “Region start droppable area for X and O”.
Also, each block which are droppable (<div> areas) can be provided with a visual text to identify the droppable block. For screen reader users provide a hidden text within a <span> element along with an id. A role of region can be used on div and named using an aria-labelledby attribute referencing the id of span for “Block 1” and “Drop Here” text. As soon, as they tab through the blocks, the name will be announced, for e.g. “Region start Block 1 – Drop here”.
To drop the X or O in the respective block, press the Enter key!
Once X or O is placed in the respective block, provide a visual feedback to the users. Make this alert available for the screen reader users by structuring the message within a <div> element and providing a role of alert to the div as soon as the message is displayed.
For example, provide a message ‘X has been moved to Block 1, you can continue to place X or O in desired block again.’
3. Moving an Item from One List to Another List
Here, a user is presented with several different list of items. The goal here is to move an item between different task. Isn’t that an easy task using a mouse? This is common in Kanban style interface where users change the status of a task by moving an item from one bucket to another. In the image below, the mouse user is dragging Item 1 from “On Hold” task to “In Progress” task.
Ensure items can be reached using a keyboard
Some elements are already reachable using the keyboard alone, such as standard interface elements and buttons. For the elements that do not usually receive focus, you can use the tabindex attribute.
The two useful values: a tabindex attribute value of 0 puts elements in keyboard tab order as they appear in the source; a negative value for the tabindex attribute does not put the element into the keyboard tab order but allows it to receive programmatic focus. If you do not want to clutter the keyboard tab, use a negative tabindex attribute value and control navigation by defining custom keystrokes, for example using the Up and Down cursor keys to navigate through a menu.
A simple demonstration used with this example adds the items in different task such as “On hold”, “Need Review” and so on.
Identify draggable objects
Objects that can be dragged should have their aria-label attribute value as “Item 1 – Press Space to Select” to indicate they are available for dragging but not currently dragged.
It is also important to ensure that interface elements have a visible keyboard focus indicator. Add a focus class when the source objects receive focus. The CSS for the focus class provides an outline to provide a visible focus indicator, in the same way items are highlighted when the mouse is hovered over draggable objects.
Ensure the user can initiate the drag operation with the keyboard
Users must be able to select the elements to drag. The recommended key, Space is used for selection. For the item that is selected, the aria-label attribute value must be “Item 1 – Selected”.
In the example, element is set in response to a mousedown or keydown event.
Identify the drop targets
After an item has been grabbed, valid targets should be identified where the item can be dropped; a class can be used to make the targets visually obvious.
The CSS class simply sets the border along with background color on the list to make it visually evident it is a target.
Ensure drop can be executed using the keyboard
In the example, only one item can be dragged at a time. Here we will be using a context menu that can be activated as soon as the user selects an item using space key to indicate that the item is to take part in a drag and drop operation.
The first stage is to indicate that each item has a popup menu.
The context menu will contain a list of possible target areas (On Hold, Need Review, In Progress, etcetera.) that the user can select using the Up and Down arrow keys.
Cancelling the drag operation
Cleaning up after drag and drop operations
As with cancelling the drag operation, after completion of drag and drop activity, the state of all the items along with the label should be set to default. Also, a visual feedback should be provided to the users. Make this alert available for the screen reader users by structuring the message within a <div> element and providing a role of alert to the div as soon as the message is displayed.
For example, provide a message ‘Item 1 has been moved to OnHold task. You can continue moving other items to desired task.’
Hope you find this blog post helpful. These are only some ways of making the drag and drop work! Do provide your comments below if you are familiar with other ways to make a drag and drop work!