Bileşenler
Label
Field dışındaki bir denetimi adlandıran, zorunluluk işaretini taşıyan etiket.
- Storybook
- Storybook
- Kaynak kod
- Kaynak kod
Rol ve anlam
Bölüm başlığı “Rol ve anlam”Label yerel bir <label> öğesidir. htmlFor ya da içindeki denetim aracılığıyla denetime ad verir. * işareti aria-hidden taşır; zorunluluk görünmeyen “zorunlu” ya da “required” metniyle okunur.
Klavye
Bölüm başlığı “Klavye”| Tuş | Davranış |
|---|---|
| Tab | Label odak almaz; odak denetime gider. |
Label odak almaz. Etikete tıklamak denetime odaklanır.
Ekran okuyucu
Bölüm başlığı “Ekran okuyucu”| Örnek | Okunan |
|---|---|
<Label htmlFor="ad" required>Alan etiketi</Label> |
Denetim “Alan etiketi zorunlu” adıyla okunur |
necessityIndicator="optional" |
Denetim “Alan etiketi (isteğe bağlı)” adıyla okunur |
Kontrast
Bölüm başlığı “Kontrast”Etiket metni ve * işareti zeminde en az 4.5:1 kontrast taşır. Devre dışı metin WCAG kontrast şartından muaftır.
WCAG 2.2
Bölüm başlığı “WCAG 2.2”| Ölçüt | Label nasıl karşılar | Ürün ekibi ne yapmalı |
|---|---|---|
| 1.3.1 Bilgi ve ilişkiler | <label for> ya da saran etiket. |
htmlFor ile id değerini eşleyin. |
| 2.5.3 Addaki etiket | Görünür metin adın başıdır. | Denetime ayrı bir aria-label vermeyin. |
| 3.3.2 Etiketler veya talimatlar | Görünür etiket ve zorunluluk işareti. | Bir formda tek işaretleme yöntemi kullanın. |