Skip to content
Get packs

Dialog Accessible Name Checker

Checks that modal dialogs have an accessible name so screen readers announce their purpose.

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 a single accessibility rule: every element with role="dialog" or role="alertdialog" should have a name. When reviewing HTML or UI components, the agent checks whether dialogs are labelled (for example via aria-labelledby pointing to a title, or aria-label), explains why this matters for screen reader users, and suggests a fix. It is a focused review aid, not a general accessibility auditor.

Great for

  • Front-end developers reviewing modal or popup markup before shipping
  • Design-system teams checking that dialog components expose a proper label
  • Anyone learning why screen readers need a name for dialogs

Skip it if

  • Full accessibility audits: the skill covers only this one rule, so it will miss other issues (focus traps, contrast, keyboard support beyond the rule).
  • Live verification: the skill describes testing with browser accessibility tools or assistive tech but the agent cannot replace real screen reader testing.

Try asking

  • “Review this modal HTML and tell me if the dialog has an accessible name.”
  • “Why does my confirmation popup need aria-labelledby?”
  • “Fix the aria-label on this alertdialog component in my React app.”
Step-by-step guide: how to use Dialog Accessible Name 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.

    aria-dialog-name.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip aria-dialog-name.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip aria-dialog-name.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 rendered markup or component code, not just a description, so the agent can point to exact elements.
  • Ask for the fix as well as the check; the skill includes guidance on aria-labelledby versus aria-label.
  • For framework-specific examples, the agent may need the referenced rule.md file to be present alongside SKILL.md.

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.