Button

Rol ve anlam

Yerel <button> öğesi çizilir; ekran okuyucu “Kaydet, düğme” diye okur. Varsayılan type="button" olduğundan form içinde kazara göndermez. render ile <a> çizildiğinde “bağlantı” olarak okunur. Etiket, Button’ın erişilebilir adıdır; ikonlar aria-hidden ile ekran okuyucudan gizlenir. Yalnızca ikonlu Button bu sürümde desteklenmez; her Button görünür bir etiket taşır.

Klavye

Tuş	Davranış
Tab	Button’a odaklanır. Devre dışı Button atlanır; focusableWhenDisabled verilmişse ya da Button yükleniyorsa atlanmaz.
Enter	İşlemi başlatır; formun içindeyse ve type="submit" ise formu gönderir.
Boşluk	İşlemi başlatır.

Odak

Odak halkası 2 px kalınlığında, Button’dan 2 px dışarıda çizilir ve yalnızca klavyeyle gelindiğinde görünür; fareyle tıklamada görünmez. Halkanın sayfa arka planına karşı kontrastı aşağıdaki Kontrast bölümünde. Yükleniyor durumundaki Button odakta kalır.

Ekran okuyucu

Durum	Okunan
Varsayılan	“Kaydet, düğme”
Devre dışı (disabled)	Sekme sırasından çıkar; sanal imleçle gezilirken “Kaydet, düğme, kullanılamıyor”.
Devre dışı ama odaklanabilir (focusableWhenDisabled)	aria-disabled="true" taşır; “Kaydet, düğme, kullanılamıyor” olarak okunur ve odaklanabilir.
Yükleniyor (loading)	Button’ın adı etiketi olarak kalır. Yükleme başladığında Button’ın yanındaki kibar durum bölgesi (role="status") loadingLabel metnini, verilmemişse Provider’ın diline göre “Yükleniyor” metnini bir kez okutur. aria-busy kullanılmaz. disabled ile birlikte yükleniyorsa Button disabled özniteliği yerine aria-disabled="true" taşır ve sekme sırasında kalır, böylece odak kaybolmaz.

Okunan metinler ekran okuyucuya ve tarayıcıya göre biraz değişebilir; yukarıdakiler beklenen biçimdir.

Kontrast

Etkin Button’da etiket ile arka plan arasındaki kontrast, her varyant ve ton için hover ve pressed dahil, her markada ve modda en az 4.5:1’dir. Aşağıdaki değerler token kaynaklarından (packages/tokens/src) WCAG göreli parlaklık formülüyle hesaplandı; iki markada (bigbang, fixture) en düşük değer gösterilir. Token paketindeki test her derlemede her varyant ve tonun varsayılan çiftlerini, birincil hover çiftini ve tehlike tonunun hover ve basılı dolgularını denetler; diğer hover ve basılı çiftleri burada hesaplanmıştır. Devre dışı Button bu şarttan muaftır.

Varyant ve ton	Eşleşme	Açık mod	Koyu mod
primary nötr	Etiket / varsayılan, hover, pressed arka plan	6.17:1	8.09:1
secondary nötr	Etiket / varsayılan, hover, pressed arka plan	14.40:1	11.57:1
tertiary nötr	Etiket / sayfa, hover, pressed arka plan	13.24:1	11.57:1
primary tehlike	Etiket / varsayılan, hover, pressed arka plan	5.63:1	8.83:1
secondary tehlike	Etiket / varsayılan, hover, pressed arka plan	5.76:1	4.81:1
tertiary tehlike	Etiket / sayfa, hover, pressed arka plan	5.76:1	4.81:1
Odak halkası	color-focus-ring / color-surface-default	5.97:1	8.09:1
secondary tehlike kenarlık	color-border-danger / sayfa	5.45:1	6.15:1
secondary nötr kenarlık	color-border-default / sayfa	1.38:1	1.49:1

secondary nötr Button’ın kenarlığı 3:1’in altındadır; Button’ı etiketi ve doğrulanmış etiket kontrastı tanıtır, kenarlık yalnızca görsel destektir. Ürün ekibi, ikincil Button’ı sayfa yüzeyinden ayırt etmek için kenarlığa güvenmemelidir.

WCAG 2.2

Ölçüt	Button nasıl karşılar	Ürün ekibi ne yapmalı
1.4.1 Renk kullanımı	Anlam yalnızca renkle verilmez; tehlike tonu da etiket metnine dayanır.	Etiketin işlemi söylediğinden emin olun (“Sil”); yalnızca kırmızıya güvenmeyin.
1.4.3 Kontrast (asgari)	Etkin durumlarda etiket kontrastı en az 4.81:1 (yukarıdaki tablo).	Renk sınıflarını className ile değiştirmeyin.
1.4.11 Metin dışı kontrast	Odak halkası en az 5.97:1; tehlike kenarlığı en az 5.45:1. Nötr ikincil kenarlık 3:1’in altındadır ama etiket Button’ı tanıtır.	İkincil Button’ı yalnızca kenarlıkla ayırt edilen bir arka planda kullanmayın.
2.1.1 Klavye	Yerel <button>; Enter ve Boşluk işlemi başlatır.	Tıklanabilir bir <div> yerine Button kullanın.
2.4.7 Odak görünür	:focus-visible ile 2 px halka çizilir.	className ile odak halkasını kaldırmayın.
2.4.11 Odak görünürlüğü (asgari)	Halka Button’ın dışında, 2 px uzaklıkta çizilir; başka öğe onu örtmez.	Button’ı odak halkasını kırpan overflow: hidden kapsayıcıların kenarına koymayın.
2.5.3 Ada etiket dahil	Erişilebilir ad görünür etiketle aynıdır; yükleniyor durumunda da etiket adı olarak kalır.	aria-label ile görünür etiketten farklı bir ad vermeyin.
2.5.8 Hedef boyutu (asgari)	En küçük boy 32 px yüksekliktedir.	Yan yana Button’lar arasında boşluk bırakın; dar toolbar’larda boyutu küçültmeyin.
4.1.2 Ad, rol, değer	Yerel <button>; devre dışı durumda disabled ya da aria-disabled.	render ile bağlantı çizerken nativeButton={false} verin.
4.1.3 Durum mesajları	Yükleme başladığında kibar durum bölgesi bir kez okur.	Sonucu (başarı, hata) ayrıca duyurun; Button yalnızca yüklemenin başladığını bildirir.