Keyboard Navigation and Focus States

Prerequisites

Before you start:

Learners should understand:

• semantic HTML
• links and buttons
• basic CSS pseudo-classes
• simple navigation markup

Core explanation

Keyboard users move through interactive elements using focus.

Common keyboard interactions:

• Tab: move to the next focusable element
• Shift + Tab: move to the previous focusable element
• Enter: activate links and buttons
• Space: activate buttons and checkboxes
• arrow keys: move within some controls such as radio groups or menus

Focusable elements include:

• links with href
• buttons
• form controls
• summary elements
• elements with appropriate tabindex, used carefully

A page should have a logical focus order that follows the visual and document structure.

Visible focus

When an element receives keyboard focus, users need to see where they are.

Do not remove outlines unless you replace them with a clear alternative.

Bad:

*:focus {
  outline: none;
}

Better:

:focus-visible {
  outline: 3px solid #facc15;
  outline-offset: 3px;
}

You can style focus to match a brand, as long as it remains obvious.

Skip links

A skip link lets keyboard users bypass repeated navigation and jump to the main content.

<a class="skip-link" href="#main-content">Skip to main content</a>

<header>
  <!-- repeated navigation -->
</header>

<main id="main-content">
  <h1>Keyboard Navigation and Focus States</h1>
</main>

.skip-link {
  position: absolute;
  left: 1rem;
  top: 1rem;
  transform: translateY(-150%);
  background: #ffffff;
  color: #111111;
  padding: 0.75rem 1rem;
  border: 2px solid currentColor;
  z-index: 100;
}

.skip-link:focus {
  transform: translateY(0);
}

The link is visually hidden until focused. When keyboard users press Tab, it appears.

Starter code

<header class="site-header">
  <div class="logo">Coastal Studio</div>

  <div class="nav">
    <span>Home</span>
    <span>Services</span>
    <span>Contact</span>
  </div>
</header>

<main>
  <section class="hero">
    <h1>Design support for small businesses</h1>
    <div class="cta" onclick="location.href='/contact.html'">
      Book a consult
    </div>
  </section>
</main>

.nav span,
.cta {
  cursor: pointer;
}

.cta {
  display: inline-block;
  padding: 0.75rem 1rem;
  background: #222;
  color: white;
}

a:focus,
button:focus {
  outline: none;
}

Improved code

<a class="skip-link" href="#main-content">Skip to main content</a>

<header class="site-header">
  <a class="logo" href="/">Coastal Studio</a>

  <nav aria-label="Main navigation">
    <ul class="nav-list">
      <li><a href="/">Home</a></li>
      <li><a href="/services.html">Services</a></li>
      <li><a href="/contact.html">Contact</a></li>
    </ul>
  </nav>
</header>

<main id="main-content">
  <section class="hero">
    <h1>Design support for small businesses</h1>
    <a class="button" href="/contact.html">Book a consult</a>
  </section>
</main>

.skip-link {
  position: absolute;
  left: 1rem;
  top: 1rem;
  transform: translateY(-150%);
  background: #ffffff;
  color: #111111;
  padding: 0.75rem 1rem;
  border: 2px solid currentColor;
  z-index: 100;
}

.skip-link:focus {
  transform: translateY(0);
}

.nav-list {
  display: flex;
  gap: 1rem;
  list-style: none;
  padding: 0;
}

.button {
  display: inline-block;
  padding: 0.75rem 1rem;
  background: #222;
  color: #ffffff;
  text-decoration: none;
  border-radius: 0.4rem;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 3px solid #facc15;
  outline-offset: 3px;
}

How and why this improves the page

• Navigation items are real links.
• The call-to-action is a real link.
• Keyboard users can tab through the interface.
• Focus is visible.
• The skip link gives users a shortcut to main content.
• The focus order follows the document structure.
• No JavaScript is needed for basic navigation.

Keyboard testing checklist

Ask learners to test:

1. Can I see where focus is?
2. Does focus move in a logical order?
3. Can I reach every link, button, and form field?
4. Can I activate links with Enter?
5. Can I activate buttons with Enter or Space?
6. Can I skip repeated navigation?
7. Does anything trap focus?
8. Does focus disappear behind overlays or hidden elements?
9. Does the page work without a mouse?

About tabindex

Use tabindex carefully.

<div tabindex="0">Focusable content</div>

This makes an element focusable, although it does not give it button or link behaviour.

Avoid positive tabindex values:

<div tabindex="5">Avoid this</div>

Positive values create a custom focus order that can become confusing and hard to maintain.

General guidance:

• Prefer native interactive elements.
• Use tabindex="0" sparingly.
• Use tabindex="-1" when you need to move focus programmatically.
• Avoid tabindex as a patch for poor HTML structure.