Accessibility & UX

Semantic HTML does most of the work for free

The single highest-leverage accessibility practice is using the right element. A <button> is focusable, keyboard-operable, and announced as a button automatically. A <div onClick> is none of those. Use <button>, <a>, <nav>, <main>, <label>, <ul>, headings in order — and you get accessibility, keyboard support, and SEO essentially for free.

• <a> navigates (has an href); <button> performs an action. Don't swap them.
• Every input needs an associated <label> (wrap it, or use htmlFor). Placeholder text is not a label.
• One <h1> per page; don't skip heading levels — screen-reader users navigate by them.

Keyboard & focus

• Everything clickable must be reachable and operable by keyboard (Tab to reach, Enter/Space to activate). Test by unplugging your mouse.
• Maintain a visible focus indicator — never outline: none without a clear replacement. Sighted keyboard users need to see where they are.
• Manage focus on route changes and when opening/closing modals: move focus into a dialog, trap it there, and return it to the trigger on close. Add an Escape-to-close.

ARIA — the first rule is don't

• Prefer a native element over an ARIA role. ARIA supplements HTML; it doesn't replace it. A wrong ARIA role is worse than none.
• When you do need it: aria-label for icon-only buttons, aria-describedby to tie errors to inputs, aria-live regions to announce dynamic updates (toasts, async results), aria-expanded on disclosure toggles.
• Better still: use an accessible primitive library (Radix UI, React Aria) for menus, dialogs, comboboxes — these are genuinely hard to get right by hand.

Visual & sensory

• Color contrast: aim for WCAG AA (4.5:1 for body text). Don't convey meaning by color alone — pair it with text or an icon.
• Respect prefers-reduced-motion — gate non-essential animation behind it.
• Don't disable zoom; ensure the layout survives 200% text size.

It's a UX win, not just compliance

Keyboard support, clear focus, sensible tab order, and honest error messages make the product better for everyone, not only assistive-tech users. Run axe / Lighthouse as a baseline, but automated tools catch maybe a third of issues — keyboard-test the real flows.