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
Decision gist · record as of 2026-07-27
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.
Use it when
- form-accessibility covers essential patterns including proper label association.
- form-accessibility demonstrates keyboard navigation by ensuring all form controls are reachable via Tab key.
Verify before relying
Read SKILL.md below before installing (4 files). Open directory: indexed for reading, not audited.
Install
Bbeierle12/Skill-MCP-Claude/form-accessibility · repository language: JavaScript
Open directory. Skills are indexed for reading, not audited. Review a skill's body before installing it.
Frequently 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)
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
Let your AI agent find skills like this
Example. Real query, live index.
You found this page by searching. An agent finds it by wishing: SkillFed indexes 56,283 agent skills by what they can do, searchable in plain language.
wish › “Implement WCAG 2.2 AA compliant forms with proper ARIA patterns and keyboard navigation”
Give your agent the search over MCP, or paste the wish link into any chat. No install? Search from any chat →
Related skills
This skill helps you systematically test websites and applications against WCAG accessibility standards, pinpointing areas where your digital properties fall short of inclusive design principles. By running structured audits, you can identify compliance gaps and prioritize remediation efforts to ensure your content reaches all users effectively.
This skill helps you evaluate your website's accessibility posture by detecting common compliance violations and usability barriers. It surfaces issues that impact visitors with disabilities, then provides clear recommendations to improve inclusivity and meet standards like WCAG.
This skill equips you to systematically evaluate web applications for accessibility compliance, pinpointing WCAG 2.1 violations and usability barriers that affect users with disabilities. It provides structured auditing capabilities to assess color contrast, keyboard navigation, semantic markup, and assistive technology compatibility, helping teams build more inclusive digital experiences.
This skill equips developers with practical guidance on WCAG standards and techniques for creating accessible web interfaces. Explore proven patterns and implementation strategies that ensure your components work for all users, regardless of ability or assistive technology.
This skill equips developers with the knowledge and techniques needed to design and build web applications that meet WCAG 2.1 AA accessibility standards. Learn how to identify barriers, implement inclusive patterns, and verify compliance across your projects. Gain hands-on experience making digital experiences usable for everyone.
This skill equips you to evaluate and improve digital experiences for users with disabilities, ensuring your interfaces meet modern accessibility standards. Leverage WCAG 2.2 guidelines and assistive technology best practices to create inclusive web applications that work for everyone.
More skills frontend-a11y (MIT) · qe-accessibility-testing (MIT) · Accessibility Expert (unlicensed)