إنشاء عناصر تحكّم بمفاتيح تحكّم يسهل الوصول إليها

استخدِم سمة HTML‏ switch في <input type="checkbox" switch> مع سمة <label> مرتبطة بها لإنشاء زر تبديل ثنائي لتفعيل/إيقاف الميزة يحافظ على إرسال النموذج الأصلي والتنقّل باستخدام لوحة المفاتيح ودلالات قارئ الشاشة (راجِع تنسيق مربّعات الاختيار والنماذج).

Markup

أضِف السمة المنطقية switch إلى إدخال مربّع اختيار عادي:

<label>
  Enable notifications
  <input id="notifications" type="checkbox" switch>
</label>

• يمكن أن يلتف التصنيف حول حقل الإدخال أو يرتبط بـ for/id. تستهدف جميع الأنماط حقل الإدخال، لذا لا تعتمد على بنية التصنيف.
• عند وضع علامة في المربّع، يرسل الإدخال قيمة مربّع الاختيار العادية. في JavaScript، يمكنك الاستماع إلى أحداث change (أو input) وقراءة .checked بدلاً من .value.

التصميم

يمكنك تخصيص لون تمييز عنصر التحكّم باستخدام accent-color (راجِع النماذج المتوافقة مع العلامة التجارية) والتأكّد من أنّ نمط التركيز مرئي:

input[type="checkbox"][switch] {
  accent-color: var(--accent-color, #1769e0);
  margin: 0;
  cursor: pointer;
}

input[type="checkbox"][switch]:focus-visible {
  outline: 3px solid var(--focus-color, #ff8c00);
  outline-offset: 4px;
}

استراتيجيات احتياطية

الخيارات الاحتياطية وتوافق المتصفّح مع عنصر التحكّم في التبديل

إذا كان إصدار Baseline المستهدَف لا يتيح استخدام <input type="checkbox" switch>، يجب تحميل input-switch-polyfill فقط عندما يكون 'switch' in HTMLInputElement.prototype هو false. لا تحمِّل polyfill بدون شروط. يعزّز polyfill مربّعات الاختيار باستخدام السمة switch من خلال ضبط role="switch" وتطبيق نمط مفتاح التبديل (appearance: none) ومزامنة السمة accent-color المحسوبة وتوفير إمكانية سحب المؤشر.

استخدِم طريقة تحميل الحِزم المناسبة لمشروعك. يفترض المثال أدناه أنّ الإعدادات التي تستخدمها يمكنها حلّ محدّدات الوحدات:

if (!('switch' in HTMLInputElement.prototype)) {
  import('input-switch-polyfill');
}

الخيارات الاحتياطية وتوافق المتصفّح مع السمة accent-color

سمة accent-color هي تحسين تدريجي. وستتجاهل المتصفّحات التي لا تتوافق مع هذه السمة هذه السمة وتستخدم ألوان واجهة المستخدم التلقائية.