Drag Testing

title: "Drag and Drop Testing — Verifying Drag-Drop Accessibility" description: "Learn how to test drag-and-drop accessibility using keyboard-only testing, screen readers, and automated checks for ARIA attributes." weight: 11 date: 2026-06-28 lastmod: 2026-06-28 tags: [accessibility, drag-drop]

Testing drag-and-drop accessibility requires verifying keyboard alternatives, ARIA state management, focus behavior, and screen reader announcements.

## What You'll Learn

How to test drag-and-drop accessibility using multiple methods.

## Why It Matters

Drag-and-drop is complex. Automated tools catch few issues. Manual testing is essential for ensuring keyboard and screen reader support.

## Real-World Use

A QA tester opens a reorderable list. They Tab to the first item, Tab to "Move Down," press Enter, and verify the item moves down. They then test with NVDA to confirm announcements.

## Test Checklist

| Test | Method | Expected |
|------|--------|----------|
| Keyboard move | Tab to move buttons, Enter | Item moves |
| Focus after move | Observe focus | Focus stays on item |
| Boundary disable | Check first/last item | Buttons disabled |
| Escape cancel | Press Escape | Drag cancelled, focus returns |
| Screen reader | NVDA/VoiceOver | Announcements correct |
| Touch drag | Touch device | Item follows finger |
| Live region | Enable JAWS | Position announced |
| ARIA states | DevTools inspect | aria-grabbed updates |

## Automated Checks

```javascript
// Check for move buttons or keyboard alternative
const hasMoveButtons = document.querySelectorAll('.move-up, .move-down').length > 0;
const hasGrabbed = document.querySelectorAll('[aria-grabbed]').length > 0;
const hasDropEffect = document.querySelectorAll('[aria-dropeffect]').length > 0;

// Check for live region
const hasLiveRegion = document.querySelectorAll('[aria-live]').length > 0;

console.log({
  hasMoveButtons,
  hasGrabbed,
  hasDropEffect,
  hasLiveRegion
});

Common Mistakes

1. Only testing with mouse

Drag-drop must be tested with keyboard, screen reader, and touch, not just mouse.

2. Not testing focus after move

Focus must follow the moved item. Verify focus position after each operation.

3. Not testing disabled states

Verify Move Up is disabled on the first item and Move Down on the last.

4. Not testing screen reader announcements

Verify aria-live announcements contain item name and position.

5. Not testing touch on real devices

Chrome DevTools touch simulation is not a substitute for real device testing.

Practice Questions

1. What is the most important drag-drop accessibility test? Keyboard-only test: Can you move all items using only Tab and Enter?

2. How do you test screen reader announcements for reorder? Open the page with NVDA, move an item, and verify the live region is announced.

3. What automated checks work for drag-drop? Presence of move buttons, aria-grabbed, aria-dropeffect, and aria-live elements.

Challenge: Write a comprehensive test suite for a reorderable list with 15 test cases covering keyboard, screen reader, focus, ARIA, and touch.

FAQ

Mini Project

Write a comprehensive drag-drop accessibility test plan. Include tests for keyboard, screen reader, touch, ARIA attributes, focus management, and live region announcements.

What's Next

Apply everything in the Drag and Drop Project by building a complete accessible drag-drop component.