تفاعلات لوحة المفاتيح وروابط التخطي
ادعم المستخدمين الذين يفضّلون لوحة المفاتيح: أزرار/روابط أصلية، وترتيب تنقّل منطقي، وأنماط مفاتيح الأسهم، ورابط تخطٍّ مرئي إلى المحتوى الرئيسي.
تفاعلات لوحة المفاتيح وروابط التخطي درس مجاني في React Academy على CoddyKit. هذا هو الدرس 2 من أصل 3. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في React Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة React Academy 3 دروس في المجموع.
لماذا دعم لوحة المفاتيح
الهدف: جعل التطبيق قابلًا للاستخدام بالكامل باستخدام لوحة المفاتيح.
- فضّل button وa الأصليين
- حافظ على ترتيب منطقي لزر Tab
- وفّر رابط تخطٍّ
فضّل عناصر التحكم الأصلية
- استخدم button للنقر (يعمل Space وEnter افتراضيًا)
- استخدم a href للانتقال (Enter)
- تجنّب div القابلة للنقر؛ وإذا لزم الأمر، فأضف role وtabindex ومعالجات المفاتيح
عرض تجريبي: الزر الحقيقي أفضل من div
توفر الأزرار الأصلية التركيز ومفاتيح لوحة المفاتيح والدلالات تلقائيًا.
<div id="root"></div>
عرض تجريبي: مفاتيح الأسهم (roving tabindex)
وفّر التنقل بمفاتيح الأسهم داخل عناصر الواجهة المركّبة (قائمة بسيطة تستخدم roving tabindex).
<div id="root"></div>
عرض تجريبي: التخطي إلى المحتوى
أضف رابط تخطٍّ يحصل على التركيز أولًا وينتقل إلى محتوى main.
<div id="root"></div>
قائمة تحقق ونصائح
- ضع رابط التخطي أولًا في DOM؛ واجعله ظاهرًا عند التركيز
- تأكّد من إمكانية حصول المنطقة الرئيسية على التركيز (tabIndex=-1)
- حافظ على منطقية ترتيب Tab؛ وتجنّب tabindex الأكبر من 0
اختبار الغرض من رابط التخطي
خلاصة
خلاصة: فضّل عناصر التحكم الأصلية، وادعم مفاتيح الأسهم في عناصر الواجهة المركّبة، وأضف رابط تخطٍّ يظهر عند التركيز للوصول سريعًا إلى المحتوى الرئيسي.
الأسئلة الشائعة
هل درس «تفاعلات لوحة المفاتيح وروابط التخطي» مجاني؟
نعم — نص درس «تفاعلات لوحة المفاتيح وروابط التخطي» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة React Academy، انتقل إلى CoddyKit PRO. تتضمن دورة React Academy 3 دروس في المجموع.
ماذا ستتعلم في «تفاعلات لوحة المفاتيح وروابط التخطي»؟
ادعم المستخدمين الذين يفضّلون لوحة المفاتيح: أزرار/روابط أصلية، وترتيب تنقّل منطقي، وأنماط مفاتيح الأسهم، ورابط تخطٍّ مرئي إلى المحتوى الرئيسي. تتمرن على React Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ React Academy؟
لا تُشترط خبرة سابقة. React Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 2 من أصل 3.
كم من الوقت يستغرق درس «تفاعلات لوحة المفاتيح وروابط التخطي»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس React Academy هذا؟
نعم. كل درس في React Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- الدلالات والتسميات والأدوار والتركيز
- تفاعلات لوحة المفاتيح وروابط التخطي
- أساسيات اختبار إمكانية الوصول