--- name: accessibility description: | WCAG 2.1 Level AA accessibility audit and remediation guidance. Keyboard navigation, screen readers, semantic HTML, ARIA patterns. Use when: "accessibility", "a11y", "WCAG", "keyboard", "screen reader", "semantic HTML", "ARIA", "inclusive design", "disability" --- # Accessibility Skill WCAG 2.1 Level AA compliance auditing and inclusive design guidance. ## Core Principle **Accessibility is not optional.** It's legal compliance, user respect, and better code. ## WCAG 2.1 Four Principles: POUR ### 1. Perceivable Information must be presentable to users in ways they can perceive. - Text alternatives for images - Color contrast 4.5:1 (normal), 3:1 (large) - No info by color alone ### 2. Operable Interface components must be operable. - All functionality via keyboard - No keyboard traps - Visible focus indicators ### 3. Understandable Information and operation must be understandable. - Form labels associated - Error messages clear - Consistent navigation ### 4. Robust Content must work with assistive technologies. - Valid HTML (no duplicate IDs) - Proper ARIA usage - Status messages announced **Full WCAG checklists**: See [refs\/wcag-checklist.md](refs\/wcag-checklist.md) ## Quick Audit Process ### 1. Automated Scan ```bash # If wicked-browse available wicked-browse a11y-audit {url_or_file} # Otherwise use: axe DevTools, Lighthouse, WAVE, pa11y ``` ### 2. Keyboard Test (5 minutes) - Tab through entire page - Can reach all interactive elements? - Focus always visible? - Tab order logical? - Can escape modals\/menus? **Full keyboard testing guide**: See [refs\/keyboard-testing.md](refs\/keyboard-testing.md) ### 3. Screen Reader Spot Check - Turn on VoiceOver (Mac) or NVDA (Windows) - Are images described? - Are buttons\/links clear? - Are form labels read? **Full screen reader guide**: See [refs\/screen-reader-testing.md](refs\/screen-reader-testing.md) ### 4. Code Review ```bash # Find potential issues wicked-search "

Submit<\/div>