إعلانات إمكانية الوصول (aria-live)
استخدم مناطق aria-live للإعلان عن التغييرات من دون سرقة التركيز. اختر بين polite وassertive، واضبط aria-atomic، ومركّز الإعلانات.
إعلانات إمكانية الوصول (aria-live) درس مجاني في React Academy على CoddyKit. هذا هو الدرس 3 من أصل 3. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في React Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة React Academy 3 دروس في المجموع.
لماذا الإعلانات؟
الهدف: الإعلان عن التغييرات لقارئات الشاشة من دون سرقة التركيز.
- aria-live: الوضع الهادئ مقابل الوضع الحازم
- role="status" / role="alert"
- aria-atomic لعرض الرسائل كاملة
الوضع الهادئ مقابل الوضع الحازم
- polite: يُعلن قريبًا من دون مقاطعة
- assertive: للحالات العاجلة، وقد يقاطع
- atomic: يقرأ العقدة كاملة عند تغيّرها
- فضّل status لمعلومات النجاح، وalert للأخطاء
عرض توضيحي: منطقة status هادئة
تعلن منطقة status عن تحديثات النص من دون نقل التركيز.
<div id="root"></div>عرض توضيحي: خطاف useAnnounce (هادئ)
وحّد الإعلانات باستخدام سياق Announcer وخطاف صغير.
<div id="root"></div>عرض توضيحي: تنبيه خطأ حازم
استخدم assertive (أو role="alert") باعتدال للأخطاء التي تتطلب الانتباه فورًا.
<div id="root"></div>نصائح وقائمة تحقق
- فضّل polite (role=status) للنجاح والمعلومات
- استخدم alert/assertive للأخطاء العاجلة
- عيّن aria-atomic="true" للرسائل الكاملة
- لا تنقل التركيز إلا عند الحاجة
اختبار أساسيات الإعلانات
خلاصة
خلاصة: أضف منطقة مركزية من نوع aria-live بالوضع الهادئ للتحديثات المعتادة، واستخدم assertive/alert للأخطاء العاجلة. اجعل الرسائل ذرية وتجنب سرقة التركيز.
الأسئلة الشائعة
هل درس «إعلانات إمكانية الوصول (aria-live)» مجاني؟
نعم — نص درس «إعلانات إمكانية الوصول (aria-live)» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة React Academy، انتقل إلى CoddyKit PRO. تتضمن دورة React Academy 3 دروس في المجموع.
ماذا ستتعلم في «إعلانات إمكانية الوصول (aria-live)»؟
استخدم مناطق aria-live للإعلان عن التغييرات من دون سرقة التركيز. اختر بين polite وassertive، واضبط aria-atomic، ومركّز الإعلانات. تتمرن على React Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ React Academy؟
لا تُشترط خبرة سابقة. React Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 3 من أصل 3.
كم من الوقت يستغرق درس «إعلانات إمكانية الوصول (aria-live)»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس React Academy هذا؟
نعم. كل درس في React Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- البوابات وحصر التركيز والإغلاق بمفتاح Escape
- مدير التراكبات العام (Context + Reducer)
- إعلانات إمكانية الوصول (aria-live)