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. (triggers: **/*.tsx, **/*.jsx, **/*.html, **/*.vue, **/*.component.html, accessibility, a11y, wcag, aria, screen reader, focus, alt text)
Legal req: EU (Web Accessibility Directive), USA (ADA/Section 508). Non-compliance = litigation risk. Minimum: WCAG 2.2 Level AA.
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 supplements native HTML when insufficient (e.g., custom widgets). Rules:
role with required properties must include them (e.g., role="slider" needs aria-valuenow, aria-valuemin, aria-valuemax).aria-live="polite" for status messages; aria-live="assertive" only for critical alerts.<label>, aria-label, or aria-labelledby).aria-hidden="true" on decorative icons; never on focusable elements.tabindex (tabindex="1" breaks natural order).outline: none without visible replacement (min 2px solid, 3:1 contrast).alt="" (empty, not missing).alt — what image conveys, not "image of…".axe-core zero critical violations.onClick on <div>: Use <button> or add role, tabindex, and keyboard handlers.alt: Every <img> must alt attribute (empty string if decorative).outline: none without replacement focus style.aria-live for async status updates.