principle-accessibility

What problem does it solve?

This Skill prevents accessibility defects from slipping into UI work by enforcing WCAG 2.2 AA–aligned semantic structure, keyboard behavior, focus management, contrast, and assistive-technology compatibility.

Core Features & Use Cases

• Semantic HTML first: prioritize native elements, landmark regions, and correct heading/list/table structure to get roles and accessible names “for free.”
• ARIA with guardrails: use ARIA only when native semantics are insufficient, avoid redundant roles, and ensure live regions and accessible naming follow required patterns.
• Keyboard & focus correctness: guarantee interactive reachability, preserve logical tab order, provide robust focus indicators, and implement modal focus traps with escape/restore behavior.
• Visual accessibility: apply WCAG contrast targets, avoid color-only meaning, ensure adequate pointer target sizing, and respect reduced-motion preferences.
• Screen-reader validation: ensure images and form controls have correct alt/text and labeling, announce status updates without stealing focus, and reduce false confidence from automated tooling alone.

Quick Start

Ask for an accessibility audit of the provided UI markup and request fixes for keyboard navigation, focus handling in dialogs, ARIA usage, image alt text, form labels, and WCAG 2.2 AA contrast/motion concerns.