الدلالات والتسميات والأدوار والتركيز
استخدم الدلالات الصحيحة، واربط التسميات بحقول الإدخال، واعتمد على الأدوار، وانقل التركيز إلى الموضع الذي يحتاجه المستخدم.
الدلالات والتسميات والأدوار والتركيز درس مجاني في React Academy على CoddyKit. هذا هو الدرس 1 من أصل 3. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في React Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة React Academy 3 دروس في المجموع.
لماذا أساسيات إمكانية الوصول
الهدف: جعل واجهة المستخدم مفهومة للتقنيات المساعدة.
- استخدم العناصر الحقيقية (button وnav وform)
- امنح حقول الإدخال تسميات مناسبة
- أدر التركيز أثناء سير العمليات
نظرة عامة على الدلالات والأدوار
- فضّل الدلالات الأصلية: استخدم button بدلًا من div
- توفر العناصر الحقيقية أدوارًا ضمنية
- أضف ARIA فقط عندما لا تكفي الدلالات الأصلية
حقول إدخال معنونة (جيد)
أنشئ حقول إدخال بتسميات مرتبطة بها، ومنطقة مباشرة لعرض الملاحظات.
<div id="root"></div>
الأزرار وحالة التبديل
استخدم زرًا حقيقيًا، واكشف عن الحالة باستخدام aria-pressed لعناصر التبديل.
<div id="root"></div>
التركيز عند الفتح (تجربة مستخدم جيدة)
انقل التركيز إلى اللوحة المفتوحة حديثًا حتى يتمكّن مستخدمو لوحة المفاتيح من بدء الكتابة فورًا.
<div id="root"></div>
نصائح ومزالق
- فضّل العناصر الأصلية؛ وأضف ARIA فقط عند الحاجة
- تمنح التسميات حقول الإدخال اسمًا موثوقًا
- أدر التركيز عند فتح النوافذ المتراكبة أو بعد الانتقال
أفضل ممارسة لتسمية الحقول
خلاصة
خلاصة: استخدم الدلالات الحقيقية، واربط التسميات بحقول الإدخال، واكشف عن الحالة باستخدام الأدوار أو ARIA عند الحاجة، وانقل التركيز إلى الموضع الذي سيتفاعل فيه المستخدمون بعد ذلك.
الأسئلة الشائعة
هل درس «الدلالات والتسميات والأدوار والتركيز» مجاني؟
نعم — نص درس «الدلالات والتسميات والأدوار والتركيز» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة React Academy، انتقل إلى CoddyKit PRO. تتضمن دورة React Academy 3 دروس في المجموع.
ماذا ستتعلم في «الدلالات والتسميات والأدوار والتركيز»؟
استخدم الدلالات الصحيحة، واربط التسميات بحقول الإدخال، واعتمد على الأدوار، وانقل التركيز إلى الموضع الذي يحتاجه المستخدم. تتمرن على React Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ React Academy؟
لا تُشترط خبرة سابقة. React Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 1 من أصل 3.
كم من الوقت يستغرق درس «الدلالات والتسميات والأدوار والتركيز»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس React Academy هذا؟
نعم. كل درس في React Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- الدلالات والتسميات والأدوار والتركيز
- تفاعلات لوحة المفاتيح وروابط التخطي
- أساسيات اختبار إمكانية الوصول