Keyboard Navigation in HTML

Not everyone uses a mouse. Some users rely entirely on keyboards — either by choice or necessity. Building a website that’s easy to navigate via keyboard means more accessible, inclusive experiences for all.

Keyboard navigation allows users to move through interactive elements (like links, buttons, and forms) using keys like Tab, Enter, Arrow keys, and Escape.

Core Keys:

• Tab — Move focus to the next interactive element
• Shift + Tab — Move focus to the previous element
• Enter — Activate a button or link
• Arrow keys — Navigate within components like menus or sliders

By default, browsers create a logical tab order based on HTML structure. Elements like <a>, <button>, <input>, and <textarea> are focusable.

<a href="#apple">Apple</a>
<button>Banana</button>
<input type="text" placeholder="Cherry">

[ Tab cycles through: Apple → Banana → Cherry input ]

tabindex is an attribute that controls the element’s focus behavior.

Example: Making a Div Focusable

<div tabindex="0">Focus me with Tab key</div>

[ User presses Tab → this div becomes focusable ]

You can move focus manually using JavaScript — helpful in modals, alerts, or custom widgets.

<button onclick="document.getElementById('msg').focus()">
  Focus on Message
</button>

<div id="msg" tabindex="-1">Hello World, focus is here!</div>

A keyboard trap occurs when focus enters a section and can't escape. This is frustrating and can block users entirely.

Good Example: Modal Focus

<div id="modal" role="dialog" aria-modal="true">
  <button>Close Modal</button>
  <button>Confirm Cherry 🍒</button>
</div>

Best Practices:

• Trap focus inside modals, but allow exiting with Escape or Close
• Restore focus to the triggering element when modal closes
• Use libraries like focus-trap or write custom handlers for complex components

Provide "Skip to main content" links to let keyboard users bypass repetitive content.

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

<main id="main-content">
  <h1>Welcome to Apple Grove</h1>
</main>

CSS Suggestion:

.skip-link {
  position: absolute;
  left: -9999px;
}
.skip-link:focus {
  left: 0;
  background: yellow;
}

Accessible keyboard navigation means a smoother experience for all users — including those with mobility challenges or screen readers. You’ve learned how to:

• Respect and use natural tab order
• Control focus using tabindex and JavaScript
• Avoid traps that hinder navigation
• Enhance UX with skip links and focus management

Choose the option that lists all and only the correct statements.

1. Ensuring all interactive elements are reachable via keyboard
2. Avoiding focus lock inside modal dialogs
3. Using JavaScript to disable keyboard navigation
4. Providing a clear way to exit any focused element

Choose the option that lists all and only the correct statements.

Next up: We’ll build a fully accessible modal dialog that supports keyboard navigation, screen readers, and ARIA roles — from scratch.