Keyboard navigation basics in HTML - Performance & Optimization

Performance: Keyboard navigation basics

MEDIUM IMPACT

This affects user interaction responsiveness and accessibility, impacting how quickly users can navigate and interact with page elements using the keyboard.

Making interactive elements accessible and navigable by keyboard

HTML

<button onclick="doSomething()">Click me</button>

Uses semantic button element which is focusable and operable by keyboard by default.

📈 Performance GainImproves INP by enabling instant keyboard interaction without extra scripting.

Making interactive elements accessible and navigable by keyboard

HTML

<div onclick="doSomething()">Click me</div>

Non-semantic element without keyboard focus or keyboard event handlers, so keyboard users cannot interact.

📉 Performance CostBlocks keyboard users, increasing interaction time and causing poor INP.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Non-semantic clickable div without keyboard support	Low	0	Low	[X] Bad
Semantic button element with native keyboard support	Low	0	Low	[OK] Good
Using tabindex="-1" to remove focusable elements	Low	0	Low	[X] Bad
Natural DOM order with no tabindex manipulation	Low	0	Low	[OK] Good

Rendering Pipeline

Keyboard navigation affects the browser's event handling and focus management stages, influencing how quickly user input is processed and reflected visually.

→Event Handling

→Composite

⚠️ BottleneckEvent Handling when non-semantic elements require extra scripting for keyboard support

Core Web Vital Affected

INP

This affects user interaction responsiveness and accessibility, impacting how quickly users can navigate and interact with page elements using the keyboard.

Optimization Tips

1Use semantic HTML elements like <button> for interactive controls.

2Avoid removing elements from keyboard focus order unless necessary.

3Keep DOM order logical to ensure predictable keyboard navigation.

Performance Quiz - 3 Questions

Which HTML element is best for keyboard accessible clickable items?

A <div>

B <button>

C <span>

D <section>

DevTools: Elements and Performance

How to check: Use Elements panel to inspect focusable elements and their tabindex attributes. Use Performance panel to record keyboard interaction and check event handling delays.

What to look for: Ensure interactive elements are focusable and keyboard events are handled quickly without delays.