accessible-formslisted
Install: claude install-skill Amey-Thakur/AI-SKILLS
# Accessible forms
Forms are where users accomplish tasks (sign up, buy, submit), and
inaccessible forms block those tasks entirely for some users. The
requirements are concrete: every field labeled and associated, every
error identified in text, instructions available, and the browser's
autofill enabled.
## Method
1. **Associate a real label with every field.** A
`<label for="email">` tied to the input's id (or wrapping
it): so clicking the label focuses the field and the
screen reader announces the label when the field gets
focus (see aria-usage: prefer real labels to aria-label).
Placeholder text is not a label (it disappears on input
and often fails contrast: see color-contrast); a field
labeled only by placeholder is unlabeled the moment the
user types.
2. **Identify errors in text, associated with the field.**
When validation fails: describe the error in text ("Email
must include an @"), associate it with the field
(`aria-describedby` pointing to the error message), and
move focus to (or announce: see screen-reader-testing's
live regions) the first error. Color alone (a red border)
does not tell a screen-reader or color-blind user what
is wrong (see color-contrast's don't-rely-on-color):
the error must be text they can perceive.
3. **Provide instructions and requirements up front.**
Format requirements, which fields are required, and
constraints stated before the user submits and fails:
"Password must be at lea