0Pricing
HTML Academy · Lesson

tabindex and accesskey

Control keyboard navigation order and shortcuts.

Keyboard Navigation

Users without mice rely on Tab to navigate interactive elements:

  • Naturally focusable: <a href>, <button>, <input>, <select>, <textarea>
  • Non-interactive elements (<div>, <span>) are not in the tab order
  • tabindex controls whether and where an element appears in the tab order

tabindex="0"

tabindex="0" adds a non-interactive element to the natural tab order:

<div tabindex="0" role="button" onclick="handleClick()">
  Custom Button
</div>
<!-- Now Tab navigates to this div -->
<!-- It receives focus at the natural position in the DOM -->

<!-- Better: use a real button instead! -->
<button onclick="handleClick()">Real Button</button>

All lessons in this course

  1. id class style and title
  2. The hidden Attribute
  3. tabindex and accesskey
  4. Custom Data Attributes data-*
← Back to HTML Academy