التنقل باستخدام لوحة المفاتيح وترتيب التركيز

من يحتاج إلى التنقّل باستخدام لوحة المفاتيح؟

العناصر القابلة للتركيز طبيعيًا

ترتيب التنقّل باستخدام 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 -->
}

حصر التركيز في النوافذ المنبثقة

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

اختبار التنقّل باستخدام لوحة المفاتيح

تحقق سريع

مراجعة: التنقّل باستخدام لوحة المفاتيح