Keyboard Navigation

Keyboard Accessibility

All interactive elements must be reachable and usable by keyboard. Use tabindex carefully and ensure visible focus indicators.

Example

<!-- 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 -->

HTML

Full Editor

Pro Tip

Test your entire page using only the keyboard — Tab, Shift+Tab, Enter, Space, Arrow keys.

Related Resources

HTML Reference

Complete tag & property list

HTML How-To Guides

Step-by-step practical guides

HTML Exercises

Practice what you've learned