การนำทางด้วยแป้นพิมพ์และลำดับโฟกัส

ใครบ้างที่ต้องใช้การนำทางด้วยแป้นพิมพ์

องค์ประกอบที่โฟกัสได้ตามธรรมชาติ

ลำดับการกด Tab

ลำดับการกด Tab ตามธรรมชาติ = ลำดับ DOM

<!-- 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 -->

ตัวบ่งชี้โฟกัสที่มองเห็นได้

/* 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 */

รูปแบบโฟกัสแบบกำหนดเอง

/* 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) */

ลำดับโฟกัสที่มีเหตุผล

<!-- 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 -->

ลิงก์ข้าม

<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

<!-- 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();
}

แป้นพิมพ์ลัด

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
});

การทดสอบการนำทางด้วยแป้นพิมพ์

ตรวจสอบอย่างรวดเร็ว

สรุป: การนำทางด้วยแป้นพิมพ์