Accessible Components

Overview

Accessibility is not a feature you add later — it's how you build interactive elements from the start. The single best move in a SaaS app is to use real semantic elements and Radix/shadcn primitives, which ship correct ARIA and keyboard behavior. Most a11y bugs come from re-inventing a button or dropdown with a <div>.

When to use

• Building any interactive control (menus, dialogs, tabs, toggles).
• Reviewing UI for keyboard and screen-reader support.
• A <div onClick> is standing in for a button.

Rule 1: Use the right element

// ✗ Inaccessible: no focus, no Enter/Space, no role
<div onClick={save} className="btn">Save</div>