Guide · Agent skill
How to use the Draggable Accessibility Checker agent skill
Updated · written with AI from the project's own documentation and checked against our catalogue data
The draggable-accessibility skill is an agent skill that teaches an AI agent to review templates, rendered HTML, and shared components for drag-and-drop interfaces that exclude keyboard and screen reader users. It is aimed at front-end developers, teams and accessibility reviewers. After reading this guide you will know how to install the skill, how to ask for a review in plain language, and what the review can and cannot tell you.
Draggable Accessibility Checkerthedaviddias/Front-End-Checklist · MIT Download the skill Quick start
- 1Download the ZIP. Download the draggable-accessibility ZIP from this page.
- 2Unzip the skill. Unzip the file so you have the draggable-accessibility folder containing SKILL.md and references/rule.md.
- 3Place the folder. Move the folder to ~/.claude/skills/ for all projects, or to .claude/skills/ inside one project.
- 4Or upload it. In the Claude apps, go to Settings → Capabilities → Skills and upload the skill.
- 5Make a request. Ask the agent in plain words to review your drag-and-drop templates, rendered HTML, or shared components.
- 6Check the findings. Read the flagged elements and suggested fixes, then verify them with a real screen reader and keyboard-only testing.
What is an agent skill and what does this one do?
An agent skill is a folder of instructions that an AI agent loads when a task matches the skill's description. This skill is for reviewing drag-and-drop features. 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.
The agent 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.
- Checks for keyboard alternatives such as arrow keys and Enter or Space
- Checks ARIA attributes such as aria-grabbed and aria-dropeffect
- Checks for status announcements via live regions
- Flags exact elements, attributes, and routes in the rendered HTML that violate the rule
How do you install the draggable-accessibility skill?
Download the ZIP file from this page and unzip it. To make the skill available for all your projects, place the unzipped skill folder in ~/.claude/skills/. To limit it to a single project, place it in that project's .claude/skills/ folder.
You can also upload the skill in the Claude apps under Settings → Capabilities → Skills.
- Personal install: ~/.claude/skills/
- Project install: .claude/skills/ inside your project
- Claude apps: Settings → Capabilities → Skills, then upload
What files are in the skill?
The skill contains two files. SKILL.md holds the name, description, and the quick reference with the check, fix, explain, and code review steps. references/rule.md holds fuller implementation details and a code example of a sortable list.
- SKILL.md
- references/rule.md
How do you trigger the skill with a natural request?
You do not need a special command. Describe the task in plain words that mention templates, rendered HTML, shared components, or drag and drop. The agent matches your request against the skill's description.
Point the agent at the files or markup you want reviewed, so it can flag exact elements.
- Review the drag-and-drop markup in src/components/KanbanBoard.html for accessibility problems.
- Check our sortable list template for keyboard alternatives to dragging.
- Look at the rendered HTML of this file uploader and tell me whether screen reader users get announcements.
What does a good review look like?
A useful review names each element that fails, the attribute or behaviour missing, and a suggested fix. The skill's fix guidance covers keyboard alternatives using arrow keys and Enter or Space, aria-grabbed, aria-dropeffect, and status announcements.
The reference example shows a list with role="list", items with role="listitem", tabindex="0", aria-grabbed="false", and a visually hidden instruction such as Press Space to pick up, use arrows to reorder.
<div role="list" aria-label="Sortable tasks" class="sortable-list">
<div role="listitem" tabindex="0" aria-grabbed="false" draggable="true" class="sortable-item">
<span class="sortable-item__content">Task 1</span>
<span class="sr-only">Press Space to pick up, use arrows to reorder</span>
</div>
</div>What does the skill need and what are the safety notes?
The skill requires nothing listed. It does not run scripts and does not use the network, so it only reads the files you give it and the instructions it contains.
Because it is a guideline-based review, it cannot replace testing with real screen readers and users with disabilities.
- Requires: nothing listed
- Runs scripts: no
- Uses network: no
- Licence: MIT
What tips help you get the most from it?
Give the agent the rendered output where you can, because the skill asks you to validate the final browser-facing markup rather than only the source framework code. Review shared components as well as individual pages, since one component can affect many screens.
Check the ARIA advice against current guidance. The skill mentions aria-grabbed and aria-dropeffect, which are deprecated in ARIA 1.1 and later, and the skill itself notes that newer attributes may be used.
- Paste or point to rendered HTML, not only framework source
- Include shared components used across pages
- Test the result with real screen readers and keyboard-only use
What people use it for
- Reviewing a kanban board's card markup for keyboard moves and announcements before release
- Checking a sortable list template for aria-grabbed and aria-dropeffect use
- Auditing a shared file uploader component that uses drag and drop
- Giving a designer or accessibility reviewer a second look at drag interactions
Frequently asked questions
How do I install the draggable accessibility skill?
Download the ZIP from this page and unzip it. Place the folder in ~/.claude/skills/ for personal use or in a project's .claude/skills/ folder. You can also upload it in the Claude apps under Settings → Capabilities → Skills.
Does the draggable accessibility skill require anything else?
The skill lists no requirements. It does not run scripts and does not use the network. It only works through the instructions in its files and the material you provide to the agent.
Is the draggable accessibility skill free?
The skill is published under the MIT licence. This guide does not state any price, so check the source repository for licence terms.
Will this skill make my drag-and-drop feature compliant?
No. The skill is a guideline-based review and cannot replace testing with real screen readers and users with disabilities. Use its findings as a checklist alongside manual testing.
Why does the skill mention aria-grabbed and aria-dropeffect if they are deprecated?
The skill references these attributes, which are deprecated in ARIA 1.1 and later. Check the agent's advice against current ARIA guidance before applying the fixes, especially for new projects.
What is the alternative if this skill does not fit my project?
The source does not name alternatives. You can review drag-and-drop accessibility manually against the rule page at frontendchecklist.io and test with real screen readers and keyboard-only use.
New agent skills, repos and AI tools — every week
The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.
Our verdict
Use this skill if you build sortable lists, kanban boards, or file uploaders and want a fast, checklist-based accessibility review of your markup. Skip it if you need certified compliance or a project has no drag-and-drop features, and verify its ARIA advice against current guidance before relying on it.
Download the skill