skills.rest
Bbeierle12
Bbeierle12COMMUNITY
Explore all skills by this author →
GitHub

form-accessibility

Implement WCAG 2.2 AA form accessibility patterns in React/TypeScript projects.

8|3|Updated Dec 12, 2025
Search Tags:#accessibility#screen reader#keyboard navigation#ARIA#WCAG#UI/UX#forms
One-click install
npx skills add https://github.com/Bbeierle12/Skill-MCP-Claude --skill form-accessibility
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: form-accessibility
Source: https://github.com/Bbeierle12/Skill-MCP-Claude/tree/main/skills/form-accessibility
Command: npx skills add https://github.com/Bbeierle12/Skill-MCP-Claude --skill form-accessibility

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires react, and includes scripts (resource) and references (resource) components.

What problem does it solve?

Creating web forms that are usable by everyone, including individuals with disabilities, is challenging and often overlooked. This Skill provides comprehensive guidance and ready-to-use patterns for WCAG 2.2 AA compliant forms, ensuring your applications are inclusive and meet legal standards.

Core Features & Use Cases

  • WCAG 2.2 AA Compliance: Adheres to the latest accessibility standards for forms, covering labels, error identification, target size, and accessible authentication.
  • ARIA Patterns: Guides on using aria-describedby, aria-invalid, aria-required, and fieldset/legend for robust screen reader support.
  • Focus Management: Strategies for keyboard navigation, focusing on first errors, multi-step form focus, and focus traps for modals.
  • Color & Contrast: Ensures visual accessibility with guidelines for error states, focus indicators, and colorblind-friendly validation.
  • Use Case: A team needs to ensure their new customer registration form meets WCAG 2.2 AA standards. This skill provides the exact code patterns and checklist to implement accessible labels, error messages, and keyboard navigation, saving audit time and ensuring compliance.

Quick Start

Generate an accessible React form field component that includes a label, hint text, error message, and appropriate ARIA attributes for screen readers.

Frequently Asked Questions about form-accessibility

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I make React forms accessible to screen readers and keyboard users?▼

Screen reader accessibility in React forms requires proper ARIA attributes like aria-describedby and aria-invalid, semantic HTML labels linked to inputs, separate hint text, and keyboard navigation support. This Skill provides ready-to-use patterns implementing WCAG 2.2 AA standards for inclusive form design.

What does WCAG 2.2 AA compliance mean for form design?▼

WCAG 2.2 AA compliance ensures forms meet accessibility standards covering visible labels, error identification, keyboard navigation, focus management, and target sizing. This Skill guides implementation of these requirements, including aria-describedby patterns and color contrast for validation states.

How do I implement keyboard navigation and focus management in React forms?▼

Keyboard navigation requires managing focus flow, implementing focus traps for modals, focusing on the first error field, and ensuring all interactive elements are reachable. This Skill provides strategies for multi-step form focus and safe focus management meeting WCAG standards.

Can I use ARIA attributes to make form errors accessible?▼

Yes. ARIA attributes like aria-invalid, aria-describedby, and aria-required communicate form state to screen readers. This Skill shows how to pair these with descriptive error messages and proper labeling to satisfy WCAG error identification requirements.

Do accessible forms require special handling for color and contrast?▼

Yes. Accessible forms need sufficient color contrast for error states and focus indicators, plus colorblind-friendly validation design. This Skill provides guidelines ensuring visual accessibility alongside screen reader support and keyboard navigation.

What's the difference between labels, hint text, and error messages in accessible forms?▼

Visible labels identify form fields, hint text provides optional guidance, and error messages describe validation failures—each serving distinct purposes in WCAG compliance. This Skill shows how to structure and separate these elements with proper ARIA bindings for screen reader clarity.

Related Skills

Explore More Software Engineering Skills→
rsmdtrsmdt
381

accessibility-standards

Apply WCAG 2.1 AA accessible design patterns to digital interfaces.

Community
Advanced
orangehrmorangehrm
1.1k

frontend-data

Implement OrangeHRM Vue data flows with APIService, pagination, and validation.

Official
Advanced
doanchienthangdevdoanchienthangdev
4

implementing-accessibility

Implement WCAG 2.1 AA compliant React interfaces with ARIA and keyboard navigation.

Community
Intermediate
pelcherspelchers

ensuring-accessibility

Implement WCAG 2.1 AA-compliant accessibility patterns for web interfaces.

Community
Advanced