PasswordInput

Rol ve anlam

Alan bir <input type="password"> olarak çizilir; etiket <label> ile bağlanır. Göz düğmesi aria-pressed taşıyan bir <button> olup adı sabittir (“Şifreyi göster”); durum basılı olup olmadığıyla okunur. Koşul listesi aria-describedby ile alana bağlı bir <ul>’dir; her koşulun durumu görünmeyen bir metinle okunur, yalnızca renkle değil.

Klavye

Tuş	Davranış
Tab	Alana, sonra göz düğmesine gider.
Enter, Space	Göz düğmesinde değeri gösterir ya da gizler.

Odak

Odak kutunun tamamını çevreler (focus-within); göz düğmesi odaktayken de halka kutuda kalır, böylece iki ayrı halka görünmez.

Ekran okuyucu

Örnek	Okunan
Alan	“Şifre, parola metni”
Göz düğmesi	“Şifreyi göster, düğme, basılı değil”
Koşul	“En az 12 karakter, karşılanmadı”
Yazmayı bırakınca	“2 / 3 koşul karşılandı”, kibar duyuru
Büyük harf kilidi	“Büyük harf kilidi açık”

Kontrast

Koşul metni color-text-success ve color-text-subtle zeminde 4,5:1; güç parçaları en az 3:1 kontrast taşır. Güç düzeyi metinle de yazılır.

WCAG 2.2

Ölçüt	PasswordInput nasıl karşılar	Ürün ekibi ne yapmalı
1.3.5 Girdi amacını belirleme	autoComplete zorunlu.	Doğru değeri seçin.
1.4.1 Rengin kullanımı	Koşul durumu ikon ve metinle de verilir.	—
3.3.8 Erişilebilir kimlik doğrulama (asgari)	Yapıştırma ve parola yöneticileri engellenmez.	Yapıştırmayı engelleyen kod eklemeyin.
4.1.2 Ad, rol, değer	Göz düğmesi aria-pressed.	—
4.1.3 Durum mesajları	Koşul ilerlemesi ve büyük harf uyarısı role="status".	—