Web Accessibility Academy · درس

تجميع الحقول باستخدام fieldset وlegend

اجمع عناصر التحكم المرتبطة، مثل مجموعات أزرار الاختيار، بطريقة صحيحة.

الدرس 3 من 413 خطوة

تجميع الحقول باستخدام fieldset وlegend درس مجاني في Web Accessibility Academy على CoddyKit. هذا هو الدرس 3 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Web Accessibility Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Web Accessibility Academy 4 دروس في المجموع.

تنتمي بعض الحقول إلى مجموعة واحدة

إن مجموعة من أزرار الاختيار أو مربعات الاختيار المرتبطة تمثل سؤالًا واحدًا، لا أسئلة متعددة. ويجمعها العنصر fieldset في وحدة واحدة. 🧩

تحتاج المجموعة إلى اسم

لكل عنصر تحكم تسمية خاصة به، لكن المجموعة بأكملها تحتاج إلى تسمية أيضًا. ويمنحها legend سؤالًا مشتركًا.

يأتي legend أولًا

يجب أن يكون legend الابن الأول للعنصر fieldset. فهو يعمل كعنوان تربطه قارئات الشاشة بكل عنصر تحكم داخله.

<fieldset>
  <legend>Shipping speed</legend>
</fieldset>

مجموعة أزرار اختيار مكتملة

هنا يحيط fieldset بالخيارات، ويطرح legend السؤال. ويحتفظ كل زر اختيار بتسميته الخاصة.

<fieldset>
  <legend>Size</legend>
  <label><input type="radio" name="s"> Small</label>
  <label><input type="radio" name="s"> Large</label>
</fieldset>

ما تسمعه قارئات الشاشة

عند الانتقال إلى زر اختيار ضمن مجموعة، تعلن قارئة الشاشة عن legend والخيار، مثل: المقاس، صغير. وهكذا يأتي السياق تلقائيًا.

أزرار الاختيار هي الحالة الكلاسيكية

تُعد Radio buttons التي تشترك في الاسم الاستخدام النموذجي. ومن دون fieldset، يسمع المستخدمون خيارات من دون معرفة السؤال الذي تجيب عنه.

مجموعات مربعات الاختيار أيضًا

تُعد قائمة الاختيارات المتعددة، مثل «اختر اهتماماتك»، مجموعة أيضًا. ويربط fieldset مربعات الاختيار بسؤال مشترك واحد.

قسّم المدخلات المفردة

تستفيد حقول العنوان المقسمة بين مدخلات متعددة من ذلك أيضًا. إذ يحدد legend مثل «عنوان الفوترة» إطار القسم بأكمله.

لا تفرط في استخدامه

لا يحتاج إدخال نصي منفرد إلى fieldset. احجزوا التجميع للحقول التي تجيب فعلًا عن سؤال واحد معًا.

التنسيق مرن

قد يبدو الحد الافتراضي قديمًا، لكن يمكنكم إعادة تنسيقه بحرية باستخدام CSS. وتظل الدلالات سليمة مهما تغير مظهره.

ARIA هو الحل الأخير

إذا تعذر استخدام fieldset حقيقي، فيمكن لمحاولة role group مع aria-labelledby محاكاته. لكن يفضل استخدام العنصر الأصلي كلما أمكن.

تحقق سريع

ما العنصر الذي يضع اسمًا لـ fieldset بالنسبة إلى التقنيات المساعدة؟

أجب عليها في الدرس التفاعلي

مراجعة

ضعوا عناصر التحكم المرتبطة داخل fieldset، وأضيفوا لها عنوانًا باستخدام legend. وهكذا تحصل مجموعات أزرار الاختيار ومربعات الاختيار على سياق يمكن لكل مستخدم الاعتماد عليه. ✅

البدء مجانًا

تعلم HTML مع معلم ذكاء اصطناعي — مجانًا

اكتب وقم بتشغيل أكوادك الفعلية في المتصفح، واحصل على مساعدة فورية من معلم ذكاء اصطناعي متاح 24/7، واستمر من حيث توقفت على الويب أو في التطبيق.

الدورات: 30
الدروس: 120

ابدأ التعلم مجانًا عرض الدورة الكاملة

الأسئلة الشائعة

هل درس «تجميع الحقول باستخدام fieldset وlegend» مجاني؟

نعم — نص درس «تجميع الحقول باستخدام fieldset وlegend» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Web Accessibility Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Web Accessibility Academy 4 دروس في المجموع.

ماذا ستتعلم في «تجميع الحقول باستخدام fieldset وlegend»؟

اجمع عناصر التحكم المرتبطة، مثل مجموعات أزرار الاختيار، بطريقة صحيحة. تتمرن على Web Accessibility Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ Web Accessibility Academy؟

لا تُشترط خبرة سابقة. Web Accessibility Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 3 من أصل 4.

كم من الوقت يستغرق درس «تجميع الحقول باستخدام fieldset وlegend»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس Web Accessibility Academy هذا؟

نعم. كل درس في Web Accessibility Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

← العودة إلى Web Accessibility Academy