← ClaudeAtlas

accessible-formslisted

Build forms with associated labels, identified errors, clear instructions, and autocomplete attributes. Use when creating or auditing forms for accessibility.
Amey-Thakur/AI-SKILLS · ★ 4 · AI & Automation · score 77
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