2 min lesson

Accessibility is table stakes

Walk through the important items in "Accessibility is table stakes" and give the practical point of each.

Accessibility is table stakesnot a follow-up ticket

For a Design Engineer, shipping a menu without keyboard support is shipping it broken. Interviewers will ask how a component behaves with no mouse, so build it in from the first commit.

Roles and state: the right role, plus aria-expanded, aria-selected and aria-controls wired to real ids.
Keyboard model: Arrow keys move within a widget, Tab moves between widgets, Escape closes, Enter/Space activate.
Focus trap and restore: a modal traps focus inside and returns it to the trigger on close.
Labels: every control has an accessible name, via visible text, aria-label or aria-labelledby.
Respect prefers-reduced-motion: gate non-essential animation behind it.

Learn more

Full explanation

When to abstract and when not topremature abstraction is a graded mistake

Pulling two similar components into one configurable component too early creates a prop-soup abstraction that nobody can read and every new case bends out of shape. The healthier instinct is to wait for the third real use before generalizing and to prefer composition over a growing options object.

Signal: Repetition
Abstract now: Three real, near-identical uses exist
Keep it inline: Two uses that merely look similar

Signal: Stability
Abstract now: The shape has stopped changing
Keep it inline: Requirements still in motion

Signal: Prop count
Abstract now: A small, orthogonal prop set covers cases
Keep it inline: Every new case adds a boolean flag

Signal	Abstract now	Keep it inline
Repetition	Three real, near-identical uses exist	Two uses that merely look similar
Stability	The shape has stopped changing	Requirements still in motion
Prop count	A small, orthogonal prop set covers cases	Every new case adds a boolean flag

Abstraction earns its keep on the third use, not the first.

Accessibility is table stakes

Step 1 of 3