Implements accessible form labels, required-field signaling, and error wiring in React and Next.js.
npx skills add https://github.com/arayaroma/ether --skill a11y-forms-arayaroma
Please help me install this Agent Skill. Skill: a11y-forms Source: https://github.com/arayaroma/ether/tree/main/skills/a11y-forms Command: npx skills add https://github.com/arayaroma/ether --skill a11y-forms-arayaroma
htmlFor/id pairing so every input, select, and textarea has a programmatically associated label instead of relying on placeholders. - Required-Field Signaling: Combines visible asterisks (marked aria-hidden) with required and aria-required so the requirement is announced without redundant noise. - Error Message Wiring: Links error text via aria-describedby, marks it with role="alert", and keeps aria-invalid in sync with live validation state. - Use Case: While building a login form in React, apply the complete example to wire email and password fields with labels, validation errors announced via role="alert", and correct autoComplete attributes, then verify against the included checklist. ## Quick Start Review my React form component for accessibility issues and fix the label, required-field, and error-message wiring.High-intent search queries and answers about installing and using this skill.
Use the htmlFor attribute on the label matching the input's id, for example <label htmlFor="email"> paired with <input id="email">. This creates a programmatic association so screen readers announce the label when the input receives focus.
Link the error text to the input with aria-describedby pointing at the error element's id, and add role="alert" to the error element so it is announced when it appears. Also set aria-invalid to reflect the current validation state.
No, placeholder is not a label substitute. It disappears once the user types and is not reliably announced by screen readers, so every input needs a real label element connected via htmlFor and id.
No, set aria-describedby to undefined when there is no error rather than leaving it pointing at a non-existent or empty id. A dangling reference is worse for assistive technology than no reference at all.
Combine the required or aria-required attribute with a visible indicator such as an asterisk wrapped in a span with aria-hidden="true". The asterisk is hidden from screen readers because aria-required already conveys the requirement.
iTzFaisalOptimize web and app forms to maximize completion rates.
kernex-devAudit web interfaces for WCAG 2.2 compliance using axe-core and Lighthouse.
jhs88Implement React forms with React Hook Form, Zod, and TanStack Query.
alexejluftImplement React form validation with Zod schemas and React Hook Form.