Erişilebilir Anahtar Kontrolleri Oluşturma

Web özellikleri: <input type="checkbox" switch> accent-color

Yerel form gönderimini, klavye ile gezinmeyi ve ekran okuyucu semantiğini koruyan ikili bir açma/kapatma düğmesi oluşturmak için <input type="checkbox" switch> üzerinde ilişkili bir <label> ile HTML switch özelliğini kullanın (Onay Kutularını Biçimlendirme ve Formlar bölümlerine bakın).

Brüt kar

Standart bir onay kutusu girişine boole switch özelliğini ekleyin:

<label>
  Enable notifications
  <input id="notifications" type="checkbox" switch>
</label>
  • Etiket, girişi sarmalayabilir veya for/id ile ilişkilendirilebilir. Tüm stiller girişi hedeflediğinden etiket yapısına bağlı değildir.
  • Bu seçenek işaretlendiğinde giriş, standart onay kutusu değerini gönderir. JavaScript'te change (veya input) etkinliklerini dinleyin ve .value yerine .checked değerini okuyun.

Stil

accent-color kullanarak denetimin vurgu rengini özelleştirin (Markayla Tutarlı Formlar bölümüne bakın) ve görünür odak stilini sağlayın:

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;
}

Yedek stratejiler

Anahtar kontrolü için yedekler ve tarayıcı desteği

Baseline hedefiniz <input type="checkbox" switch> özelliğini desteklemiyorsa input-switch-polyfill özelliğini yalnızca 'switch' in HTMLInputElement.prototype, false olduğunda yükleyin. Polyfill'i koşulsuz olarak yüklemeyin. Polyfill, role="switch" değerini ayarlayarak, anahtar stilini (appearance: none) uygulayarak, hesaplanan accent-color değerini senkronize ederek ve işaretçi sürükleme desteği sağlayarak switch özelliğine sahip onay kutularını iyileştirir.

Projenize uygun paket yükleme yaklaşımını kullanın. Aşağıdaki örnekte, kurulumunuzun modül belirleyicileri çözebileceği varsayılmaktadır:

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

Vurgu rengi için yedekler ve tarayıcı desteği

accent-color özelliği, progresif geliştirmedir. Bu özelliği desteklemeyen tarayıcılar, özelliği yok sayar ve varsayılan kullanıcı arayüzü renklerini kullanır.