الرئيسية / سهولة الوصول والتنقل / تحسين التنقل باستخدام لوحة المفاتيح

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

طرق عملية لجعل موقعك سهل الملاحة باستخدام لوحة المفاتيح فقط، مع اختصارات مفيدة وتقنيات متقدمة.

6 دقائق مستوى متوسط يونيو 2026

شخص يستخدم قارئ الشاشة على جهاز كمبيوتر محمول في مقهى مريح

لماذا التنقل بلوحة المفاتيح مهم؟

الملايين من المستخدمين لا يستطيعون استخدام الفأرة. قد يكونون يعتمدون على لوحة المفاتيح بسبب إعاقة حركية، أو ببساطة يفضلون الكفاءة. عندما تصمم موقعك ليعمل بشكل مثالي مع لوحة المفاتيح، فأنت لا تستثني أحداً.

الحقيقة هي أن التنقل بلوحة المفاتيح ليس ميزة إضافية — إنه جزء من أساسيات التصميم الجيد. عندما يكون لديك تنقل منطقي وواضح، يستفيد الجميع: المستخدمون على الهاتف الذكي، والمستخدمون مع أدوات القراءة، وحتى الأشخاص العاديون الذين يريدون أن يكونوا أسرع.

                  الإحصائيات
                
                      15%
                    
                      من المستخدمين يعتمدون على لوحة المفاتيح بشكل أساسي
                    
                      40%
                    
                      يستخدمون اختصارات لوحة المفاتيح بانتظام لتوفير الوقت
                    
                      100%
                    
                      من قارئات الشاشة تعتمد على تنقل لوحة المفاتيح

الترتيب المنطقي للتركيز

عندما يضغط المستخدم على Tab، يجب أن ينتقل التركيز إلى العنصر التالي بطريقة تحكي قصة. تخيل أنك تقرأ صفحة من اليسار إلى اليمين ومن الأعلى إلى الأسفل — هكذا يجب أن يتحرك التركيز.

المشكلة الشائعة؟ عندما يكون ترتيب الـ DOM مختلفاً عن الترتيب البصري. قد يكون لديك عنصر في أسفل الكود لكن يظهر في الأعلى بسبب CSS. عندما يضغط المستخدم Tab، يقفز التركيز إلى مكان غير متوقع. محبط جداً.

الحل بسيط: تأكد من أن ترتيب العناصر في HTML يعكس الترتيب المرئي. إذا اضطررت إلى استخدام flexbox أو grid للتحكم في الترتيب البصري، تأكد من أن ترتيب DOM منطقي أيضاً.

رسم تخطيطي يوضح ترتيب التركيز من اليسار إلى اليمين عبر عناصر الواجهة

شاشة كمبيوتر تعرض موقع ويب مع مؤشرات بصرية واضحة للتركيز

مؤشرات التركيز المرئية

يجب أن تكون قادراً على رؤية أين أنت. عندما تضغط Tab على موقع ويب جيد، يجب أن ترى صندوق محيط أو لون مختلف أو شيء واضح جداً يقول “أنت هنا الآن”. لا تخفي هذا باستخدام CSS مثل outline: none بدون بديل.

المعيار يقول أن نسبة التباين يجب أن تكون 3:1 على الأقل. هذا يعني أن مؤشر التركيز يجب أن يكون واضحاً بما يكفي حتى للأشخاص ذوي الرؤية المنخفضة. لا تستخدم رمادي فاتح على خلفية بيضاء.

الممارسة الجيدة: استخدم لون زاهي مثل الأزرق أو الأخضر الفاتح مع خط عريض أو ظل قوي. تأكد من أنه يظهر على جميع أنواع الخلفيات على موقعك.

ملاحظة مهمة

المعلومات في هذا المقال مخصصة لأغراض تعليمية. يجب أن تتعاون مع متخصصي سهولة الوصول الفعليين عند تطبيق هذه المبادئ على موقعك. كل سياق مختلف، والاختبار الفعلي مع المستخدمين ضروري.

اختصارات لوحة المفاتيح المفيدة

اختصارات لوحة المفاتيح توفر الوقت. بدلاً من البحث عن زر باستخدام الفأرة، يضغط المستخدم على Ctrl+S لحفظ، أو Alt+S للبحث. على المتصفح، يمكن استخدام اختصارات قياسية معروفة.

عند إضافة اختصارات مخصصة على موقعك، كن حذراً. لا تتعارض مع الاختصارات الموجودة في المتصفح أو نظام التشغيل. علم المستخدمين عن هذه الاختصارات — ضعها في قائمة مساعدة أو في نص المساعدة.

الاختصارات الشائعة التي يتوقعها الناس:

/ أو Ctrl+K: البحث
Esc: إغلاق الحوار أو الخروج من الوضع
Enter: تفعيل الزر أو الرابط
? (علامة استفهام): إظهار قائمة الاختصارات

صورة تفصيلية لوحة مفاتيح مع إضاءة على المفاتيح المستخدمة للاختصارات الشائعة

شخص يعمل على جهاز كمبيوتر محمول في بيئة عمل حديثة مع التركيز على لوحة المفاتيح

Skip Links والقوائم المنقولة

تخيل أنك تضغط Tab على موقع ويب كبير. أولاً، تمر عبر 50 رابط في قائمة التنقل. ممل جداً. Skip links توفر طريقة للقفز مباشرة إلى المحتوى الرئيسي.

Skip link بسيط هو رابط مخفي يصبح مرئياً عند التركيز. عندما يضغط المستخدم Tab أول مرة، يرى “اذهب إلى المحتوى الرئيسي” ويمكنه الضغط على Enter. ينتقل التركيز مباشرة إلى المحتوى، متخطياً التنقل.

نصيحة: استخدم tabindex="-1" على عنصر المحتوى الرئيسي حتى يمكن للـ skip link أن ينقل التركيز إليه برمجياً.

الخلاصة

التنقل بلوحة المفاتيح ليس معقداً. الأساسيات بسيطة: ترتيب منطقي، مؤشرات واضحة، واختصارات معقولة. عندما تحصل على هذه الأشياء الثلاثة بشكل صحيح، موقعك يصبح أفضل للجميع.

ابدأ بتجربة موقعك الآن. أغلق الفأرة واستخدم Tab و Shift+Tab للتنقل. هل تعرف أين أنت؟ هل يحدث شيء غير متوقع؟ هذا يخبرك بكل ما تحتاج إلى معرفته. اختبار بسيط، نتائج قوية.

تريد تعمق أكثر في سهولة الوصول؟

استكشف جميع المقالات