Keyboard navigation basics in HTML - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to make the button focusable by keyboard.

HTML

<button [1]>Click me</button>

Drag options to blanks, or click blank then click option'

Atabindex="0"

Bdisabled

Chidden

Daria-hidden="true"

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'disabled' makes the button unfocusable.

Using 'hidden' or 'aria-hidden' hides the element from keyboard and screen readers.

Adding tabindex="0" makes the button focusable using keyboard navigation.

2fill in blank

medium

Complete the code to add a keyboard shortcut to the link using the accesskey attribute.

HTML

<a href="#" [1]>Home</a>

Drag options to blanks, or click blank then click option'

Aaccesskey="h"

Btabindex="-1"

Caria-label="home link"

Drole="button"

Attempts:

3 left

💡 Hint

Common Mistakes

Using tabindex="-1" removes the element from keyboard focus.

Using aria-label only changes screen reader text, not keyboard shortcuts.

The accesskey attribute assigns a keyboard shortcut to the link.

3fill in blank

hard

Fix the error in the code to make the div focusable by keyboard.

HTML

<div [1]>Focusable div</div>

Drag options to blanks, or click blank then click option'

Ahidden

Btabindex="-1"

Ctabindex="0"

Ddisabled

Attempts:

3 left

💡 Hint

Common Mistakes

Using tabindex="-1" makes the element focusable only by script, not keyboard.

Using disabled or hidden hides or disables the element.

Setting tabindex="0" makes the div focusable in the natural tab order.

4fill in blank

hard

Fill both blanks to make the input accessible and focusable with a label.

HTML

<label for="nameInput">Name:</label>
<input id="nameInput" [1] [2]>

Drag options to blanks, or click blank then click option'

Atype="text"

Btabindex="0"

Caria-label="Name input"

Ddisabled

Attempts:

3 left

💡 Hint

Common Mistakes

Using disabled makes input unfocusable.

Using aria-label alone does not make input focusable.

The input needs type="text" to be a text field and tabindex="0" to be keyboard focusable.

5fill in blank

hard

Fill all three blanks to create a keyboard-navigable form with accessible labels.

HTML

<form>
  <label [1]="emailInput">Email:</label>
  <input id="emailInput" [2] [3]>
</form>

Drag options to blanks, or click blank then click option'

Afor

Btype="email"

Ctabindex="0"

Daria-hidden="true"

Attempts:

3 left

💡 Hint

Common Mistakes

Using aria-hidden="true" hides the input from keyboard and screen readers.

Omitting for breaks label-input association.

The label uses for to link to the input. The input has type="email" for email input and tabindex="0" to be keyboard focusable.

Practice

1. What is the main purpose of keyboard navigation on a webpage?

easy

A. To allow users to move through the page using only the keyboard

B. To enable mouse clicks on buttons

C. To change the page colors automatically

D. To load images faster

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

A. onclick

B. alt

C. href

D. tabindex

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

A. The <div> with tabindex="0"

B. The <button> element

C. The <a> link element

D. No element will receive focus second

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

A. tabindex='-1' makes the element invisible

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

C. tabindex='-1' causes a syntax error in HTML

D. tabindex='-1' makes the element focusable twice

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

A. Add tabindex="-1" to the <div> so it is skipped by keyboard

B. Add tabindex="1" to the <div> to place it first in tab order

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

D. Do not add tabindex; keyboard users cannot access <div> anyway

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