Bird
Raised Fist0
HTMLmarkup~5 mins

Keyboard navigation basics in HTML

Choose your learning style10 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

Practice

(1/5)
1. What is the main purpose of keyboard navigation on a webpage?
easy

Solution

  1. Step 1: Understand keyboard navigation concept

    Keyboard navigation means using keys like Tab to move focus between elements without a mouse.

  2. Step 2: Identify the purpose

    This helps users who cannot or prefer not to use a mouse to access all parts of a webpage.

  3. Final Answer:

    To allow users to move through the page using only the keyboard -> Option A

  4. Quick Check:

    Keyboard navigation = move with keyboard only [OK]
Hint: Keyboard navigation means moving focus without a mouse [OK]
Common Mistakes:
  • Confusing keyboard navigation with mouse actions
  • Thinking it changes page colors
  • Assuming it speeds up loading
2. Which HTML attribute is used to control the order of keyboard focus on elements?
easy

Solution

  1. Step 1: Recall HTML attributes related to focus

    The tabindex attribute sets the order in which elements receive keyboard focus.

  2. Step 2: Eliminate unrelated attributes

    onclick is for mouse clicks, alt is for images, href is for links.

  3. Final Answer:

    tabindex -> Option D

  4. Quick Check:

    Focus order attribute = tabindex [OK]
Hint: Use tabindex to set keyboard focus order [OK]
Common Mistakes:
  • Choosing onclick instead of tabindex
  • Confusing alt with focus control
  • Thinking href controls keyboard navigation
3. Consider this HTML snippet:
<button>Save</button>
<div tabindex="0">Info</div>
<a href="#">Link</a>

When pressing Tab repeatedly, which element will receive focus second?
medium

Solution

  1. Step 1: Understand default tab order

    By default, focus moves to interactive elements like buttons and links in source order.

  2. Step 2: Consider tabindex="0" effect

    Adding tabindex="0" makes the <div> focusable and places it in the natural tab order after the button.

  3. Final Answer:

    The <div> with tabindex="0" -> Option A

  4. Quick Check:

    tabindex="0" adds element to tab order [OK]
Hint: tabindex="0" makes non-focusable elements focusable [OK]
Common Mistakes:
  • Assuming div cannot get focus
  • Thinking link comes second instead of div
  • Ignoring tabindex effect
4. This HTML code is intended to make a <div> focusable for keyboard users:
<div tabindex="-1">Menu</div>

Why might this cause a problem for keyboard navigation?
medium

Solution

  1. Step 1: Understand tabindex="-1" meaning

    tabindex="-1" makes an element focusable only by script, not by keyboard Tab key.

  2. Step 2: Identify keyboard navigation impact

    Because it is skipped in tab order, keyboard users cannot reach it by pressing Tab.

  3. Final Answer:

    tabindex='-1' removes the element from tab order, so it can't be reached by Tab key -> Option B

  4. Quick Check:

    tabindex="-1" excludes element from Tab focus [OK]
Hint: tabindex="-1" excludes element from keyboard tab focus [OK]
Common Mistakes:
  • Thinking tabindex="-1" causes syntax error
  • Believing it makes element invisible
  • Assuming it makes element focusable twice
5. You want to create a custom interactive widget using a <div> that keyboard users can access in a logical order after a button and a link. Which is the best way to ensure correct keyboard navigation?
hard

Solution

  1. Step 1: Understand tabindex values and order

    tabindex="0" places element in natural tab order based on HTML position; positive tabindex values change order but can confuse users.

  2. Step 2: Choose best practice for accessibility

    Using tabindex="0" and placing the <div> after button and link in HTML ensures logical, predictable keyboard navigation.

  3. Final Answer:

    Add tabindex="0" to the <div> and place it after the button and link in HTML -> Option C

  4. Quick Check:

    tabindex="0" + correct HTML order = best keyboard navigation [OK]
Hint: Use tabindex="0" and HTML order for logical tab sequence [OK]
Common Mistakes:
  • Using positive tabindex values which confuse tab order
  • Using tabindex="-1" which skips element
  • Assuming div is never focusable without tabindex