Skip to content
Get packs

Form Validation Accessibility Checker

Reviews form markup so error messages and required fields work for screen reader users

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 form code (templates, rendered HTML, and shared components) for accessibility problems in how validation is presented. It checks that error messages are linked to their fields, that invalid and required states are exposed in the markup rather than only by color, and that grouped choices use fieldset and legend. It also tells the agent not to flag React forms as defective just because they lack method or action attributes when JavaScript handles submission.

Great for

  • Front-end developers reviewing form templates or component libraries before release
  • Teams doing an accessibility audit of sign-up, checkout, or contact forms
  • Reviewers who want to avoid false alarms on JavaScript-driven React forms

Skip it if

  • Visual design critique of forms, since the skill focuses on markup semantics, not layout or branding (out of scope)
  • Full WCAG compliance audits, because it covers one narrow rule and cannot replace testing with real assistive technology
  • Non-web forms or native mobile apps, which this HTML-focused rule does not address

Try asking

  • “Review this login form template and tell me if the error messages are properly linked to their inputs”
  • “Check our shared React form components for missing aria-invalid or aria-describedby attributes”
  • “Audit the checkout HTML for required fields that are only marked visually and not in the markup”
  • “Explain how to group these radio buttons with fieldset and legend for screen reader users”
Step-by-step guide: how to use Form Validation 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.

    form-validation.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip form-validation.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip form-validation.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 or point the agent at the rendered HTML output when possible, since framework abstractions can hide what the browser actually receives.
  • Ask the agent to name the exact elements and attributes it flags so you can verify each finding quickly.
  • Follow up with manual screen reader testing, because markup review alone does not confirm how announcements sound in practice.

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.