Keyboard Navigation and Tab Index

If you’ve ever used the Tab key to move between links or form fields on a website, you’ve used keyboard navigation. For many people, especially those who can’t use a mouse, keyboard navigation is the main way they browse the web.

In this article, you’ll learn what keyboard navigation is, how the tab order works, and how to use the HTML tabindex attribute safely. We’ll walk through small, practical code examples you can copy, paste, and experiment with—even if this is your very first time writing code.

Why Keyboard Navigation Matters

Not everyone uses a mouse. Some people use only a keyboard, assistive technologies, or alternative input devices. If your site can’t be used with a keyboard, those visitors are effectively locked out.

Good keyboard navigation:

Makes your site more accessible (usable by more people)
Often improves your layout and structure
Helps you catch hidden usability bugs

The good news: you don’t need to be a pro developer to make big improvements. A few simple habits and the correct use of tabindex go a long way.

The Basics: Tabbing Through a Page

Open any simple web page and press the Tab key. You’ll see focus move through certain elements, usually with a highlight or outline.

By default, the browser focuses on:

Links (<a href="...">)
Form controls (<input>, <button>, <select>, <textarea>)
Some interactive elements like <details>

The order is usually the same as the order of the elements in the HTML.

Example 1: A Simple Page with Natural Tab Order

Let’s start with a basic page. You can try this in a simple .html file.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Keyboard Navigation Example 1</title>
</head>
<body>
  <!-- A simple heading -->
  <h1>Welcome</h1>

  <!-- First link in the page -->
  <a href="#about">About Us</a>

  <!-- Second interactive element: a button -->
  <button>Contact</button>

  <!-- Third interactive element: a form field -->
  <input type="text" placeholder="Your name" />
</body>
</html>

What to do:

Save this as example1.html.
Open it in your browser.
Press Tab several times.

What you should see:

First, focus on the About Us link
Then on the Contact button
Then in the Your name input field

This is called the natural tab order, based on the order of elements in the HTML.

What Is `tabindex`?

tabindex is an HTML attribute that controls how an element behaves when you press the Tab key.

You’ll see it written like this:

<button tabindex="0">Click me</button>

The value after tabindex= is a number. That number changes how the browser treats the element.

Common values:

tabindex="0" – Element is focusable and follows the natural tab order
tabindex="-1" – Element can be focused only with JavaScript, not by tabbing
Positive numbers (like tabindex="1", tabindex="2") – Custom tab order (generally not recommended)

We’ll walk through these with examples.

Example 2: Making Non-Focusable Elements Focusable

Some elements, like <div> and <span>, are not focusable by default. That means you can’t reach them with the Tab key.

Sometimes, you want to make such an element keyboard-focusable (for example, a custom card that acts like a button). You can use tabindex="0" to do that.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Keyboard Navigation Example 2</title>
  <style>
    .card {
      border: 1px solid #ccc;
      padding: 1rem;
      margin: 1rem 0;
    }
    .card:focus {
      outline: 3px solid blue; /* visible focus style */
    }
  </style>
</head>
<body>
  <h1>Products</h1>

  <!-- This div acts like a card and can be focused with Tab -->
  <div class="card" tabindex="0">
    <h2>Item A</h2>
    <p>Click or press Enter/Space to learn more.</p>
  </div>

  <!-- A normal button after the card -->
  <button>Checkout</button>
</body>
</html>

Try it yourself:

Save as example2.html and open in your browser.
Press Tab.

You’ll see focus move:

To the Item A card (the div with tabindex="0")
Then to the Checkout button

tabindex="0" tells the browser: “Treat this element like other focusable elements and put it in the normal tab order.”

Tip: If you make something focusable like a button, it should also act like a button (respond to Enter/Space keys and announce properly to screen readers). For beginners, prefer real <button> elements whenever possible.

When to Use `tabindex="-1"`

tabindex="-1" removes an element from the Tab order but still allows it to receive focus via JavaScript or by clicking it.

This is useful for things like:

Modals or dialogs where you want to move focus there programmatically
Elements you don’t want users to reach by tabbing through the main page

