Keyboard navigation basics in HTML - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

Understanding Tabindex Attribute

Which of the following tabindex values makes an element focusable in the natural tab order of the page?

A tabindex="0"

B tabindex="-1"

C tabindex="5"

D tabindex="-5"

💡 Hint

Remember that tabindex="0" places the element in the natural tab order.

The tabindex="0" value makes an element focusable and places it in the natural tab order based on the document flow. Negative values like -1 make elements focusable only programmatically, and positive values like 5 change the tab order but are discouraged for accessibility.

📝 Syntax

intermediate

Correct Keyboard Event Attribute

Which HTML attribute correctly listens for a keyboard event when a user presses a key on an input element?

HTML

<input type="text" ____ >

A onkeydown="handleKeyDown()"

B onkeypress="handleKeyPress()"

C onkeyup="handleKeyUp()"

D onkeypressed="handleKeyPressed()"

💡 Hint

The event that fires when a key is first pressed down is the one to use.

The onkeydown event triggers when a key is first pressed down. onkeypress is deprecated and inconsistent. onkeyup triggers when the key is released. onkeypressed is not a valid event.

❓ rendering

advanced

Visual Focus Indicator

Given the CSS below, what visual effect will a focused button have when navigated to by keyboard?

HTML

button:focus {
  outline: 3px solid #005fcc;
  outline-offset: 2px;
  background-color: #e0f0ff;
}

A The button will have no visible change when focused.

B The button will have a thin red border inside its edges and a dark blue background.

C The button will have a thick blue border outside its edges and a light blue background.

D The button will have a dotted black border and a yellow background.

💡 Hint

Look at the outline color and offset values.

The outline property creates a 3px solid blue line outside the button edges because of outline-offset: 2px. The background changes to a light blue color #e0f0ff. This helps keyboard users see which button is focused.

❓ selector

advanced

CSS Selector for Focused Interactive Elements

Which CSS selector correctly targets all interactive elements that are currently focused for keyboard navigation styling?

A :active

B :focus

C :focusable

D :hover

💡 Hint

This selector matches elements that have keyboard or mouse focus.

The :focus pseudo-class matches elements that are currently focused, including by keyboard navigation. :active matches elements being clicked. :hover matches elements under the mouse pointer. :focusable is not a valid CSS selector.

❓ accessibility

expert

ARIA Role for Keyboard Navigable Menu

Which ARIA role should you assign to a

element to indicate it is a keyboard navigable menu for screen readers?

HTML

<nav role="____">
  <!-- menu items -->
</nav>

A navigation

B list

C application

D menu

💡 Hint

This role explicitly tells assistive tech that the element is a menu with keyboard navigation.

The menu role indicates a list of menu items that can be navigated by keyboard. The navigation role is more general for site navigation landmarks. list is for simple lists. application is for complex web apps.