Clickable div demo (use a button)

TAB DEMO

Clickable div (use a button)

Try Tab → Enter/Space • compare BEFORE vs AFTER

Settings

Step 1: press Tab Step 2: try to reach Save Tip: press Space to emphasize AFTER

BEFORE: looks clickable but is a plain <div>, so keyboard users can’t reach it with Tab. AFTER: a real <button> participates in keyboard navigation by default.

BEFORE (click-only div)

Save

Try Tab: focus skips “Save” because it’s not a real control.

AFTER (real button)

Tab reaches “Save”. Enter/Space activates it.

Last activation: (none yet)

Tip: add ?autoplay=1 to auto-run the demo for capture.

Share this demo