form-izi: erişilebilir form doğrulama
Hata mesajlarını doğru alana bağlayan ve ekran okuyucuya Türkçe duyuran 4 KB'lık bir form doğrulama katmanı yazdım.
- Yıl
- 2023
- Rol
- Yazar ve bakımcı
- Müşteri
- Açık kaynak kişisel proje
- Teknoloji
- TypeScript, ARIA
Bağlam
Türkçe arayüzlerde form hataları çoğunlukla sayfanın üstünde kırmızı bir kutu olarak çıkar ve hangi alanla ilgili olduğu ekran okuyucuya söylenmez. form-izi, bu sorunu çözmek için yazdığım küçük bir açık kaynak kütüphane. Bir formu izler, hatayı doğru alana aria-describedby ile bağlar, alanı aria-invalid ile işaretler ve hata özetinden ilk hatalı alana odak taşır.
Tasarım kararları
- Bağımlılık yok; sıkıştırılmış hali 4 KB civarında.
- Mesajlar varsayılan olarak Türkçe ve tarih biçimi GG.AA.YYYY.
- Doğrulama, kullanıcı alanı terk ettiğinde başlar; yazarken hata göstermez.
Test
Birim testleri Vitest ile, gerçek tarayıcı davranışı Playwright ile sınanıyor. Her sürümden önce NVDA ve VoiceOver ile elle bir tur atıyorum, çünkü otomatik testler duyurunun gerçekten okunup okunmadığını söylemiyor.
Durum
Kütüphane kararlı sürümde. Şu sıralar tarih alanı için gün, ay ve yılı ayrı alanlarda soran bir bileşen üzerinde çalışıyorum.
Yazan: Ece Tunalı. Son güncelleme: