Accessibility Plugin

Overview

The Accessibility plugin provides screen reader support for drag and drop operations. It automatically manages ARIA attributes on draggable elements, provides screen reader instructions, and announces drag events via a live region.

This plugin is included by default when creating a new DragDropManager.

Configuration

Use Accessibility.configure() to customize announcements, screen reader instructions, and other options:

TypeScriptReactVueSvelteSolid

import {DragDropManager, Accessibility} from '@dnd-kit/dom';

const manager = new DragDropManager({
  plugins: (defaults) => [
    ...defaults,
    Accessibility.configure({
      announcements: {
        dragstart({operation: {source}}) {
          if (!source) return;
          return `Started dragging ${source.id}`;
        },
        dragover({operation: {source, target}}) {
          if (!source || !target) return;
          return `${source.id} is over ${target.id}`;
        },
        dragend({operation: {source, target}, canceled}) {
          if (!source) return;
          if (canceled) return `Dragging canceled`;
          return `Dropped ${source.id} on ${target?.id ?? 'nothing'}`;
        },
      },
    }),
  ],
});

import {DragDropProvider} from '@dnd-kit/react';
import {Accessibility} from '@dnd-kit/dom';

function App() {
  return (
    <DragDropProvider
      plugins={(defaults) => [
        ...defaults,
        Accessibility.configure({
          announcements: {
            dragstart({operation: {source}}) {
              if (!source) return;
              return `Started dragging ${source.id}`;
            },
            dragover({operation: {source, target}}) {
              if (!source || !target) return;
              return `${source.id} is over ${target.id}`;
            },
            dragend({operation: {source, target}, canceled}) {
              if (!source) return;
              if (canceled) return `Dragging canceled`;
              return `Dropped ${source.id} on ${target?.id ?? 'nothing'}`;
            },
          },
        }),
      ]}
    >
      {/* ... */}
    </DragDropProvider>
  );
}

<script setup>
import {DragDropProvider} from '@dnd-kit/vue';
import {Accessibility} from '@dnd-kit/dom';

const plugins = (defaults) => [
  ...defaults,
  Accessibility.configure({
    announcements: {
      dragstart({operation: {source}}) {
        if (!source) return;
        return `Started dragging ${source.id}`;
      },
      dragover({operation: {source, target}}) {
        if (!source || !target) return;
        return `${source.id} is over ${target.id}`;
      },
      dragend({operation: {source, target}, canceled}) {
        if (!source) return;
        if (canceled) return `Dragging canceled`;
        return `Dropped ${source.id} on ${target?.id ?? 'nothing'}`;
      },
    },
  }),
];
</script>

<template>
  <DragDropProvider :plugins="plugins">
    <!-- ... -->
  </DragDropProvider>
</template>

<script>
  import {DragDropProvider} from '@dnd-kit/svelte';
  import {Accessibility} from '@dnd-kit/dom';

  const plugins = (defaults) => [
    ...defaults,
    Accessibility.configure({
      announcements: {
        dragstart({operation: {source}}) {
          if (!source) return;
          return `Started dragging ${source.id}`;
        },
        dragover({operation: {source, target}}) {
          if (!source || !target) return;
          return `${source.id} is over ${target.id}`;
        },
        dragend({operation: {source, target}, canceled}) {
          if (!source) return;
          if (canceled) return `Dragging canceled`;
          return `Dropped ${source.id} on ${target?.id ?? 'nothing'}`;
        },
      },
    }),
  ];
</script>

<DragDropProvider {plugins}>
  <!-- ... -->
</DragDropProvider>

import {DragDropProvider} from '@dnd-kit/solid';
import {Accessibility} from '@dnd-kit/dom';

function App() {
  return (
    <DragDropProvider
      plugins={(defaults) => [
        ...defaults,
        Accessibility.configure({
          announcements: {
            dragstart({operation: {source}}) {
              if (!source) return;
              return `Started dragging ${source.id}`;
            },
            dragover({operation: {source, target}}) {
              if (!source || !target) return;
              return `${source.id} is over ${target.id}`;
            },
            dragend({operation: {source, target}, canceled}) {
              if (!source) return;
              if (canceled) return `Dragging canceled`;
              return `Dropped ${source.id} on ${target?.id ?? 'nothing'}`;
            },
          },
        }),
      ]}
    >
      {/* ... */}
    </DragDropProvider>
  );
}

ARIA Attributes

The plugin automatically sets the following attributes on draggable activator elements (the handle or, if no handle is set, the draggable element itself):

role="button" — unless the element is already a <button> or has an explicit role
aria-roledescription="draggable"
aria-describedby — points to a hidden element containing screen reader instructions
aria-pressed and aria-grabbed — reflect the current dragging state
aria-disabled — reflects the disabled state of the draggable
tabindex="0" — ensures the element is focusable (added when the element is not natively focusable)

Default Announcements

The plugin ships with default announcements for the dragstart, dragover, and dragend events:

dragstart: "Picked up draggable item {id}."
dragover (over a target): "Draggable item {id} was moved over droppable target {targetId}."
dragover (no target): "Draggable item {id} is no longer over a droppable target."
dragend (dropped on target): "Draggable item {id} was dropped over droppable target {targetId}"
dragend (canceled): "Dragging was cancelled. Draggable item {id} was dropped."
dragend (no target): "Draggable item {id} was dropped."

The default instructions read:

To pick up a draggable item, press the space bar. While dragging, use the arrow keys to move the item in a given direction. Press space again to drop the item in its new position, or press escape to cancel.

Options

announcements

Announcements

Custom announcement functions for drag events. Each function receives the event and the DragDropManager instance, and returns a string to announce (or undefined to skip the announcement).

interface Announcements {
  dragstart: (event, manager) => string | undefined;
  dragmove?: (event, manager) => string | undefined;
  dragover?: (event, manager) => string | undefined;
  dragend: (event, manager) => string | undefined;
}

screenReaderInstructions

ScreenReaderInstructions

Custom screen reader instructions displayed in a visually hidden element that is referenced by aria-describedby on draggable activator elements.

interface ScreenReaderInstructions {
  draggable: string;
}

debounce

number

default: 500

The number of milliseconds to debounce announcement updates. Only dragover and dragmove announcements are debounced; dragstart and dragend announcements are dispatched immediately.

string

A stable identifier used to generate the id attributes for the hidden description and live region elements. When not provided, a unique id is generated automatically. Useful when you need to reference these elements from outside the plugin.

idPrefix

{description?: string; announcement?: string}

Custom prefixes for the generated element ids.

Defaults to {description: 'dnd-kit-description', announcement: 'dnd-kit-announcement'}.

Overview

Configuration

ARIA Attributes

Default Announcements

Default Screen Reader Instructions

Options