Anahtar switch / toggle

bilinen diğer adları switch · toggle · aç/kapa düğmesi

Böyle diyorsan: "açma-kapama düğmesi" · "kaydırmalı açık-kapalı şeyi" → bunun adı anahtar.

Açık/kapalı durumunu anında değiştiren kaydırmalı düğme.

Anahtar bir sistem durumunu ANINDA değiştirir: dokunduğun anda bildirimler açılır, karanlık tema devreye girer, kayıt başlar. Sözleşmesi tek cümledir — Kaydet butonu yoktur. Anahtarı bir forma koyup altına Kaydet eklersen kullanıcıya yalan söylemiş olursun: o kişi anahtarı çevirdiği anda işin bittiğini sanar ve sayfadan çıkar. Bu anındalık bir bedel getirir: istek başarısız olursa görsel durumu GERİ almak ve bunu söylemek zorundasın. Açık/kapalı olması, onay kutusundan görünüş olarak değil zamanlama olarak ayrılmasını sağlar.

Kapsam: Bu madde anında etkili aç/kapa kontrolünü kapsar. Form gönderilince etkili olan evet/hayır seçimi Onay Kutusu maddesindedir; bir eylem başlatan (durum değiştirmeyen) kontrol ise butondur.

CANLI ÖRNEK — kullan, numaralara tıkla, parçayı tanı

Bildirimleraçık — anında haber ver

Karanlık temasistemle aynı

Aşama aşama gezmek için okları ya da numaraları kullan.

YAPIM PROMPTU — AJANINA YAPIŞTIR

Bildirim ayarına switch ekle: role=switch + aria-checked, yanında yazılı durum ('Açık/Kapalı'); tıklayınca anında kaydet (optimistic), kısa bir toast doğrulasın; sunucu hata dönerse switch görsel olarak eski hâline dönsün ve hata bildirilsin; Space/Enter ile de çevrilebilsin.

DEBUG PROMPTU — HUYSUZLANIRSA

Yapıştır, sonuna belirtiyi ekle — ajana klasik hata kalıplarını önden verir.

Switch'im huysuz; klasikleri sırayla ele: (1) switch görünümlü ama ayrı bir Kaydet butonu bekliyor — sözleşme ihlali, kullanıcı kaydedildi sanıyor; (2) kayıt hata verince switch AÇIK kalıyor (rollback yok) — ekran yalan söylüyor; (3) durum yazısı yok, renk tek sinyal; (4) role=switch/aria-checked yok, okuyucu 'buton' diyor; (5) hızlı art arda tıklamada istekler yarışıyor (son durum belirsiz). Belirti şu:

ANATOMİ — HER PARÇANIN ADI VAR (tıkla ya da üzerine gel → örnekte yansın)

1Rayarka plan rengi
Açıkken dolu (yeşil/marka), kapalıyken soluk — renk durumun ilk sinyali ama TEK sinyal olmamalı.
2Başparmakkayan daire
Sağda=açık, solda=kapalı; geçiş animasyonu durumu 'fiziksel' hissettirir.
3Durum etiketiAçık/Kapalı
Renk körü ve ekran okuyucu için yazılı durum; role=switch + aria-checked ile eşleşir.
4Anında kayıtoptimistic + rollback
Switch'in sözleşmesi: KAYDET butonu yok, değişiklik anında işlenir; kayıt başarısızsa görsel GERİ alınır.

DURUMLAR — HANGİ HÂLDE NE OLUR

AKapalıaria-checked="false"
Ray soluk, başparmak solda. Renk durumun ilk sinyalidir ama TEK sinyali olmamalı; yanında yazılı durum dursun.
BAçıkaria-checked="true"
Ray dolu, başparmak sağda. Geçiş animasyonu durumu fiziksel hissettirir ama animasyon durumu ANLATAN şey değildir.
CBeklemedeistek uçuşta
Anahtar çevrildi, sunucu henüz onaylamadı. En sık atlanan hâl: kullanıcı arka arkaya çevirirse istekler yarışır — ya kilitle ya son isteği geçerli say.
DGeri alındırollback
Sunucu hata döndü. Anahtar eski hâline döner VE sebebi söylenir; sessizce geri dönen anahtar, kullanıcının ayarı kaydettiğini sanmasına yol açar.
EDevre dışıdisabled
Çevrilemez. Neden kapalı olduğu (ör. 'önce e-postanı doğrula') yazılmazsa kullanıcı arayüzü bozuk sanır.

KODDAKİ ADLARI

ARIA	role=switch + aria-checked	doğru anlam
Klavye	Space / Enter ile çevrilir	yerleşik beklenti
UX	optimistic update + rollback	anında ama dürüst kayıt
shadcn/ui	Switch	hazır parça

ERİŞİLEBİLİRLİK & SIK HATA

role="switch" + aria-checked kullan. Ekran okuyucu 'anahtar, açık' der; rolsüz bir div ise sadece tıklanabilir bir şekildir ve durumu hiç duyurulmaz.
Durumu yalnız renkle anlatma (WCAG 1.4.1): yanına yazılı 'Açık/Kapalı' koy. Renk körlüğünde dolu-boş ray ayrımı kaybolabilir.
Space ve Enter ile çevrilebilmeli. Yalnız fareyle çalışan anahtar, ayarlar sayfasını klavye kullanıcısına kapatır.
Dokunma hedefi en az 24px olmalı (WCAG 2.5.8); anahtarlar görsel olarak küçük çizilir, tıklama alanı ayrıca büyütülür.
Anahtarı forma koyup Kaydet butonu ekleme. Bu bir stil tercihi değil, sözleşme ihlalidir: iki farklı kaydetme modeli aynı ekranda kullanıcıyı yanıltır.

SIK KARIŞTIRILANLAR

Onay kutusundan farkı. Ayrım görünüşte değil ZAMANLAMADA. Anahtar dokunulduğu anda sistem durumunu değiştirir ve Kaydet beklemez; onay kutusu bir niyet bildirir, etkisi form gönderilince doğar. Pratik test: kullanıcı bunu değiştirdikten sonra 'Kaydet'e basacak mı? Basacaksa onay kutusu, basmayacaksa anahtar. Ayarlar sayfasında anahtar, kayıt formunda onay kutusu doğrudur.

Onay kutusu sayfasına git →

Butondan farkı. Anahtar bir DURUM değiştirir ve o durum kalıcıdır; buton bir EYLEM başlatır ve biter. 'Bildirimler açık' bir durumdur, 'Bildirim gönder' bir eylemdir. Eylemi anahtarla göstermek kullanıcıya geri alınabilir bir şey sunuyormuş gibi görünür; oysa gönderilen bildirim geri alınamaz.

Eylem çağrısı sayfasına git →

KAYNAKLAR

birincilW3C — ARIA APG, Switch kalıbı ↗
Resmi kalıp: rol, durum bildirimi ve klavye davranışı burada tanımlı.
standartMDN — role="switch" ↗
Rolün nasıl uygulandığı ve onay kutusundan anlamsal farkı.
standartW3C — WCAG 2.2, Use of Color (1.4.1) ↗
Açık/kapalı durumun yalnız renge yüklenemeyeceği kuralı.
standartW3C — WCAG 2.2, Target Size (Minimum) (2.5.8) ↗
Küçük çizilen anahtarın dokunma hedefi şartı.

İLGİLİ PARÇALAR

Onay kutusu checkbox Seçenek düğmesi radio Kısa bildirim toast / snackbar Eylem çağrısı CTA button

AYNI AİLEDE · GIRDI