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.