# Keyboard Use and Focus

Everything on a page should work with the keyboard alone, and it does when you use real links, buttons and form fields in a sensible order, add a skip link, and keep the focus ring visible.

Journeyman · HTML · Web Development · Updated October 29, 2026

## After this lesson you can

- Use a page with the keyboard alone, with Tab, Shift+Tab, Enter, Space and the arrow keys
- Predict a page's focus order and use tabindex 0 and -1, never a positive number
- Add a skip link that jumps to the main content

## Key takeaways

- Tab moves forward through the page and Shift+Tab moves back; Enter follows links and presses buttons; Space presses buttons and ticks checkboxes.
- Links, buttons and form fields can take focus by themselves. Focus moves through them in the order they come in the HTML.
- tabindex="0" puts an element in the Tab order and tabindex="-1" lets only a link or a script focus it. A positive tabindex scrambles the order.
- A skip link, the first thing on the page, lets a keyboard user jump past the header to the main content.
- Never remove the focus ring. It's how a keyboard user knows where they are.

Picture a Starlight Cinema customer whose trackpad has stopped working the night before a premiere. Or someone with a tremor who can't hold a mouse still, or someone who uses a switch device that works the way the Tab key does. They can buy tickets only if your page works with the keyboard. Making sure it does is one of the first things an accessibility check looks at, and with the right HTML, most of it comes for free.

## The keys people use

You already know a TV remote: arrows move a highlight from tile to tile, and OK picks one. The keyboard works the same way on a web page. The highlighted thing is said to have **focus**, and the ring drawn around it is the **focus ring** (or focus outline).

| Key | What it does |
|---|---|
| **Tab** | Moves focus to the next link, button or form field |
| **Shift + Tab** | Moves focus back to the previous one |
| **Enter** | Follows a link, or presses a button |
| **Space** | Presses a button, or ticks and unticks a checkbox |
| **Arrow keys** | Move between the choices in a group of radio buttons, or in a dropdown |
| **Escape** | Closes a dialog or a popup |

Radio buttons surprise people. Tab lands on the group once, on the chosen option (or the first one when none is chosen), and the arrow keys move between the options inside it. One more Tab leaves the group.

```html
<fieldset>
  <legend>Seat type</legend>
  <input type="radio" id="standard" name="seat" value="standard" checked>
  <label for="standard">Standard</label>
  <input type="radio" id="recliner" name="seat" value="recliner">
  <label for="recliner">Recliner</label>
</fieldset>
```

**Try it.** Open a site you use often, put your mouse out of reach, and try to do one real task with the keyboard: search for something, open a menu, or add something to a cart. Where did you get stuck?

## What can take focus

Not everything on a page can take focus, and it shouldn't: a keyboard user doesn't want to stop on every paragraph. The things that can, called **focusable areas**, are the things you can use:

```html
<a href="tickets.html">Ticket prices</a>         <!-- a link with an href -->
<button type="button">Show trailer</button>      <!-- a button -->
<input type="email" id="email" name="email">     <!-- a form field -->
<select name="day"><option>Friday</option></select>
<textarea name="comments"></textarea>
<details><summary>Snack bar menu</summary></details>  <!-- the clickable line of a <details> -->
```

A `<video>` with `controls` gets focusable controls too. Paragraphs, headings, pictures and `<div>`s don't take focus, and an `<a>` with no `href` doesn't either. That's why a `<div>` made to look like a button is skipped by the Tab key.

## Focus follows the order of the HTML

Pressing Tab again and again walks through the page's focusable areas in the order they're written in the HTML, top to bottom. The standard calls this **sequential focus navigation**. For the Starlight Cinema, that's the logo link, the three menu links, the first "Buy tickets", and so on down the page.

That means the order you write things in is the order a keyboard user meets them. If CSS moves the newsletter form to the top of the screen while it's last in the HTML, focus still jumps to it last, and a keyboard user sees the focus ring leap around the screen. Keep the HTML in the order people read it.

**Try it.** Before you press Tab on a page, guess the first five things it will land on, then check.

## tabindex: 0 and -1, never positive

The `tabindex` attribute changes whether something can take focus. Only two values are worth using:

```html
<!-- 0: joins the Tab order, in its place in the HTML -->
<div class="showtimes-scroller" tabindex="0">(a wide table of every showtime this month)</div>

<!-- -1: can be focused by a link or a script, but Tab skips it -->
<h2 id="sold-out-message" tabindex="-1">Sorry, that showing has sold out</h2>
```

- `tabindex="0"` puts something that isn't focusable into the Tab order, at its place in the HTML. It's for rare cases such as a scrollable box a keyboard user needs to reach. It doesn't make a `<div>` act like a button: use a `<button>` for that.
- `tabindex="-1"` (read "minus one") lets a link or a script move focus there, while Tab passes it by. It's how a page moves focus to a new message, such as the one above, so a keyboard user lands right on it.
- A **positive** `tabindex`, such as `tabindex="1"`, makes that element jump the line: it's focused before everything else on the page, whatever its place. Someone added `tabindex="1"` to the Starlight Cinema's email box so it would come "first", and now every keyboard user lands in the newsletter form before they can reach the menu. Never use a positive number.

## A skip link to the main content

Every Starlight Cinema page starts with the logo and three menu links. A keyboard user presses Tab four times on every page before reaching the movies. On a site with a big menu, that can be 30 presses. A **skip link** is a link, first thing in the `<body>`, that jumps straight to the main content.

It's a fragment link, the kind from *Links Within a Page, Email and Phone Links*, put to work: `#` (read "hash") followed by the `id` of the place to jump to.

```html
<body>
  <a class="skip-link" href="#main">Skip to main content</a>
  <header>
    <!-- the logo and the menu -->
  </header>
  <main id="main">
    <h1>Now Showing at Starlight Cinema</h1>
  </main>
</body>
```

Press Tab once and the skip link gets focus; press Enter and the page jumps to `<main>`, so the next Tab lands on the first "Buy tickets". Many sites hide the skip link with CSS until it has focus, so mouse users never see it and keyboard users always do. Go to a big news or government site and press Tab once: you'll often find one.

## Never remove the focus ring

Browsers draw a ring around whatever has focus. Some designers find it ugly and remove it with one line of CSS:

```css
/* Never do this: it takes away the only sign of where focus is. */
:focus {
  outline: none;
}
```

For a keyboard user, that's like a TV remote with no highlight: they press Tab and have no idea where they are. If the ring doesn't suit the design, style a better one instead of removing it. (The CSS in Depth course covers styling focus, if you want to go further.)

## Check yourself

2 questions to try on the lesson page.

## So what

A page that works with the keyboard works for switch users, many screen-reader users and anyone without a mouse, and you get most of it by choosing real links, buttons and form fields and writing them in reading order.

## Key terms

- [Focusable area](https://www.ask-codey.com/glossary/focusable-area)
- [Sequential focus navigation](https://www.ask-codey.com/glossary/sequential-focus-navigation)
- [tabindex](https://www.ask-codey.com/glossary/tabindex)
- Skip link

Source: https://www.ask-codey.com/lessons/html-accessibility-keyboard-and-focus