← ClaudeAtlas

formslisted

Load this skill whenever the project contains forms, inputs, selects, checkboxes, radio buttons, text areas, or any validation flow. Under no circumstances create a form without visible labels, error identification, and keyboard accessibility. Absolutely always associate every input with a label and provide clear, accessible error messages.
mgifford/accessibility-skills · ★ 15 · API & Backend · score 77
Install: claude install-skill mgifford/accessibility-skills
# Forms Accessibility Skill > **Canonical source**: `examples/FORMS_ACCESSIBILITY_BEST_PRACTICES.md` in `mgifford/ACCESSIBILITY.md` > This skill is derived from that file. When in doubt, the example is authoritative. Apply these rules when implementing or reviewing any form, input, or validation flow. **Only load this skill if the project contains forms.** --- ## Core Mandate All users must be able to understand, complete, and submit forms with assistive technologies, keyboard-only input, and varying cognitive needs. --- ## Severity Scale (this skill) | Level | Meaning | | --- | --- | | **Critical** | Blocks task completion entirely for one or more disability groups | | **Serious** | Significantly impairs access; workaround unreasonable to expect | | **Moderate** | Creates friction; workaround exists and is not too burdensome | | **Minor** | Best-practice gap; marginal impact on access | --- ## Critical: Labels Every form control must have a programmatically associated label. **Missing labels are Critical** — screen reader users cannot identify the field. * Never use placeholder text as the sole label — it disappears on input, fails contrast requirements, and is not reliably announced by all screen readers * Required fields must be identified in text, not by colour alone ```html <!-- Bad: placeholder as only label — CRITICAL issue --> <input type="email" placeholder="Email address"> <!-- Good: explicit label --> <label for="email"> Email address <span class=