Bileşenler
Field
Her form denetimi için etiket, denetim, yardım metni, hata ve sayacı kimliklerle bağlayan kap.
- Storybook
- Storybook
- Kaynak kod
- Kaynak kod
Rol ve anlam
Bölüm başlığı “Rol ve anlam”Field, Base UI Field üzerine kuruludur. Etiket <label for> ile denetime bağlanır. Yardım metni ve hata kimlikleri aria-describedby içinde, yardım metni önce olacak şekilde yer alır. Birden çok hata bir madde listesidir.
Klavye
Bölüm başlığı “Klavye”| Tuş | Davranış |
|---|---|
| Tab | Denetime odaklanır. Etiket, yardım metni ve sayaç odak almaz. |
Odak denetimdedir; Field.Control 2 px color-focus-ring halkası gösterir. Etikete tıklamak odağı denetime taşır.
Ekran okuyucu
Bölüm başlığı “Ekran okuyucu”| Örnek | Okunan |
|---|---|
| Zorunlu alan | “Alan etiketi, zorunlu, düzenleme metni, gerekli” |
| İki hatalı alan | Alan adı, “geçersiz”, yardım metni ve iki hata mesajı |
| Sayaç sınıra yakın | Yazmaya ara verince “2 karakter kaldı” |
Sayaç role="status" ile kibarca duyurulur; sınırdan uzakken sessizdir. Görünen “8/10” metni gizlidir.
Kontrast
Bölüm başlığı “Kontrast”Etiket, yardım metni ve hata metni zeminde en az 4.5:1 kontrast taşır. Geçersiz durum yalnızca kenarlık rengine dayanmaz; hata metni de görünür.
WCAG 2.2
Bölüm başlığı “WCAG 2.2”| Ölçüt | Field nasıl karşılar | Ürün ekibi ne yapmalı |
|---|---|---|
| 1.3.1 Bilgi ve ilişkiler | <label for> ve aria-describedby. |
Her alana label verin. |
| 3.3.1 Hata belirleme | aria-invalid ve metinli hata. |
Mesajı alanın yanında gösterin. |
| 3.3.2 Etiketler veya talimatlar | Görünür etiket ve yardım metni. | Biçim kurallarını yardım metninde verin. |
| 4.1.3 Durum mesajları | Sayaç role="status". |
Sayacı yalnızca sınırlı alanlarda kullanın. |