aria-label مقارنةً بـ aria-labelledby
اختاروا بين اسم مضمّن واسم تتم الإشارة إليه
aria-label مقارنةً بـ aria-labelledby درس مجاني في Web Accessibility Academy على CoddyKit. هذا هو الدرس 2 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Web Accessibility Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Web Accessibility Academy 4 دروس في المجموع.
طريقتان للتسمية
عندما لا تكفي التسمية الأصلية، لديكم أداتا ARIA: aria-label لسلسلة مضمّنة، و aria-labelledby للإشارة إلى نص موجود.
تحتوي aria-label على سلسلة
استخدموا aria-label عندما لا يوجد نص مرئي يمكن استعارتُه. اكتبوا الاسم المنطوق مباشرة على العنصر نفسه.
<button aria-label="Search">🔍</button>تحتوي aria-labelledby على معرّف
استخدموا aria-labelledby عندما يمكن لنص مرئي في الصفحة أن يكون الاسم. فقيمتها هي id لذلك العنصر، وليست سلسلة نصية.
<h2 id="sec">Billing</h2>
<section aria-labelledby="sec">...</section>فضّلوا النص المرئي
ابدؤوا بـaria-labelledby. فإعادة استخدام النص الظاهر على الشاشة تُبقي الاسم المنطوق والاسم المرئي متزامنين تلقائيًا.
يمكن لـ labelledby دمج المعرّفات
مرروا إلى aria-labelledby عدة معرّفات تفصل بينها مسافات، وسيجمع المتصفح نصوصها وفق ذلك الترتيب في اسم واحد.
<span aria-labelledby="verb noun">Go</span>
<span id="verb">Delete</span> <span id="noun">file</span>labelledby تتغلب على label
إذا وجدا معًا، تفوز aria-labelledby. ويتجاهل المتصفح aria-label تمامًا، لذلك لا تتوقعوا دمجهما.
يمكن للعنصر تسمية نفسه
باستخدام aria-labelledby، يمكن للعنصر الإشارة إلى id الخاص به، وهذا مفيد لتسمية منطقة باستخدام نص عنوانها المرئي.
label غير مرئية
لا تظهر aria-label على الشاشة أبدًا. فهي تغير ما تعلنه التقنيات المساعدة فقط، لذلك لا يرى المستخدمون المبصرون أي اختلاف.
انتبهوا إلى فخ الترجمة
aria-label نص عادي غالبًا ما تتجاهله أدوات ترجمة الصفحات، بينما يعيد labelledby استخدام محتوى مرئي تتم ترجمته.
يجب أن تتطابق المعرّفات تمامًا
يجب أن يطابق معرّف aria-labelledby معرّف عنصر حقيقي. فالخطأ المطبعي يترك العنصر بصمت من دون اسم محسوب.
اختاروا مصدر الحقيقة
اسألوا أنفسكم: أين يوجد الاسم؟ إذا كان ظاهرًا على الشاشة، فاستخدموا aria-labelledby؛ وإذا كان موجودًا للتقنيات المساعدة فقط، فاستخدموا aria-label.
تحقق سريع
يعرض قسم ما عنوان h2 بالفعل. كيف تسمّون القسم؟
مراجعة: label أم labelledby
تعلمتم استخدام aria-labelledby للنص المرئي الموجود، و aria-label للأسماء المضمّنة غير المرئية، من دون توقع دمجهما. 🎯
تعلم HTML مع معلم ذكاء اصطناعي — مجانًا
اكتب وقم بتشغيل أكوادك الفعلية في المتصفح، واحصل على مساعدة فورية من معلم ذكاء اصطناعي متاح 24/7، واستمر من حيث توقفت على الويب أو في التطبيق.
- الدورات
- 30
- الدروس
- 120
الأسئلة الشائعة
هل درس «aria-label مقارنةً بـ aria-labelledby» مجاني؟
نعم — نص درس «aria-label مقارنةً بـ aria-labelledby» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Web Accessibility Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Web Accessibility Academy 4 دروس في المجموع.
ماذا ستتعلم في «aria-label مقارنةً بـ aria-labelledby»؟
اختاروا بين اسم مضمّن واسم تتم الإشارة إليه تتمرن على Web Accessibility Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ Web Accessibility Academy؟
لا تُشترط خبرة سابقة. Web Accessibility Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 2 من أصل 4.
كم من الوقت يستغرق درس «aria-label مقارنةً بـ aria-labelledby»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس Web Accessibility Academy هذا؟
نعم. كل درس في Web Accessibility Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- حساب الاسم المتاح، بلا غموض
- aria-label مقارنةً بـ aria-labelledby
- استخدام aria-describedby لإضافة سياق
- أخطاء التسمية الشائعة التي تُسكت عناصر التحكم