ENFORCE WCAG 2.2 AA compliance. Use semantic HTML first. Provide visible focus indicators. Label all inputs. Ensure contrast ratios. Test with keyboard. Prevent keyboard traps, invisible focus, low contrast, unlabeled inputs, and non-semantic HTML. Trigger: "make it accessible", "fix a11y issues", "audit for accessibility", "ensure WCAG compliance".
ENFORCE WCAG 2.2 AA compliance. Use semantic HTML first. Provide visible focus indicators. Label all inputs. Ensure contrast ratios. Test with keyboard. Prevent keyboard traps, invisible focus, low contrast, unlabeled inputs, and non-semantic HTML. Trigger: "make it accessible", "fix a11y issues", "audit for accessibility", "ensure WCAG compliance".
EXPLICITLY when asked to review/audit for accessibility
When creating any interactive element: buttons, forms, navigation, modals
When setting colors, verify contrast ratios
CORE PRINCIPLE
Semantic HTML first. ARIA supplements, never replaces. Test every component with keyboard before mouse. Every interactive element must be focusable and labeled.
EXECUTE: Six Audit Categories
1. Semantic HTML: ALWAYS Use Native Elements
<!-- ✅ CORRECT --><buttononClick={...}>Save</button><nav>Main navigation</nav><main>Primary content</main><labelhtmlFor="email">Email</label><!-- ❌ WRONG, div with role and tabIndex means you chose the wrong element --><divonClick={...}role="button"tabIndex={0}>Save</div><divclass="nav">Navigation</div>
DETECTION RULE: If you find yourself adding role and tabIndex to a <div>, you're using the wrong element. Use the native element instead.
2. Focus Management: ALWAYS Show Visible Focus
/* ❌ NEVER, removes all focus visibility */button:focus { outline: none; }
/* ✅ ALWAYS, visible focus ring for keyboard users */button:focus-visible {
outline: none;
box-shadow: 0003pxvar(--color-primary);
}
