Skip to content
Get packs

Draggable Accessibility Checker

Reviews drag-and-drop UI for keyboard and screen reader accessibility gaps

Source Download skill
Repository
thedaviddias/Front-End-Checklist
Stars
74,632
Licence
MIT
Files
2 files

What it does

This skill teaches an AI agent to review web templates, rendered HTML, and shared components for drag-and-drop interfaces that exclude keyboard and screen reader users. When asked, the agent checks whether drag-and-drop features have keyboard alternatives, proper ARIA attributes such as aria-grabbed and aria-dropeffect, and live-region announcements, then points to the exact elements that fall short and suggests fixes. It is a checklist-driven review, not a tool that changes code on its own.

Great for

  • Front-end developers building sortable lists, kanban boards, or file uploaders who want an accessibility review
  • Teams auditing existing templates or components before release
  • Designers or accessibility reviewers who want a second pair of eyes on drag interactions

Skip it if

  • Automated compliance certification: the skill is a guideline-based review, so it cannot replace testing with real screen readers and users with disabilities
  • Projects with no drag-and-drop features, where the rule does not apply
  • Modern rewrites that rely on newer APIs: the skill mentions aria-grabbed and aria-dropeffect, which are deprecated in ARIA 1.1 and later, so the agent should be checked against current guidance

Try asking

  • “Review this sortable list component and tell me where keyboard users cannot reorder items”
  • “Check our rendered HTML for drag-and-drop elements missing live region announcements”
  • “Suggest keyboard alternatives like arrow keys and Enter/Space for this kanban board”
Step-by-step guide: how to use Draggable Accessibility CheckerInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 2 original files, the MIT licence and an attribution note.

    draggable-accessibility.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip draggable-accessibility.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip draggable-accessibility.zip -d .claude/skills/

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 3

    Ask for the task

    No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.

Get better results

  • Paste the component code or rendered HTML along with the framework you use, since the skill asks the agent to validate final browser-facing markup rather than framework abstractions.
  • Treat the output as a starting checklist and confirm fixes with a real screen reader such as NVDA or VoiceOver.
  • Ask the agent to check current ARIA and WAI-ARIA drag-and-drop guidance, since the bundled rule references older attributes.

What's inside

  • references/rule.md
  • SKILL.md

Redistributed unmodified from thedaviddias/Front-End-Checklist under the MIT licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.