Back
Syntax
Study
Editor
Mode:
HTML
CSS
JavaScript
PHP
Reset
Run »
HTML / CSS / JS
<!-- Good: native button is keyboard accessible --> <button onclick="doAction()">Click me</button> <!-- Bad: div is not keyboard accessible --> <div onclick="doAction()">Click me</div> <!-- If you must use a div, add role + tabindex + keydown --> <div role="button" tabindex="0" onkeydown="if(event.key==='Enter'||event.key===' ')doAction()" onclick="doAction()"> Click me </div> <!-- Never use tabindex > 0 — it breaks the natural tab order --> <!-- tabindex="0": adds to natural order --> <!-- tabindex="-1": focusable by JS, not by tab -->
Result
Open