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.