# Accessibility Patterns > WCAG 2.2 Level AA compliance patterns for Rails applications including ARIA implementation, keyboard navigation, focus management, screen reader support, and color contrast requirements. Use this skill when implementing any user-facing UI to ensure accessibility compliance. Trigger keywords: accessibility, a11y, WCAG, ARIA, screen reader, keyboard navigation, focus, color contrast, disability, assistive technology - Skill: `majiayu000/accessibility-patterns` (Agent Skill, multi-file: 2 files) - Install (CLI): `npx skillmds add majiayu000/accessibility-patterns` - Raw SKILL.md: https://api.skillmd.com/api/skills/majiayu000/accessibility-patterns/raw - Safety review: pending - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Web & Frontend - Author: majiayu000 (https://skillmd.com/u/majiayu000) - Updated: 2026-09-09 - Page: https://skillmd.com/skills/majiayu000/accessibility-patterns --- # Accessibility Patterns Comprehensive WCAG 2.2 Level AA compliance patterns for Rails applications with ViewComponents, Hotwire, and TailAdmin. ## When to Use This Skill Use this skill when: - Implementing any user-facing UI component - Building interactive widgets (modals, dropdowns, tabs) - Creating forms with validation feedback - Adding dynamic content updates (Turbo Streams) - Reviewing existing components for accessibility compliance - Responding to accessibility audit findings --- ## 1. WCAG 2.2 Level AA Quick Reference ### 1.1 Perceivable | Criterion | Requirement | Implementation | |-----------|-------------|----------------| | 1.1.1 Non-text Content | Alt text for images | `alt="descriptive text"` or `alt=""` for decorative | | 1.3.1 Info and Relationships | Semantic HTML | Use proper heading hierarchy, lists, tables | | 1.4.3 Contrast (Minimum) | 4.5:1 for text, 3:1 for large text | Verify TailAdmin colors meet ratios | | 1.4.4 Resize Text | 200% zoom support | Use relative units (rem, em) | | 1.4.11 Non-text Contrast | 3:1 for UI components | Focus rings, borders, icons | ### 1.2 Operable | Criterion | Requirement | Implementation | |-----------|-------------|----------------| | 2.1.1 Keyboard | All functionality via keyboard | Tab, Enter, Space, Arrow keys | | 2.1.2 No Keyboard Trap | Users can navigate away | Proper focus management | | 2.4.3 Focus Order | Logical tab sequence | DOM order matches visual order | | 2.4.7 Focus Visible | Clear focus indicator | Tailwind focus rings | | 2.5.8 Target Size | Minimum 24x24px | Touch targets 44x44px recommended | ### 1.3 Understandable | Criterion | Requirement | Implementation | |-----------|-------------|----------------| | 3.1.1 Language of Page | Declare page language | `` | | 3.2.1 On Focus | No unexpected changes | Avoid auto-submit on focus | | 3.3.1 Error Identification | Identify errors clearly | aria-invalid, role="alert" | | 3.3.2 Labels or Instructions | Label all inputs | `