accessibilityEngineering

Accessibility & UX

Semantic HTML, keyboard and focus management, ARIA used correctly, color contrast, and respecting user preferences.

1 item

Links1

01NotesNote

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.