Web accessibility is about achieving feature and information parity and giving complete access to all aspects of an interface to disabled people.A digital product or website is simply not complete if it is not usable by everyone. If it excludes certain disabled populations, this is discrimination and potentially grounds for fines and/or lawsuits.
@dnd-kit/core
library provides a number of sensible defaults to help you make your drag and drop interfaces accessible.enter
(on Windows) or return
(on macOS) and the space
key.@dnd-kit/core
library ships with a Keyboard sensor that adheres to these guidelines. The keyboard sensor is one of the two sensors that are enabled by default on the <DndContext>
provider component.useDraggable
listeners must be able to receive focus.tabindex
attribute dictates the order in which focus moves throughout the document.tabindex
value of 0
. tabindex="0"
(for example, div
and li
elements)tabindex
attribute set to 0
if they are not natively interactive elements (such as the HTML button
element).useDraggable
hook sets the tabindex="0"
attribute by default.enter
(on Windows) or return
(on macOS) and the space
keys can be used to initiate a drag operation and pick up the draggable item.enter
(on Windows) or return
(on macOS) and the space
keys.escape
key. It is recommended to allow users to cancel the drag operation using the escape
key for all sensors, not just the Keyboard sensor.enter
, return
and space
keys to follow the guidelines set by the third rule of ARIA.25
pixels when the arrow keys are pressed while dragging.getNextCoordinates
option of the Keyboard sensor.useSortable
hook ships with an augmented version of the Keyboard sensor that uses the getNextCoordinates
option behind the scenes to find the coordinates of the next sortable element in any given direction when an arrow key is pressed.useDraggable
hook provides the role
and aria-roledescription
, and aria-describedby
attributes by default:role
"button"
"role"
attribute lets you explicitly define the role for an element, which communicates its purpose to assistive technologies.
<button>
element for the DOM element you plan on attaching draggable listeners to.
In case that's not possible, make sure you include the role="button"
attribute, which is the default value.aria-roledescription
"draggable"
draggable
is a sensible default, we recommend you customize this value to something that is tailored to your use-case.aria-describedby
"DndContext-[uniqueId]"
aria-describedby
ID that points to the voiceover instructions to be read out when a draggable item receives focusrole
and aria-roledescription
attributes can be customized via the options passed to the useDraggable
hook.aria-describedby
instructions, refer to the section below.<DndContext>
component renders a unique HTML element that is rendered off-screen to be used to provide these instructions to screen readers. To pick up a draggable item, press space or enter. While dragging, use the arrow keys to move the item in any given direction. Press space or enter again to drop the item in its new position, or press escape to cancel.
screenReaderInstructions
prop of <DndContext>
. To pick up a grocery list item, press space or enter. Use the up and down arrow keys to update the position of the item in the grocery list. Press space or enter again to drop the item in its new position, or press escape to cancel.
<DndContext>
component only ships with instructions in English due to bundle size concerns.<DndContext>
component renders a unique HTML element that is rendered off-screen to be used for live screen-reader announcements of events like when a drag operation has started, when a draggable item has been dragged over a droppable container, when a drag operation has ended, and when a drag operation has been cancelled.announcements
prop of DndContext
.Item with index 0 was picked up. Item was moved to index 1 of 4.
Item at position 1 was picked up. Item was moved to position 2 of 5.
closestCenter
collision detection strategy is used, so the over
property should always be defined.<DndContext>
component only ships with announcements in English due to bundle size concerns.