التنقّل بلوحة المفاتيح وإدارة التركيز
تأكّد من إمكانية الوصول إلى جميع العناصر التفاعلية باستخدام Tab، وأدِر التركيز برمجيًا في مربعات الحوار والتوجيه، وأنشئ مؤشرات تركيز واضحة.
التنقّل بلوحة المفاتيح وإدارة التركيز درس مجاني في Frontend Academy على CoddyKit. هذا هو الدرس 4 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Frontend Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Frontend Academy 4 دروس في المجموع.
لماذا يهم التنقّل باستخدام لوحة المفاتيح؟
لا يستطيع كثير من المستخدمين استخدام الفأرة، ومنهم ذوو الإعاقات الحركية ومستخدمو قارئات الشاشة والمستخدمون المحترفون الذين يفضّلون لوحة المفاتيح. إذا كان تطبيقك لا يتيح التنقّل باستخدام لوحة المفاتيح، فهو معطّل بالنسبة إليهم.
Tab وShift+Tab
ينقل Tab التركيز إلى العنصر التفاعلي التالي. وينقله Shift+Tab إلى العنصر السابق. يتبع الترتيب ترتيب DOM افتراضيًا — لا تحاول تغييره؛ دع DOM يحدّد ترتيب التنقّل بمفتاح Tab.
ما العناصر القابلة للتركيز افتراضيًا؟
العناصر التفاعلية الأصلية قابلة للتركيز: a[href] وbutton وinput وselect وtextarea وsummary. أما العناصر المخصّصة فتحتاج إلى tabindex.
قيم tabindex
tabindex="0": يُدرج العنصر في ترتيب Tab عند موضعه في DOM. tabindex="-1": يمكن التركيز عليه باستخدام JS فقط (تركيز برمجي، وليس عبر Tab). tabindex=">0": نمط مضاد — ينشئ ترتيب تركيز مربكًا، فلا تستخدمه أبدًا.
<!-- Custom button (still: use real <button>!): -->
<div role="button" tabindex="0" onkeydown="...">Custom</div>
<!-- Programmatically focusable, skipped by Tab: -->
<div tabindex="-1" id="error-summary"></div>مؤشر التركيز الظاهر
لا تزل مخططات التركيز أبدًا من دون توفير بديل لها. يتطلب WCAG وجود مؤشر ظاهر على كل عنصر قابل للتركيز.
/* BAD: hides focus for everyone */
*:focus { outline: none; }
/* GOOD: only show focus from keyboard (not mouse click) */
:focus-visible {
outline: 2px solid #2563eb;
outline-offset: 2px;
}:focus-visible
تعمل الفئة الزائفة :focus-visible فقط عندما يأتي التركيز من لوحة المفاتيح، وليس من نقرة بالفأرة. وتتيح لك الحفاظ على أنماط الفأرة النظيفة مع إظهار تركيز لوحة المفاتيح.
رابط الانتقال إلى المحتوى
ينبغي أن يكون أول عنصر قابل للتركيز رابطَ تخطٍّ، حتى يتمكن مستخدمو لوحة المفاتيح من تجاوز ترويسة التنقّل والانتقال مباشرةً إلى المحتوى الرئيسي.
<a href="#main" class="skip-link">Skip to main content</a>
...
<main id="main" tabindex="-1">...</main>
/* CSS */
.skip-link {
position: absolute; left: -10000px;
}
.skip-link:focus {
left: 1rem; top: 1rem;
background: white; padding: 0.5rem 1rem;
}احتجاز التركيز في النوافذ المنبثقة
عند فتح نافذة منبثقة، ينبغي احتجاز التركيز داخلها — فالانتقال باستخدام Tab من العنصر الأخير يعيد التركيز إلى العنصر الأول، والانتقال باستخدام Shift+Tab من العنصر الأول يعيده إلى العنصر الأخير. يؤدي الضغط على Escape إلى إغلاق النافذة المنبثقة.
// On modal open:
modal.querySelector('h2').focus(); // move focus into modal
lastFocused = document.activeElement;
// On Tab in modal: detect leaving and wrap to first focusable.
// On Escape: close modal and restore focus:
lastFocused.focus();استخدم عنصر dialog
يتولى عنصر HTML الأصلي <dialog> تلقائيًا احتجاز التركيز والإغلاق باستخدام Escape والستارة الخلفية للنافذة المنبثقة.
<dialog id="signup">
<h2>Sign up</h2>
<form method="dialog">
<input name="email" required>
<button>Submit</button>
<button value="cancel">Cancel</button>
</form>
</dialog>
<script>
document.getElementById('signup').showModal(); // opens with focus trap
</script>إدارة التركيز بعد تغيير المسار
لا تعيد تطبيقات SPA تحميل الصفحة، لذلك لا تصل إلى مستخدمي قارئات الشاشة أي إشارة تفيد بحدوث التنقّل. انقل التركيز إلى h1 أو main في الصفحة الجديدة عند تغيير المسار.
// On route change:
document.getElementById('main')?.focus();
// or focus the new h1:
newPage.querySelector('h1')?.setAttribute('tabindex', '-1');
newPage.querySelector('h1')?.focus();ينبغي أن يطابق ترتيب التركيز الترتيب المرئي
تأكد من أن ترتيب DOM يطابق التسلسل المرئي. إذا أعاد CSS ترتيب العناصر (باستخدام flex order أو موضع الشبكة أو position absolute)، فلن يطابق ترتيب Tab الترتيب المرئي — وهذا مربك للجميع.
اختبر بإبعاد الفأرة
أكثر اختبارات إمكانية الوصول فائدة هو فصل الفأرة ومحاولة استخدام تطبيقك بالكامل باستخدام Tab وShift+Tab وEnter وSpace ومفاتيح الأسهم. إذا علقت، فسيعلق مستخدموك أيضًا.
تحقق سريع
ما الفئة الزائفة في CSS التي تتيح لك تنسيق مخطط التركيز فقط عندما يأتي التركيز من لوحة المفاتيح، وليس من نقرة بالفأرة؟
مراجعة: التنقّل باستخدام لوحة المفاتيح
العناصر التفاعلية الأصلية قابلة للتركيز افتراضيًا. استخدم tabindex=0 فقط مع الأدوات المخصّصة؛ ولا تستخدم tabindex>0 أبدًا. أظهر التركيز دائمًا — واستخدم :focus-visible. أضف رابطًا للانتقال إلى المحتوى. احتجز التركيز في النوافذ المنبثقة واستعده عند الإغلاق. استخدم <dialog> الأصلي متى أمكن. انقل التركيز إلى h1 أو main عند تغيير المسار. اختبر بإبعاد الفأرة.
تعلم HTML مع معلم ذكاء اصطناعي — مجانًا
اكتب وقم بتشغيل أكوادك الفعلية في المتصفح، واحصل على مساعدة فورية من معلم ذكاء اصطناعي متاح 24/7، واستمر من حيث توقفت على الويب أو في التطبيق.
- الدورات
- 41
- الدروس
- 163
الأسئلة الشائعة
هل درس «التنقّل بلوحة المفاتيح وإدارة التركيز» مجاني؟
نعم — نص درس «التنقّل بلوحة المفاتيح وإدارة التركيز» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Frontend Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Frontend Academy 4 دروس في المجموع.
ماذا ستتعلم في «التنقّل بلوحة المفاتيح وإدارة التركيز»؟
تأكّد من إمكانية الوصول إلى جميع العناصر التفاعلية باستخدام Tab، وأدِر التركيز برمجيًا في مربعات الحوار والتوجيه، وأنشئ مؤشرات تركيز واضحة. تتمرن على Frontend Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ Frontend Academy؟
لا تُشترط خبرة سابقة. Frontend Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 4 من أصل 4.
كم من الوقت يستغرق درس «التنقّل بلوحة المفاتيح وإدارة التركيز»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس Frontend Academy هذا؟
نعم. كل درس في Frontend Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- مستويات WCAG: A وAA وAAA
- HTML الدلالي كأساس
- أدوار وسمات ARIA
- التنقّل بلوحة المفاتيح وإدارة التركيز