Skip to content
Get packs

Custom Element Accessibility Review

Reviews Web Component code for missing ARIA, keyboard support, and form association gaps

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

What it does

When you ask the agent to review custom element or Web Component code, it checks the class definitions for common accessibility gaps: missing ElementInternals setup, ARIA roles and labels that never reach screen readers, incomplete keyboard handling (Tab, Enter, Space, arrow keys), and custom form inputs that don't participate in native forms. It also asks whether a built-in HTML control would do the job without custom code, and suggests replacing the component when it would.

Great for

  • Front-end developers building Web Components or custom elements
  • Teams auditing a design system for accessibility problems before release
  • Developers adding form-associated custom inputs who need native form behaviour

Skip it if

  • Projects that only use standard HTML, CSS, or a framework's built-in controls, since the checks target custom element classes (no benefit there)
  • Anyone expecting a complete accessibility audit; it covers only custom element patterns and should be paired with manual screen reader testing, because automated or rule-based review can miss real issues

Try asking

  • “Review my custom element class for missing ElementInternals and ARIA reflection”
  • “Check this Web Component's keyboard handling for a custom listbox”
  • “Does this form-associated custom input work with native form submission?”
  • “Should this custom dropdown be replaced with a native select element?”
Step-by-step guide: how to use Custom Element Accessibility ReviewInstall, 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.

    custom-element-accessibility.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

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

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip custom-element-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 full custom element class, including the constructor and static formAssociated property, so the review can see the setup.
  • Ask the agent to explain the ElementInternals fix in your framework's terms if you're not using plain JavaScript.
  • Treat the output as a checklist to guide manual keyboard and screen reader testing rather than as proof of accessibility.

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.