accessibility-implementation

What problem does it solve?

This Skill ensures your digital products are usable by everyone, including individuals with disabilities, by guiding you through WCAG 2.1 Level AA compliance. It helps you implement accessible interfaces, preventing exclusion and meeting legal and ethical standards for inclusive design.

Core Features & Use Cases

• WCAG 2.1 Essentials: Implement perceivable, operable, understandable, and robust interfaces covering color contrast, alt text, keyboard navigation, and clear labels.
• ARIA Patterns: Apply WAI-ARIA attributes correctly to enhance semantics for custom components, buttons, forms, and dynamic content like modals.
• Keyboard & Screen Reader Support: Ensure all interactive elements are keyboard navigable with logical tab order and provide proper announcements for screen readers.
• Use Case: You're building a new signup form. Use this skill to ensure all input fields have explicit <label> tags, error messages are linked via aria-describedby and role="alert", and the form is fully navigable and submittable using only a keyboard.

Quick Start

Example: Accessible form input with label and error message

<label htmlFor="email">Email address</label> <input id="email" type="email" required aria-required="true" aria-describedby={hasError ? "email-error" : undefined} /> {hasError && (

<p id="email-error" role="alert"> Please enter a valid email address </p> )}