Guide · Agent skill
How to use the aria-dialog-name agent skill for dialog labels
Updated · written with AI from the project's own documentation and checked against our catalogue data
The aria-dialog-name skill is a small add-on for an AI agent that teaches it one accessibility rule: every element with role="dialog" or role="alertdialog" should have an accessible name. After this guide you will know how to install the skill, how to ask an agent to use it, and what kind of review output to expect. It is aimed at front-end developers, design-system teams and anyone learning why screen readers need a name for dialogs.
Dialog Accessible Name Checkerthedaviddias/Front-End-Checklist · MIT Download the skill Quick start
- 1Download the ZIP. Download the skill's ZIP from this page. It contains SKILL.md and references/rule.md.
- 2Unzip the folder. Unzip the archive so the aria-dialog-name folder with its files is intact.
- 3Place it in a skills folder. Move the folder to ~/.claude/skills/ for personal use or to .claude/skills/ inside a project.
- 4Or upload in the Claude apps. In the Claude apps, go to Settings → Capabilities → Skills and upload the skill.
- 5Ask a dialog question. Share your modal or dialog markup and ask the agent to check whether the dialog has an accessible name.
What an agent skill is and what this one makes the agent do
An agent skill is a folder of instructions that an AI agent can load when a task matches the skill's description. This one is named aria-dialog-name and its description tells the agent to use it when reviewing rendered HTML, interactive components, or design-system patterns related to dialogs having an accessible name.
When it applies, the agent checks whether each dialog or alertdialog is labelled, for example through aria-labelledby pointing to a title or through aria-label. It explains why the label matters for screen reader users, flags the exact elements that fail, and suggests a fix. The skill is a focused review aid, not a general accessibility auditor.
- Checks that every role="dialog" or role="alertdialog" element has an accessible name
- Suggests aria-labelledby (pointing to the header) or aria-label as the fix
- Explains why naming dialogs helps orient users when a modal appears
Install the aria-dialog-name skill
Download the ZIP for this skill from this page and unzip it. The skill is a folder containing SKILL.md and references/rule.md, so keep that structure intact. Place the folder in one of these locations, depending on how you want to use it:
For a personal setup available across your projects, put it in ~/.claude/skills/. For a single project, put it in that project's .claude/skills/ folder. If you use the Claude apps instead, you can upload the skill under Settings → Capabilities → Skills.
- Personal: ~/.claude/skills/
- Project only: .claude/skills/ inside your project
- Claude apps: Settings → Capabilities → Skills, then upload
How to trigger the skill with natural requests
You do not need a special command. Describe the task in plain language that mentions dialogs, modals, popups, or accessible names, and attach or paste the markup or component code. The skill's description is written around reviewing rendered HTML and interactive components, so requests that match that wording are most likely to load it.
Be specific about what you want reviewed. Asking for a check of one modal's markup gives a tighter answer than asking for a general accessibility audit, which this skill does not cover.
- Review this modal markup and tell me whether the dialog has an accessible name.
- Check my design-system dialog component for a proper label and suggest a fix.
- Does this alertdialog need aria-label or aria-labelledby?
Examples of what the agent checks
The skill's reference material shows a correct dialog labelled with aria-labelledby pointing to a visible heading, a correct alertdialog labelled with aria-label, and an incorrect dialog with no name. The incorrect case is the kind the agent should flag.
When you share markup like the incorrect case, the expected output is a note that the dialog has no accessible name, an explanation that screen readers will not tell the user what the dialog is for when it opens, and a suggested fix using one of the two labelling methods.
<div role="dialog" aria-labelledby="modal-title" aria-modal="true">
<h2 id="modal-title">Edit Profile</h2>
<form>...</form>
</div>What it needs and safety notes
The skill lists no requirements. It does not run scripts and does not use the network, so it only supplies instructions to the agent. The skill's own guidance describes checking with browser accessibility tools or assistive technology, but the agent cannot replace real screen reader testing. Treat its findings as a review aid and verify them yourself with a screen reader before shipping.
- Requires: nothing listed
- Runs scripts: no
- Uses network: no
Tips for getting useful results
Give the agent the rendered markup or the component source, not only a description, so it can see the actual roles and ids. Check that any id referenced by aria-labelledby exists in the same document, because a missing id leaves the dialog unnamed.
Remember the skill covers only this one rule. Focus traps, contrast, and keyboard support beyond this rule are outside its scope and need separate checks.
- Paste the complete dialog element, including the heading it references
- Confirm the aria-labelledby id matches the title's id exactly
- Run a separate review for focus and keyboard behaviour
What people use it for
- Reviewing a modal's markup before a pull request is merged
- Checking that a design-system dialog component exposes a proper label
- Explaining to a teammate why a popup needs aria-labelledby or aria-label
- Reviewing an alertdialog such as a session timeout warning for a name
Frequently asked questions
Is the aria-dialog-name skill free?
The skill is published under the MIT licence, as stated on this page. Check the licence file in the source repository for the full terms.
What do I need to use the aria-dialog-name skill?
The skill lists no requirements, and it does not run scripts or use the network. You need an agent that supports skills and a place to load the skill folder.
Where do I install an agent skill?
Put the unzipped folder in ~/.claude/skills/ for personal use or in .claude/skills/ inside a project. In the Claude apps, you can upload it under Settings → Capabilities → Skills.
Does this skill check all accessibility issues?
No. It covers only the rule that dialogs and alertdialogs have an accessible name. It will miss other issues such as focus traps, contrast, and keyboard support beyond this rule.
What is the difference between aria-labelledby and aria-label?
aria-labelledby points to an element on the page, such as a heading, that holds the dialog's title. aria-label supplies the name as a direct string. The skill suggests either one as a fix.
Can the agent replace screen reader testing?
No. The skill describes testing with browser accessibility tools or assistive technology, but the agent cannot replace real screen reader testing. Verify the labels with a screen reader before shipping.
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 are a front-end developer or design-system team that wants a quick, focused check that dialogs and alertdialogs have an accessible name before shipping. Pick a broader accessibility auditor or a manual testing process if you need coverage of focus management, contrast, and full keyboard behaviour.
Download the skill