Functionalities such as drag and drop are quite common with rich internet applications. Accessibility of dragging an object or component from the source region of the page and dropping them at the target region is a tough task especially with screen readers and keyboards.
ARIA-dropeffect property and ARIA-grabbed state of accessible rich internet applications (ARIA) helps to make drag and drop functionality available for all users.
ARIA-grabbed state lets the user know that the component is draggable. The initial state of aria-grabbed will be false. Aria-grabbed=’false’. If aria-grabbed state is not used for any object (undefined) it means the object does not have a draggable feature. To let the users know that the object supports draggable feature and aria-grabbed state intimates to the screen reader user. Content authors should ensure that the draggable region should be keyboard accessible. Also the selection for dragging should be keyboard available. Though not mandatory the draggable regions can be highlighted to let the users know that the region is draggable. Once the user selects an object to drag the aria-grabbed state is changed to true (aria-grabbed=’true’).
ARIA-dropeffect property is defined depending on the grabbed object. On the target region aria-dropeffect property need to be set.
Following are the various options to drop the source object to the target using aria-dropeffect property.
- Aria-dropeffect=’copy’:
- A copy of grabbed object will be copied keeping the source object also available.
- aria-dropeffect=’move’:
- The original grabbed object will be moved from the source to the target region. No copy (duplicate) is left at the source region.
- Aria-dropeffect=’link’:
- In this case the reference or a short-cut of original object will be placed but not the actual object.
- aria-dropeffect=’execute’:
- A function supported by the drop target is executed, using the drag source as an input.
- aria-dropeffect=’popup’:
- Developers should provide a popup allowing the Options such as copy, move, execute, cancel dragging etc for the user to select from.
- aria- dropeffect=’none’:
- The functionality of dropping an object is not supported. It’s the default behavior of any object.
Keyboard accessibility for dropping the object
Once the object(s) are selected for dragging, a keyboard accessible method needs to be in place to navigate to the dropping region of the page. The navigation should be in a standard procedure such as tabbing and using arrow keys. The navigation path should be clearly visible to the user while navigating the page. Once the user reaches the target region an accessible way should be provided to drop the grabbed object(s). Using control + m will be the best short-cut for dropping the object either it is copy, move or link. If more than one dropping options are available an accessible menu needs to be provided. This menu should be activated using shift + control + m. Upon selecting the required value from the aria-dropeffect menu the focus should be on the dropped object. If the menu is cancelled using key stroke such as escape the focus should be on the target region cancelling the popup.
The escape key stroke cancels the popup but not the drag operation. Once more the escape key need to be applied to cancel the drag operation. When the drag operation is cancelled the functionality should be taken back to its original state. It means the aria-grabbed will be set to false, aria-dropeffect should be set to none.
This article provides the incite on aria-dropeffect property not the entire drag-drop functionality.