web-a11y-forms

Reviews and designs accessible web forms covering labels, validation, errors, and multi-step flows.

Updated Sep 8, 2026
One-click install
npx skills add https://github.com/pedropenha/project-skills --skill web-a11y-forms-pedropenha
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-a11y-forms
Source: https://github.com/pedropenha/project-skills/tree/main/.agents/skills/web-a11y-forms
Command: npx skills add https://github.com/pedropenha/project-skills --skill web-a11y-forms-pedropenha

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Forms are a common source of accessibility failures: missing labels, placeholder-only instructions, unlinked error messages, and lost input after failed validation. This Skill provides concrete rules, examples, and a checklist for building and auditing forms that work for screen reader users and keyboard-only navigation. ## Core Features & Use Cases - Labeling and Grouping Rules: Enforces persistent programmatic labels, fieldset/legend grouping, and bans placeholder-only labels. - Validation and Error Recovery: Requires errors linked to fields via aria-describedby, preserved user input, and focus management after failed submission. - Checklist-Driven Audits: Covers required state, help text, error summaries, search result context, and multi-step progress indicators. - Use Case: When implementing a checkout form, apply the rules to ensure every field has an explicit label, validation errors are announced and recoverable, and the multi-step flow exposes current step and progress. ## Quick Start Review this checkout form markup for accessibility issues and rewrite it with proper labels, error associations, and focus recovery.

Frequently Asked Questions about web-a11y-forms

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I make HTML form validation accessible?▼

Associate each error message with its field using aria-invalid and aria-describedby, keep the user's input after failed validation, and move focus to the first error or an error summary. Provide specific messages that explain how to fix each problem.

How to label form inputs for screen readers?▼

Use a persistent label element with a matching for/id pair for every field. Placeholder text must not be the only label because it disappears on input and is inconsistently announced by assistive technology.

When should I use fieldset and legend in forms?▼

Use fieldset and legend when a group of related controls needs a shared label, such as radio button groups or address sections. The legend gives screen reader users the group context for each control inside.

Can I use placeholder text as the only form label?▼

No. Placeholder-only labels fail accessibility requirements because the hint disappears once the user types and is not reliably exposed as a programmatic name. Always pair inputs with a visible, persistent label element.

What should an accessible multi-step form include?▼

Expose the current step and overall progress, keep entered data when navigating between steps, and manage focus on step transitions. Error summaries should link to invalid fields so users can jump directly to corrections.