WCAG 2.2, ARIA, semantic HTML, keyboard navigation, and color contrast standards for web UIs. Legal compliance baseline. (triggers: **/*.tsx, **/*.jsx, **/*.html, **/*.vue, **/*.component.html, accessibility, a11y, wcag, aria, screen reader, focus, alt text)
Accessibility is a legal requirement in the EU (Web Accessibility Directive), USA (ADA/Section 508), and many other jurisdictions. Non-compliance carries litigation risk. Target WCAG 2.2 Level AA as the minimum.
Use the correct HTML element before reaching for ARIA. <button>, <a>, <nav>, <main>, <section>, <form>, <label> convey semantics natively.
Never use <div> or <span> for interactive elements — they have no keyboard role by default.
Headings (–) must form a logical outline. One per page.
h1h6h1Use <button> not <div onClick>, <a> not <span onClick>, etc.
ARIA supplements semantics when native HTML is 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 values (tabindex="1" breaks natural order).outline: none without a custom focus style.outline: none without a visible replacement (min 2px solid, 3:1 contrast).alt="" (empty, not missing).alt text (what the 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 have an alt attribute (empty string if decorative).outline: none without replacement focus style.aria-live for async status updates.