form-accessibility
Master accessible form design by implementing WCAG 2.2 AA standards, semantic HTML, and ARIA attributes that work across assistive technologies. Learn keyboard navigation patterns, error handling, and validation techniques that ensure your forms remain usable for everyone, regardless of ability or device.
form-accessibility teaches you to implement WCAG 2.2 AA compliant forms by combining semantic HTML with proper ARIA attributes and keyboard navigation patterns. The skill covers using explicit labels linked to form controls, implementing aria-describedby for error messages and helper text, and ensuring all interactive elements are keyboard accessible. You'll learn to structure forms with fieldsets for grouped controls like checkboxes and radio buttons, manage focus properly during validation, and announce errors to screen reader users so they understand what went wrong and how to fix it.
AI-generated summary based on this skill's SKILL.md
Install
Bbeierle12/Skill-MCP-Claude/form-accessibility · repository language: JavaScript
git clone https://github.com/Bbeierle12/Skill-MCP-Claude
cp -r Skill-MCP-Claude/skills/form-accessibility ~/.claude/skills/form-accessibilityFrequently asked questions
AI-generated answers based on this skill's SKILL.md and metadata
How do you make forms accessible with WCAG 2.2 AA compliance?
form-accessibility teaches you to implement WCAG 2.2 AA compliant forms by combining semantic HTML with proper ARIA attributes and keyboard navigation patterns. The skill covers using explicit labels linked to form controls, implementing aria-describedby for error messages and helper text, and ensuring all interactive elements are keyboard accessible. You'll learn to structure forms with fieldsets for grouped controls like checkboxes and radio buttons, manage focus properly during validation, and announce errors to screen reader users so they understand what went wrong and how to fix it.
What accessible form patterns and ARIA attributes does form-accessibility cover?
form-accessibility covers essential patterns including proper label association, ARIA describedby for connecting inputs to error messages and instructions, and focus management techniques. The skill teaches how to implement accessible checkbox and radio button groups using fieldsets and legends, handle multi-step forms with clear navigation, and use ARIA live regions to announce validation errors. You'll learn when to use aria-invalid, aria-required, and aria-label, and how to structure form groups so assistive technology users understand the relationship between controls and their descriptions.
How can keyboard navigation be implemented in forms for accessibility?
form-accessibility demonstrates keyboard navigation by ensuring all form controls are reachable via Tab key, implementing logical tab order that matches visual flow, and providing keyboard shortcuts for common actions. The skill teaches focus management techniques including preventing focus traps in modals, moving focus to error messages after validation, and allowing users to navigate between form sections without a mouse. You'll learn to test keyboard-only workflows, implement skip links for complex forms, and ensure that keyboard users can submit forms and recover from errors just as easily as mouse users.
What does form-accessibility teach about screen reader support and testing?
form-accessibility covers making forms work for screen reader users by using semantic HTML elements, proper ARIA attributes, and clear error announcements. The skill includes testing and validation techniques using automated tools and manual checks with actual screen readers to verify that labels are announced, error messages are read aloud, and form purpose is clear. You'll learn how to test with keyboard-only navigation to catch focus issues, validate that all required fields are marked accessibly, and use form accessibility checklists to ensure nothing is missed before deployment.
How does form-accessibility handle focus management and error announcement?
form-accessibility teaches focus management by showing how to move focus to error messages after validation so screen reader users are immediately notified of problems, implement focus traps in modal forms to keep keyboard users within the form, and restore focus appropriately after successful submission. The skill covers error announcement patterns using ARIA live regions and aria-invalid to ensure assistive technology users know validation failed, understand which fields have errors, and can navigate directly to problematic fields. You'll learn techniques for announcing success messages and guiding users through form correction workflows accessibly.
What form accessibility validation and compliance checks are included?
form-accessibility teaches accessible form validation by ensuring error messages are linked to inputs via aria-describedby, validation feedback is colorblind-safe (not relying on color alone), and errors are announced to assistive technology users. The skill covers implementing accessible multi-step forms with clear progress indicators, ensuring each step is keyboard navigable and screen reader friendly, and testing compliance using both automated tools and manual verification. You'll learn to create form accessibility checklists covering WCAG 2.2 requirements, validate that all form patterns meet AA standards, and test across different browsers and assistive technologies.
SKILL.md
rendered from the published skill — quoted content, verbatim
Form Accessibility
WCAG 2.2 AA compliance patterns for forms. Ensures forms work for keyboard users, screen reader users, and users with cognitive or motor disabilities.
Quick Start
```tsx // Accessible form field pattern <div className="form-field"> {/ 1. Visible label (never placeholder-only) /} <label htmlFor="email"> Email <span className="required" aria-hidden="true">*</span> </label>
{/ 2. Hint text (separate from label) /} <span id="email-hint" className="hint"> We'll send your confirmation here </span>
{/ 3. Input with full ARIA binding /} <input id="email" type="email" autoComplete="email" aria-required="true" aria-invalid={hasError} aria-describedby={hasError ? "email-error email-hint" : "email-hint"} />
{/ 4. Error message (announced by screen readers) /} {hasError && ( <span id="email-error"
(truncated - see the full file via the links below)
Read as markdown · JSON record · Browse the source repository
File tree — 4 files
skills/form-accessibility/SKILL.md
skills/form-accessibility/_meta.json
skills/form-accessibility/scripts/aria-form-wrapper.tsx
skills/form-accessibility/scripts/focus-manager.ts