common-accessibility

name	common-accessibility
description	Enforce WCAG 2.2 AA compliance with semantic HTML, ARIA roles, keyboard navigation, and color contrast standards for web UIs. Use when building interactive components, adding form labels, fixing focus traps, or auditing a11y compliance.
metadata	{"triggers":{"files":["**/*.tsx","**/*.jsx","**/*.html","**/*.vue","**/*.component.html"],"keywords":["accessibility","a11y","wcag","aria","screen reader","focus","alt text"]}}

Common Accessibility (a11y) Standards

Priority: P1 (HIGH)

Legal req: EU (Web Accessibility Directive), USA (ADA/Section 508). Non-compliance = litigation risk. Minimum: WCAG 2.2 Level AA.

🏗 Semantic HTML First

• Use native HTML before ARIA. <button>, <a>, <nav>, <main>, <section>, <form>, <label> convey semantics natively.

• Never <div>/<span> for interactive elements — no keyboard role by default.

• Headings (h1–h6) must form logical outline. One h1 per page.

• <button> not <div onClick>, <a> not <span onClick>.

🎭 ARIA — Use Sparingly

ARIA supplements native HTML when insufficient (e.g., custom widgets). Rules:

1. No ARIA > Bad ARIA: If native HTML works, use it. ARIA only adds roles, not behavior.
2. Required attributes: Every role with required properties must include them (e.g., role="slider" needs aria-valuenow, aria-valuemin, aria-valuemax).
3. Live Regions: Use aria-live="polite" for status messages; aria-live="assertive" only for critical alerts.
4. Labels: Every form control needs programmatic label (<label>, aria-label, or aria-labelledby).
5. Hidden content: Use aria-hidden="true" on decorative icons; never on focusable elements.

⌨️ Keyboard Navigation

• All interactive elements MUST reachable and operable via keyboard.
• Tab order must follow visual reading order. No positive tabindex (tabindex="1" breaks natural order).
• Visible focus indicators required (see Focus style rule below).
• Modals/Dialogs: Trap focus inside when open. Return focus to trigger element on close.
• Escape key: Must close modals, dropdowns, and tooltips.
• Focus style: Never outline: none without visible replacement (min 2px solid, 3:1 contrast).

🎨 Color & Contrast

• Normal text: ≥ 4.5:1 ratio. Large text (≥ 18pt or 14pt bold): ≥ 3:1. UI components: ≥ 3:1.
• Never convey information through color alone — add icon, pattern, or text label.
• Test with: axe DevTools, WAVE, Lighthouse.

📐 Touch & Pointer Targets

• Minimum interactive target size: 44×44px (WCAG 2.5.5 AAA) / 24×24px minimum (WCAG 2.2 AA).
• Sufficient spacing between adjacent targets — prevent mis-taps.

🖼 Images & Media

• Decorative images: alt=" (empty, not missing).
• Informative images: descriptive alt — what image conveys, not "image of…".
• Complex charts/graphs: text summary or data table alternative.
• Video: Captions mandatory. Audio descriptions for visual-only content.

🧪 Testing Minimum

• CI gate: axe-core zero critical violations.
• Manual: keyboard-only full flow + screen reader (NVDA/VoiceOver) + 200% zoom.

Anti-Patterns

• No onClick on <div>: Use <button> or add role, tabindex, and keyboard handlers.
• No missing alt: Every <img> must alt attribute (empty string if decorative).
• No color-only status: Red = error must also show icon or text.
• No outline: none without replacement focus style.
• No auto-playing media: Users with vestibular disorders may harmed.
• No dynamic content without announcement: Use aria-live for async status updates.

References

• Semantic HTML, ARIA & Focus Patterns
• WCAG 2.2 Quick Reference
• ARIA Authoring Practices Guide
• axe-core Rules