<h1>HTML Methods for Making Things Tab-able</h1>

<p>All of the items below are tabbable. The text area and button are tabbable by default, and the divs use two different methods.</p>

<textarea tabindex="1">A textarea. Focus states work by default.</textarea>
<button tabindex="2">And I'm a button. Again, works by default.</button>
<div contenteditable tabindex="3">Divs don't usually have a focus state. But I'm special, because I'm <code>contenteditable</code>.</div>
<div tabindex="4">I'm another div, and I have a <code>tabindex</code>. You can't edit me like the div above, but you can tab to me.</div>
<textarea tabindex="-1">I can't be tabbed to. This is a terrible idea, generally, but it can be done using tabindex="-1". Notice that (if you click) I still have a focus state, even though you can't tab to me.</textarea>
@import "compass/css3";

:focus {
  background: pink;
}

div {
  margin: 16px 0;
}

textarea {
  width: 500px;
}

button {
  margin: 16px 0;
  display: block;
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js