Accessibility patterns Claude inconsistently applies: ARIA role completeness, touch target sizing, forced-colors/reduced-motion support, and WCAG 2.2 new criteria. Use when building UI components, forms, modals, tables, or interactive features. Triggers: accessibility, a11y, accessible, WCAG, screen reader, keyboard navigation, focus, aria, role, alt text, contrast, tab index, focus trap, landmark, semantic HTML, label, fieldset, live region.
Accessibility — Patterns Claude Skips
You already know WCAG 2.2 AA. This skill covers the patterns you inconsistently apply.
ARIA completeness
Never skip ARIA roles and attributes on interactive elements. Every interactive component needs the full set — not just the obvious ones.
Modals:role="dialog" (or role="alertdialog" for destructive confirmations) + aria-modal="true" + aria-labelledby pointing to the title + tabindex="-1" on the dialog container
Forms:aria-required on required inputs, aria-invalid when validation fails, aria-describedby switching between hint text and error message IDs depending on state
Icon buttons: Always aria-label — never ship an icon button without one
Tables:<caption>, scope="col", aria-sort on sortable columns, aria-live="polite" region to announce sort changes
Loading states:aria-busy="true" on the updating region, role="status" for non-intrusive updates
Errors:role="alert" or aria-live="assertive" — errors must be announced, not just visually displayed
Touch targets
WCAG 2.2 AA requires 24x24px minimum. Apple/Google recommend 44x44px. Always use min-height: 44px on buttons, links, and interactive controls. Add gap: 8px minimum between adjacent targets.
