Bileşenler
Form
Gönderirken alanları denetleyen, sorunları bağlantılı bir özetle gösteren ve odağı özete taşıyan form.
- Storybook
- Storybook
- Kaynak kod
- Kaynak kod
Rol ve anlam
Bölüm başlığı “Rol ve anlam”Form yerel bir form öğesidir; aria-label ya da aria-labelledby ile adlandırılabilir. Tarayıcı balonları yerine (noValidate) özet kullanılır. Özet role="alert" taşır ve odak alır; her sorun alanın kimliğine giden bir bağlantıdır ve “Etiket: mesaj” olarak okunur.
Klavye
Bölüm başlığı “Klavye”| Tuş | Davranış |
|---|---|
| Enter | Bir metin alanındayken formu gönderir. |
| Tab | Özetten bağlantılara, sonra alanlara. |
| Enter (bağlantıda) | Alana gider ve odaklar. |
Durdurulan gönderimde odak özete gider (tabIndex="-1"). summary={false} ile ilk geçersiz alana gider. Bağlantı kullanıldığında alan odaklanır ve görünür alana kaydırılır.
Ekran okuyucu
Bölüm başlığı “Ekran okuyucu”| Örnek | Okunan |
|---|---|
| Özet | “Devam etmek için 2 alanı düzeltin, liste, 2 öğe” |
| Bağlantı | “E-posta: Geçerli bir e-posta adresi girin., bağlantı” |
Kontrast
Bölüm başlığı “Kontrast”Özet metni tehlike arka planı üzerinde 4,5:1, kenarlık 3:1 kontrast taşır.
WCAG 2.2
Bölüm başlığı “WCAG 2.2”| Ölçüt | Form nasıl karşılar | Ürün ekibi ne yapmalı |
|---|---|---|
| 3.3.1 Hata tanımlama | Her sorun etiketiyle listelenir. | Alanlara da error verin. |
| 3.3.3 Hata önerisi | Mesajlar alanlardan gelir. | Mesajları çözüm olarak yazın. |
| 2.4.3 Odak sırası | Odak özete, oradan alanlara. | — |
| 4.1.3 Durum mesajları | Özet role="alert". |
— |