For now, remember: tabindex="-1" means not reachable by Tab, but still focusable with scripts.

Avoid Positive `tabindex` Values (Like 1, 2, 3...)

You can set tabindex to positive numbers to manually control the order:

<a href="#" tabindex="2">Second</a>
<a href="#" tabindex="1">First</a>

In this example, the link with tabindex="1" would receive focus before the link with tabindex="2", even if it appears later in the HTML.

However, this quickly becomes hard to manage:

Adding new elements breaks the numbering
You can accidentally create a confusing, jumping tab order

For beginners (and even for pros), the safest rule is:

Do not use positive tabindex values. Stick to the natural order, and use only 0 or -1 when needed.

Example 3: Good vs. Confusing Tab Order

Let’s compare two versions of the same layout.

Version A: Natural Order (Good)

<!-- Version A: Good natural order -->
<h1>Signup</h1>
<input type="text" placeholder="Email" />
<input type="password" placeholder="Password" />
<button>Submit</button>

Pressing Tab moves: Email → Password → Submit. Simple and expected.

Version B: Forced Order (Confusing)

<!-- Version B: Confusing custom tabindex -->
<h1>Signup</h1>
<input type="text" placeholder="Email" tabindex="2" />
<input type="password" placeholder="Password" tabindex="3" />
<button tabindex="1">Submit</button>

Here, pressing Tab moves: Submit → Email → Password. This surprises users and can be especially frustrating for keyboard-only users.

Lesson: Let the HTML order guide the tab order. If you need a different order, rearrange the HTML instead of fighting it with tabindex numbers.

How to Test Keyboard Navigation

You don’t need special tools to test basic keyboard access. Your keyboard is enough.

Unplug your mouse (or just don’t touch it for a minute).
Use Tab to move forward through the page.
Use Shift + Tab to move backward.
Use Enter or Space to activate buttons and links.

Ask yourself:

Can you reach all links, buttons, and form fields?
Does the focus move in a logical order (top to bottom, left to right)?
Can you clearly see where the focus is (a visible outline or highlight)?

If something feels awkward or unexpected to you, it will likely feel that way to your users too.

Try It Yourself: Build a Small Keyboard-Friendly Form

Let’s put everything together with a small exercise.

Step 1 – Start with a basic form

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Keyboard-Friendly Form</title>
</head>
<body>
  <h1>Contact Us</h1>

  <label>
    Name:
    <input type="text" />
  </label>

  <label>
    Email:
    <input type="email" />
  </label>

  <label>
    Message:
    <textarea></textarea>
  </label>

  <button type="submit">Send</button>
</body>
</html>

Step 2 – Test with your keyboard

Press Tab from the browser’s address bar.
Focus should move: Name → Email → Message → Send.

Step 3 – Add a custom card, but keep it accessible

<!-- Add this above the form -->
<div class="info" tabindex="0">
  Press Tab to focus this box, then Tab again to reach the form.
</div>

Now check the order:

First the info box
Then Name, Email, Message, Send

If that order makes sense for your page, you’re using tabindex correctly.

Your challenge:

Try removing tabindex="0" from the info box, reload the page, and test again.
Notice how you can no longer reach that box with Tab.

Experimenting like this is one of the best ways to learn.

Quick Recap and What’s Next

You’ve just learned:

What keyboard navigation is and why it’s important for accessibility
How the browser’s natural tab order works
What the tabindex attribute does (0, -1, and why to avoid positive numbers)
How to test your pages using only the keyboard

If you remember only three things, make them these:

Use the natural HTML order whenever possible.
Use tabindex="0" sparingly, to make truly interactive custom elements focusable.
Avoid positive tabindex values—they create confusing, hard-to-maintain tab orders.

Next steps:

Practice by checking the keyboard navigation on a few favorite websites.
Try rebuilding a simple page you like, paying attention to the tab order.
Look up “ARIA roles” and “focus management” when you feel ready for the next level.

You’re doing real accessibility work already, and that’s a big win. Keep experimenting, keep testing with your keyboard, and your skills—and your users’ experience—will keep improving.

Mudzinga