<!-- Copyright 2018 Google LLC.
SPDX-License-Identifier: Apache-2.0 -->
<!DOCTYPE html>
<html lang="en">

<head>
  <title>Example of tabindex=0</title>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="/style.css">
</head>

<body>
  <p class="instructions">
    To test: <b>click here</b>, then press <kbd>TAB</kbd>.
  </p>

  <div tabindex="0" class="focusable">
    Focus me with the TAB key
  </div>
  <div tabindex="0" class="focusable">
    Focus me with the TAB key
  </div>
</body>

</html>
/* Copyright 2018 Google LLC.
SPDX-License-Identifier: Apache-2.0 */

body {
  font-family: "Benton Sans", "Helvetica Neue", helvetica, arial, sans-serif;
  margin: 2em;
}

.instructions {
  margin: 8px;
  line-height: 1.1em;
}

.focusable {
  display: inline-block;
  border: 2px solid black;
  border-radius: 10px;
  padding: 10px;
  margin: 8px;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.