روابط التنقل والحالات النشطة
أنشئ تنقلًا بحالات نشطة واضحة باستخدام className وaria-current؛ وحافظ على سهولة الوصول إلى الروابط وملاءمتها للشاشات الصغيرة.
روابط التنقل والحالات النشطة درس مجاني في React Academy على CoddyKit. هذا هو الدرس 3 من أصل 3. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في React Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة React Academy 3 دروس في المجموع.
لماذا تهم الحالات النشطة
الهدف: إنشاء شريط تنقل صغير وتوضيح المسار النشط بوضوح للمستخدمين ولقارئات الشاشة.
- تنسيق الحالة النشطة
- aria-current
- تخطيط ملائم للشاشات الصغيرة
منطق الحالة النشطة وإمكانية الوصول
احسب حالة نشاط الرابط بمقارنة المسار الحالي. أضف تنسيقًا مرئيًا واضحًا وعيّن aria-current="page" للرابط النشط.
مثال: شريط التنقل النشط
ننفّذ موجّه hash صغيرًا ومكوّن Nav ينسّق الرابط النشط ويعيّن aria-current.
<div id="root"></div>
نصائح لإمكانية الوصول
نصائح لإمكانية الوصول:
- استخدم روابط <a> حقيقية للتنقل.
- عيّن aria-current="page" للرابط النشط.
- حافظ على ظهور التركيز بعد التنقل.
الوضوح المرئي
اجعل الحالات النشطة واضحة باستخدام اللون والتباين؛ وحافظ على كِبَر أهداف اللمس (بحد أدنى 40px) وعلى وجود مسافات واسعة للشاشات الصغيرة.
الأخطاء الشائعة
تجنّب ما يلي:
- الاكتفاء بتنسيقات hover — لن يراها مستخدمو اللمس.
- نسيان aria-current في الروابط النشطة.
- الاعتماد على URL فقط دون تحديث واجهة المستخدم.
أفضل ممارسة للحالة النشطة
مراجعة
مراجعة: احسب الروابط النشطة من المسار الحالي، ونسّقها بوضوح، وعيّن aria-current="page" لمساعدة قارئات الشاشة.
الأسئلة الشائعة
هل درس «روابط التنقل والحالات النشطة» مجاني؟
نعم — نص درس «روابط التنقل والحالات النشطة» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة React Academy، انتقل إلى CoddyKit PRO. تتضمن دورة React Academy 3 دروس في المجموع.
ماذا ستتعلم في «روابط التنقل والحالات النشطة»؟
أنشئ تنقلًا بحالات نشطة واضحة باستخدام className وaria-current؛ وحافظ على سهولة الوصول إلى الروابط وملاءمتها للشاشات الصغيرة. تتمرن على React Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ React Academy؟
لا تُشترط خبرة سابقة. React Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 3 من أصل 3.
كم من الوقت يستغرق درس «روابط التنقل والحالات النشطة»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس React Academy هذا؟
نعم. كل درس في React Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- مفاهيم التوجيه من جانب العميل
- المسارات المتداخلة ومعلمات المسار
- روابط التنقل والحالات النشطة