0
0
HTMLmarkup~5 mins

Keyboard navigation basics in HTML

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Introduction

Keyboard navigation helps people use websites without a mouse. It makes websites easier and fairer for everyone.

When you want users to move through your site using only the keyboard.
When building forms so users can jump from one field to the next with the Tab key.
When creating menus that open and close with keyboard keys.
When improving accessibility for people who cannot use a mouse.
When testing your site to make sure it works well for all users.
Syntax
HTML
Use tabindex attribute to control focus order.
Use semantic HTML elements like <button>, <a>, <input> for automatic keyboard support.
Use ARIA roles and properties for custom widgets.
Use JavaScript to handle keyboard events like keydown or keyup.
tabindex controls if an element can be focused and its order.
Native HTML elements like
Sample Program

This page shows different elements you can focus using the keyboard Tab key. Buttons, links, and inputs are focusable by default. The div becomes focusable because it has tabindex="0".

HTML
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Keyboard Navigation Example</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      padding: 2rem;
    }
    button, a, input {
      display: block;
      margin: 1rem 0;
      padding: 0.5rem 1rem;
      font-size: 1rem;
    }
    a {
      color: blue;
      text-decoration: underline;
    }
  </style>
</head>
<body>
  <h1>Keyboard Navigation Basics</h1>
  <p>Use Tab key to move focus through these elements:</p>
  <button>Button 1</button>
  <a href="#">Link 1</a>
  <input type="text" placeholder="Type here">
  <div tabindex="0" style="border: 1px solid #ccc; padding: 0.5rem; width: max-content;">Focusable Div</div>
</body>
</html>
OutputSuccess