Keyboard navigation basics in HTML - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is keyboard navigation in web development?

Keyboard navigation allows users to move through a webpage using only the keyboard, typically with keys like Tab, Shift+Tab, Enter, and arrow keys.

beginner

Which key is commonly used to move focus to the next interactive element on a webpage?

The Tab key moves the keyboard focus to the next interactive element, such as links, buttons, and form fields.

intermediate

What attribute helps control the order of keyboard focus on elements?

The tabindex attribute controls the order in which elements receive keyboard focus. Positive values set custom order, 0 follows natural order, and -1 removes from tab order.

beginner

Why is keyboard navigation important for accessibility?

Keyboard navigation is essential for users who cannot use a mouse, such as people with motor disabilities or those who rely on screen readers. It ensures everyone can access and use the website.

intermediate

How can you make a non-interactive element focusable by keyboard?

Add tabindex="0" to the element. This includes it in the natural tab order so users can reach it with the keyboard.

Which key moves focus backward to the previous interactive element?

A Tab

B Space

C Enter

D Shift + Tab

Holding Shift while pressing Tab moves the focus backward to the previous interactive element.

What does tabindex="-1" do to an element?

A Makes it focusable in tab order

B Removes it from keyboard tab order but allows focus programmatically

C Sets it as the first element to focus

D Disables the element

tabindex="-1" removes the element from the tab order but it can still be focused using scripts.

Which HTML elements are naturally focusable by keyboard by default?

A <div> and <span>

B <header> and <footer>

C <button> and <a href>

D <p> and <section>

Buttons and links with href attributes are naturally focusable by keyboard.

Why should you avoid using positive tabindex values to reorder focus?

A It can confuse keyboard users and cause inconsistent navigation

B It disables keyboard navigation

C It improves accessibility

D It makes elements invisible

Using positive tabindex values can create confusing and unpredictable keyboard navigation order.

Which key typically activates a focused button or link?

A Enter

B Escape

C Tab

D Arrow keys

Pressing Enter activates the focused button or link.

Explain how keyboard navigation works on a webpage and why it is important.

Think about how you move through links and buttons without a mouse.

Describe how the tabindex attribute affects keyboard navigation and give examples of its values.

Consider how you can control which elements get keyboard focus and in what order.