accessibility

name	accessibility
description	WCAG 2.2 compliance, ARIA patterns, keyboard navigation, screen reader support, and inclusive design. Use when: reviewing accessibility, adding ARIA attributes, fixing contrast issues, implementing keyboard navigation, creating accessible forms, building accessible components, WCAG audit.

Accessibility

When to Use

• Reviewing or auditing UI components for accessibility compliance
• Adding ARIA roles, states, and properties
• Fixing color contrast issues
• Implementing keyboard navigation patterns
• Making forms accessible (labels, errors, grouping)
• Building custom interactive components (modals, menus, tabs)
• Responding to accessibility audit findings

WCAG 2.2 Quick Reference

Level A (Minimum)

Criterion	Requirement
1.1.1 Non-text Content	All images have meaningful alt text or are marked decorative
1.3.1 Info and Relationships	Structure conveyed visually is also in markup (headings, lists, tables)
2.1.1 Keyboard	All functionality available via keyboard
2.4.1 Bypass Blocks	Skip navigation link or landmark regions
4.1.2 Name, Role, Value	Custom controls expose name, role, state to assistive tech

Level AA (Target)

Criterion	Requirement
1.4.3 Contrast (Minimum)	4.5:1 for normal text, 3:1 for large text
1.4.11 Non-text Contrast	3:1 for UI components and graphical objects