form-accessibility

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.