انتقل إلى محتوى الدرس

Accessible Selection Controls إتاحة وتحسين مظهر عناصر الاختيار

تعلم الحقول الاختيارية في نماذج HTML: اكتشف كيفية بناء أزرار الاختيار الأحادي Radio، ومربعات التحديد Checkbox، وشرائط التمرير Range، ومنتقي الألوان Color باحترافية.
4 صفوف تعليمية
لغة HTML
7,042 مشاهدة

شرح صفوف ومحتوى الفقرة

الصف 1 شرح توضيحي
يتطلب تحقيق النفاذ الرقمي لعناصر الاختيار تجميع الحقول المترابطة وتوفير مساحات نقر واضحة. وعند بناء مجموعات الراديو أو مربعات التحديد، يجب إحاطتها بحاوية <fieldset> وتزويدها بعنوان دلالي عبر <legend>.
الصف 2 كود برمجي
HTML
<!-- Accessible selection group with fieldset and legend -->
<fieldset>
  <legend>Preferred Notification Channels:</legend>
  <input id="notif-em" name="channel"
         type="checkbox" value="email">
  <label for="notif-em">Email Notifications</label>
  <input id="notif-sms" name="channel"
         type="checkbox" value="sms">
  <label for="notif-sms">SMS Text Alerts</label>
</fieldset>
الصف 3 شرح توضيحي
يمثل توسيع مساحة النقر مطلباً أساسياً لسهولة الاستخدام؛ حيث يؤدي النقر على وسم التسمية التوضيحية إلى تفعيل الحقل مباشرة. ويحظر تماماً إخفاء حدود تركيز لوحة المفاتيح دون توفير مؤشرات بصرية بديلة واضحة.
الصف 4 ملاحظة هامة