Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <h1>Tabindex Woes</h1>
  
  <table class="test">
    <thead>
      <tr>
        <th>No Tabindex</th>
        <th>Tabindex="0"</th>
        <th>Tabindex="1"</th>
        <th>Sequential Tabindex</th>
        <th>Negative Tabindex</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>
          <a href="#">Link</a>
        </td>
        <td>
          <a tabindex="0" href="#">Link</a>
        </td>
        <td>
          <a tabindex="1" href="#">Link</a>
        </td>
        <td>
          <a tabindex="2" href="#">Link</a>
        </td>
        <td>
          <a tabindex="-1" href="#">Link</a>
        </td>
      </tr>
      <tr>
        <td>
          <button>Button</button>
        </td>
        <td>
          <button tabindex="0">Button</button>
        </td>
        <td>
          <button tabindex="1">Button</button>
        </td>
        <td>
          <button tabindex="3">Button</button>
        </td>
        <td>
          <button tabindex="-1">Button</button>
        </td>
      </tr>
      <tr>
        <td>
          <button type="button">Button (type="button")</button>
        </td>
        <td>
          <button tabindex="0" type="button">Button (type="button")</button>
        </td>
        <td>
          <button tabindex="1" type="button">Button (type="button")</button>
        </td>
        <td>
          <button tabindex="4" type="button">Button (type="button")</button>
        </td>
        <td>
          <button tabindex="-1" type="button">Button (type="button")</button>
        </td>
      </tr>
      <tr>
        <td>
          <button type="submit">Button (type="submit")</button>
        </td>
        <td>
          <button tabindex="0" type="submit">Button (type="submit")</button>
        </td>
        <td>
          <button tabindex="1" type="submit">Button (type="submit")</button>
        </td>
        <td>
          <button tabindex="5" type="submit">Button (type="submit")</button>
        </td>
        <td>
          <button tabindex="-1" type="submit">Button (type="submit")</button>
        </td>
      </tr>
      <tr>
        <td>
          <label>
            <span class="visuallyhidden">Input (type="text")</span>
            <input placeholder="Input (type='text')" type="text">
          </label>
        </td>
        <td>
          <label>
            <span class="visuallyhidden">Input (type="text")</span>
            <input tabindex="0" placeholder="Input (type='text')" type="text">
          </label>
        </td>
        <td>
          <label>
            <span class="visuallyhidden">Input (type="text")</span>
            <input tabindex="1" placeholder="Input (type='text')" type="text">
          </label>
        </td>
        <td>
          <label>
            <span class="visuallyhidden">Input (type="text")</span>
            <input tabindex="6" placeholder="Input (type='text')" type="text">
          </label>
        </td>
        <td>
          <label>
            <span class="visuallyhidden">Input (type="text")</span>
            <input tabindex="-1" placeholder="Input (type='text')" type="text">
          </label>
        </td>
      </tr>
      <tr>
        <td>
          <label>
            <span class="visuallyhidden">Textarea</span>
            <textarea placeholder="Textarea"></textarea>
          </label>
        </td>
        <td>
          <label>
            <span class="visuallyhidden">Textarea</span>
            <textarea tabindex="0" placeholder="Textarea"></textarea>
          </label>
        </td>
        <td>
          <label>
            <span class="visuallyhidden">Textarea</span>
            <textarea tabindex="1" placeholder="Textarea"></textarea>
          </label>
        </td>
        <td>
          <label>
            <span class="visuallyhidden">Textarea</span>
            <textarea tabindex="7" placeholder="Textarea"></textarea>
          </label>
        </td>
        <td>
          <label>
            <span class="visuallyhidden">Textarea</span>
            <textarea tabindex="-1" placeholder="Textarea"></textarea>
          </label>
        </td>
      </tr>
      <tr>
        <td>
          <label>
            <input type="checkbox">Input (type="checkbox")
          </label>
        </td>
        <td>
          <label>
            <input tabindex="0" type="checkbox">Input (type="checkbox")
          </label>
        </td>
        <td>
          <label>
            <input tabindex="1" type="checkbox">Input (type="checkbox")
          </label>
        </td>
        <td>
          <label>
            <input tabindex="8" type="checkbox">Input (type="checkbox")
          </label>
        </td>
        <td>
          <label>
            <input tabindex="-1" type="checkbox">Input (type="checkbox")
          </label>
        </td>
      </tr>
      <tr>
        <td>
          <label>
            <input name="test-radio" type="radio">Input (type="radio")
          </label>
        </td>
        <td>
          <label>
            <input name="test-radio" tabindex="0" type="radio">Input (type="radio")
          </label>
        </td>
        <td>
          <label>
            <input name="test-radio" tabindex="1" type="radio">Input (type="radio")
          </label>
        </td>
        <td>
          <label>
            <input name="test-radio" tabindex="9" type="radio">Input (type="radio")
          </label>
        </td>
        <td>
          <label>
            <input name="test-radio" tabindex="-1" type="radio">Input (type="radio")
          </label>
        </td>
      </tr>
      <tr>
        <td>
          <select>
            <option>Select</option>
          </select>
        </td>
        <td>
          <select tabindex="0">
            <option>Select</option>
          </select>
        </td>
        <td>
          <select tabindex="1">
            <option>Select</option>
          </select>
        </td>
        <td>
          <select tabindex="10">
            <option>Select</option>
          </select>
        </td>
        <td>
          <select tabindex="-1">
            <option>Select</option>
          </select>
        </td>
      </tr>
      <tr>
        <td>
          <div>Div</div>
        </td>
        <td>
          <div tabindex="0">Div</div>
        </td>
        <td>
          <div tabindex="1">Div</div>
        </td>
        <td>
          <div tabindex="11">Div</div>
        </td>
        <td>
          <div tabindex="-1">Div</div>
        </td>
      </tr>
      <tr>
        <td>
          <span>Span</span>
        </td>
        <td>
          <span tabindex="0">Span</span>
        </td>
        <td>
          <span tabindex="1">Span</span>
        </td>
        <td>
          <span tabindex="12">Span</span>
        </td>
        <td>
          <span tabindex="-1">Span</span>
        </td>
      </tr>
    </tbody>
  </table>
​
    <p>Read the article: <a href="http://www.alexlande.com/articles/cross-browser-tabindex-woes/">Cross-Browser Tabindex Woes</a>.</p>
</body>
</html>
 
body {
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
}
​
/* Thanks HTML5 Boilerplate! http://html5boilerplate.com/ */
.visuallyhidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}
​
.test {
  border: 1px solid #ddd;
  background: #fff;
}
​
.test tbody tr > * {
  border-top: 1px solid #eee;
}
​
.test th {
  text-align: left;
}
​
.test td,
.test th {
  padding: 12px;
}
​
.test :focus {
  outline: 5px solid red;
}
 
​
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
alexlandepro
0viewers