TextInput

Rol ve anlam

TextInput, yerel bir <input> çizer ve etiketi <label for> ile ona bağlar; etikete tıklamak girdiye odaklanır. Yardım metni ve hata metni aria-describedby ile bağlanır, sırası önce açıklama, sonra hatadır. Hata olduğunda girdi aria-invalid taşır. required yerel öznitelik olarak verilir; bu, ekran okuyucuya aria-required ile aynı bilgiyi iletir. Hata metni canlı bölge değildir: form gönderimi başarısız olunca, odağı hata özetine ya da ilk geçersiz alana taşımak formu yazan ekibin işidir.

Klavye

Tuş	Davranış
Tab	Alana odaklanır. Devre dışı alan atlanır; salt okunur alan odak alır.
Shift + Tab	Önceki alana döner.
Yazı tuşları	Değeri girer; salt okunur ve devre dışı alanda değer değişmez.
Etikete tıklama	Girdiye odaklanır.

Sayısal alanlarda inputMode="numeric" ya da "decimal" mobilde doğru klavyeyi açar. type="number" kullanmayın; baştaki sıfırları siler ve fare tekerleğiyle değeri değiştirir.

Odak

Odakta kutu kenarlığı odak rengine geçer ve kutunun 1 px içine 2 px kalınlığında bir halka çizilir. Halka kutunun dışına taşmaz; bu yüzden üst öğenin overflow ayarı onu kırpmaz. Halka girdi değil, girdiyi ve başta/sonda içeriği saran kutu üzerindedir; başta ya da sonda içerikteki küçük bir eylem odak aldığında da kutu odakta görünür.

Ekran okuyucu

Okuma sırası: ad (etiket), rol, durum, açıklama. Örnekler (ekran okuyucuya göre ifade değişebilir):

• Zorunlu alan: “IBAN zorunlu, metin alanı, zorunlu, TR ile başlar.” Etiketteki “zorunlu” sözcüğü * işaretinin yanındaki görünmeyen metindir; Provider dilindeki ui.field.required metin kataloğundan gelir. * işaretinin kendisi okunmaz.
• İsteğe bağlı işaretleme: necessityIndicator="optional" ile etiket “Not (isteğe bağlı)” olarak okunur; metin ui.field.optional kataloğundan gelir.
• Geçersiz alan: “Posta kodu, metin alanı, geçersiz giriş, 5 haneli posta kodu. Posta kodu 5 haneli olmalı.” Açıklama önce, hata sonra okunur.

Kontrast

Değerler bigbang ve fixture markalarının açık ve koyu modlarından hesaplandı (WCAG göreli parlaklık formülü); alan kutusu surface-raised, sayfa surface-default üzerindedir ve her satırda iki yüzeyin ve iki markanın en düşüğü verilmiştir.

Öğe	Hedef	Açık mod	Koyu mod
Girilen değer (color-text-default)	4.5:1	16.16:1	15.44:1
Yer tutucu (color-text-placeholder)	4.5:1	4.63:1	6.41:1
Etiket (color-text-default)	4.5:1	16.16:1	15.44:1
Yardım metni (color-text-subtle)	4.5:1	8.77:1	9.23:1
Hata metni (color-text-danger)	4.5:1	7.23:1	7.94:1
Girdi kenarlığı (color-border-input)	3:1	4.63:1	3.49:1
Geçersiz kenarlık (color-border-danger)	3:1	5.45:1	5.53:1
Odak halkası (color-focus-ring)	3:1	5.97:1	7.27:1

Devre dışı alanın metni ve kenarlığı WCAG’nin kontrast şartından muaftır ve hesaba katılmamıştır.

WCAG 2.2

Ölçüt	TextInput nasıl karşılar	Ürün ekibi ne yapmalı
1.3.1 Bilgi ve ilişkiler	Etiket <label for> ile, yardım ve hata aria-describedby ile girdiye bağlıdır; zorunluluk yerel required ile verilir.	Alanları ilgili gruplarda (fieldset, legend) toplamak.
1.3.5 Girdi amacını belirleme	autoComplete girdiye iletilir.	E-posta, telefon, ad ve adres alanlarına uygun autoComplete değerini vermek.
1.4.3 Kontrast (asgari)	Değer, etiket, yardım, hata ve yer tutucu metni her marka ve modda en az 4.5:1 (yukarıdaki tablo).	Token dışı renk vermemek.
1.4.11 Metin dışı kontrast	Girdi kenarlığı ve odak halkası en az 3:1.	Alan kutusunu kenarlığı olmayan bir arka plana yerleştirmemek.
2.4.6 Başlıklar ve etiketler	label zorunlu bir özelliktir; etiket görünürdür.	Alanın ne istediğini anlatan kısa bir etiket yazmak.
2.4.7 Odak görünür	Odakta kenarlık değişir ve 2 px halka çizilir.	Odak halkasını outline: none ile kapatmamak.
2.5.3 Etiket adın içinde	Görünen etiket, erişilebilir adın başında yer alır; “zorunlu” yalnızca sonuna eklenir.	Etiketi aria-label ile farklı bir adla ezmemek.
3.3.1 Hata tanımlama	Hata metni alana bağlanır ve girdi aria-invalid taşır; yalnızca renge dayanmaz.	Hatanın metnini yazmak ve doğrulamayı uygulamada yapmak.
3.3.2 Etiketler ya da talimatlar	label ve description ile biçim önceden söylenebilir.	Beklenen biçimi yardım metninde belirtmek.
3.3.3 Hata önerisi	Bileşen mesajı gösterir ama içeriğini üretmez.	Hata metninin nasıl düzeltileceğini söylemesini sağlamak.
4.1.2 Ad, rol, değer	Yerel <input> kullanır; ad, rol ve değer tarayıcıdan gelir; durumlar aria-invalid ve yerel özniteliklerle bildirilir.	Girdinin rolünü render ya da role ile değiştirmemek.