How do I install the Draggable Accessibility skill?

Run npx skillmds@latest add thedaviddias/draggable-accessibility in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Draggable Accessibility safe to use?

This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Draggable Accessibility?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Draggable Accessibility free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Draggable Accessibility?

thedaviddias (@thedaviddias) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Draggable Accessibility by thedaviddias

Name: Draggable Accessibility
Author: thedaviddias

Draggable Accessibility

Use when reviewing templates, rendered HTML, or shared components related to Make drag and drop accessible. Validate the final browser-facing markup, not just the source framework abstraction.

thedaviddias b296bb7 2 files · 12.0 KB Updated Sep 17, 2026

File contents

Make drag and drop accessible

Drag and drop is mouse-dependent by default—keyboard and screen reader users are completely locked out without proper alternatives and ARIA announcements.

Quick Reference

Always provide keyboard alternatives to drag and drop
Use aria-grabbed and aria-dropeffect (or newer attributes)
Announce drag operations to screen readers via live regions
Support both mouse/touch and keyboard interaction patterns

Check

Verify drag and drop interfaces have keyboard alternatives, proper ARIA attributes, and live region announcements.

Fix

Implement keyboard alternatives (arrow keys, Enter/Space), aria-grabbed, aria-dropeffect, and status announcements.

Explain

Explain how accessible drag and drop implementations provide equivalent functionality for keyboard and screen reader users.

Code Review

Review templates, server-rendered HTML, and shared components that output markup related to Make drag and drop accessible. Flag exact elements, attributes, and routes where the rendered HTML violates the rule.

For full implementation details, code examples, and framework-specific guidance, see references/rule.md.

Rule page: https://frontendchecklist.io/en/rules/html/draggable-accessibility

Frequently asked questions