HTML Academy · Lesson

Keyboard Navigation and Focus Order

Ensure all functionality is reachable and logical via keyboard.

Keyboard Navigation and Focus Order is a free HTML Academy lesson on CoddyKit — lesson 4 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the HTML Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

Who Needs Keyboard Navigation?

Many users rely on keyboard navigation:

Motor disabilities — cannot use a mouse
Power users — prefer keyboard shortcuts
Screen reader users — navigate entirely by keyboard
Switch access users — use buttons that simulate key presses

Naturally Focusable Elements

These HTML elements are keyboard-focusable by default:

<a href> — Tab moves to it, Enter activates it
<button> — Tab moves to it, Enter/Space activates it
<input>, <textarea>, <select> — Tab moves to them
<details> / <summary> — Tab + Enter

Tab Order

The browser determines tab order by:

DOM order by default — elements tab in the order they appear in HTML
Positive tabindex values — those elements tab first in ascending order
tabindex="0" — added to the natural tab order at its DOM position
tabindex="-1" — not in tab order; only focusable via script

Natural Tab Order = DOM Order

The reading order of your HTML should match the visual layout:

<!-- GOOD: DOM order matches visual left-to-right, top-to-bottom: -->
<header>...</header>
<nav>...</nav>
<main>...</main>
<aside>...</aside>
<footer>...</footer>

<!-- BAD: visually reordered with CSS, DOM order broken:
     CSS flexbox order: doesn't affect tab order!
     Screen readers and keyboard users follow DOM order, not CSS order -->

Focus Visible Indicator

WCAG 2.4.7 (Level AA): keyboard focus must be visible:

/* NEVER do this: */
* { outline: none; }           /* removes all focus outlines */

/* GOOD: styled focus indicator: */
:focus-visible {
  outline: 2px solid #0070f3;
  outline-offset: 3px;
  border-radius: 4px;
}

/* :focus-visible shows outline for keyboard only
   mouse clicks don't trigger :focus-visible -->
/* But outline: none with :focus (not :focus-visible) hides for both */

Custom Focus Styles

Design system focus styles:

/* Replace outline with box-shadow for rounded elements: */
button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 112, 243, 0.4);
}

/* Always ensure 3:1 contrast ratio between
   focus indicator and background (WCAG 2.4.11 Level AA) */

Logical Focus Order

Focus order should be logical and predictable — WCAG 2.4.3 (Level A):

<!-- BAD: focus order jumps around the page -->
<!-- First: footer link (tabindex=5) -->
<!-- Then: sidebar (tabindex=3) -->
<!-- Then: header nav (tabindex=1) -->

<!-- GOOD: natural DOM order matches reading flow: -->
<!-- Header → Nav → Main Content → Sidebar → Footer -->

Skip Links

Skip links let keyboard users bypass repetitive navigation:

<a href="#main-content" class="skip-link">Skip to main content</a>

<!-- Visually hidden until focused: -->
.skip-link {
  position: absolute;
  top: -100%;
  left: 0;
  background: #0070f3;
  color: white;
  padding: 0.75rem;
  z-index: 9999;
}
.skip-link:focus {
  top: 0;  /* visible when focused -->
}

Modal Focus Trap

Modals must trap focus while open:

<!-- When modal opens:
1. Move focus to modal container or first interactive element
2. Tab stays within modal
3. When modal closes, return focus to the trigger button
-->

const modal = document.getElementById('modal');
const trigger = document.getElementById('open-modal');

function openModal() {
  modal.removeAttribute('hidden');
  modal.querySelector('button, [tabindex="0"]').focus();
}

function closeModal() {
  modal.setAttribute('hidden', '');
  trigger.focus();
}

Keyboard Shortcuts

Implement keyboard shortcuts with event listeners:

document.addEventListener('keydown', (e) => {
  // Close modal on Escape:
  if (e.key === 'Escape') closeModal();

  // Navigate tabs with arrow keys:
  if (e.key === 'ArrowRight') focusNextTab();
  if (e.key === 'ArrowLeft') focusPrevTab();

  // Submit form on Enter (default behavior in inputs):
  // Nothing needed — browser handles this
});

Testing Keyboard Navigation

How to test keyboard accessibility:

Put your mouse away and only use keyboard
Press Tab — can you reach every interactive element?
Is the focus indicator always visible?
Does the tab order make logical sense?
Can you use all features (forms, modals, dropdowns) without a mouse?
Press Shift+Tab to navigate backwards

Quick Check

What CSS property should you never remove from all elements for keyboard accessibility?

Recap: Keyboard Navigation

Keyboard accessibility essentials:

All interactive elements must be Tab-reachable
DOM order = tab order — match visual layout
Never remove focus outlines — use :focus-visible for custom styles
Skip links allow bypassing repetitive navigation
Focus trap in modals; return focus on close
Test by using your site with only the keyboard

Frequently asked questions

Is the “Keyboard Navigation and Focus Order” lesson free?

Yes — the full text of “Keyboard Navigation and Focus Order” is free to read here on the web, and the HTML Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the HTML Academy course, upgrade to CoddyKit PRO.

What will I learn in “Keyboard Navigation and Focus Order”?

Ensure all functionality is reachable and logical via keyboard. You practise HTML Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start HTML Academy?

No prior experience is required. HTML Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 4 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Keyboard Navigation and Focus Order” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this HTML Academy lesson?

Yes. Every HTML Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

← Back to HTML Academy