Is your app welcoming to everyone?

Every non-text element needs a text equivalent so screen readers, search engines, and users with images off can still understand it.

• –Meaningful alt text on content images; empty alt on decorative ones
• –Labels or aria-label on icon-only buttons and links
• –Captions and transcripts for video and audio

Text and UI must meet WCAG AA contrast, and color alone can't be the only cue for meaning (errors, status, required fields).

• –4.5:1 for body text, 3:1 for large text and UI components
• –No text-gray-300 on white or muted-foreground/50 tokens
• –Errors marked with icon + text, not just red

Every interactive element must be reachable and usable with a keyboard, with a visible focus indicator and no traps.

• –No onClick on div/span without role and key handlers
• –Visible :focus-visible ring on buttons, links, inputs
• –Modals return focus and can be dismissed with Escape

Tap targets should be comfortable on mobile, motion should respect user preferences, and users shouldn't be rushed.

• –Touch targets at least 44×44px (bump size='icon' buttons)
• –Honor prefers-reduced-motion for animations
• –Avoid autoplay, auto-advancing carousels, and hard timeouts

Content should read in a logical order, use semantic structure, and label form inputs clearly so people know what to enter.

• –One <h1> per page, headings don't skip levels
• –Every input has a <label> or aria-label, errors describe the fix
• –html lang set; single <main> landmark per route

Use the right element for the job so assistive tech and browsers can interpret the page reliably — including as the app updates.

• –Prefer shadcn/Radix primitives over hand-rolled widgets
• –Unique IDs (careful with lists rendering the same id)
• –aria-live regions for dynamic updates like toasts