Formlarda Zorunlu Alanlar Nasıl İşaretlenir?

Bir alanın zorunlu olduğu bilgisi formda üç ayrı yere söylenir: kullanıcının gözüne, ekran okuyucuya ve doğrulama katmanına. Çoğu formda yalnızca ilki yapılıyor, label'ın yanına kırmızı bir yıldız konup geçiliyor. Üçü aynı kaynaktan beslenmediğinde işaret ile kuralın kendisi ayrışır, aradaki farkı da ilk olarak kullanıcı görür.

Yıldız gözle tarama içindir

Kırmızı yıldız web'de yerleşmiş bir işaret, anlamını ayrıca açıklamaya gerek kalmıyor. İşi de dar: kullanıcı formu yukarıdan aşağı tararken hangi satırları atlayamayacağını tek geçişte görsün. Bu yüzden yıldızın yeri label metninin hemen yanı. Sol hizalı etiket kolonunda metnin başına konduğunda yıldızlar dikey bir çizgi oluşturur, tarama hızlanır.

İşareti işlevsiz bırakan şey genellikle renk. Açık gri ya da ince bir yıldız düşük görüşlü kullanıcıda kaybolur, kırmızı-yeşil ayırt edemeyen kullanıcıda ise kırmızılık hiç ulaşmaz. Yıldız da metin sayıldığı için 4.5:1 kontrast alt sınırı ona işler, rengin tek taşıyıcı olmaması da buna ek bir şart.

Bir de yıldızı placeholder'ın içine koymak var. Kullanıcı yazmaya başladığı anda kayboluyor, yani tam hata yapmaya en yakın olduğu yerde ortadan çekiliyor. İşaret label'da, alanın dışında durur.

Ekran okuyucuya zorunluluk nasıl geçer

Ekran okuyucu label'daki yıldızı ya hiç okumaz ya da "yıldız" diye okur; ikisi de kullanıcıya alanın zorunlu olduğunu söylemiyor. O bilgi işaretten değil nitelikten gelir: required konulduğunda yardımcı teknoloji alanı gerekli olarak duyurur. Kendi yazdığınız bir bileşende, yani ortada gerçek bir input yoksa, karşılığı aria-required="true".

<label for="eposta"><span aria-hidden="true">*</span> E-posta</label> <input id="eposta" type="email" name="eposta" required>

Yıldızı aria-hidden içine almak ilk bakışta gereksiz duruyor. Olmadığında etiket her odaklanmada "yıldız e-posta, gerekli" diye okunuyor. İşaret göz için, nitelik ekran okuyucu için; ikisinin üst üste binmesine gerek yok.

Tarayıcının kendi doğrulaması araya girer

required yalnızca anlam taşımıyor, tarayıcının yerleşik doğrulamasını da açıyor. Alan boş gönderildiğinde tarayıcı kendi baloncuğunu gösterir: metnini siz yazmazsınız, dilini tarayıcı seçer, biçimine CSS ile dokunamazsınız. Kendi hata mesajlarınız varsa aynı anda iki mekanizma çalışır ve kullanıcı hangisine bakacağını bilemez.

Çözüm niteliği silmek değil. Formun kendisine novalidate koyun, required yerinde kalsın. Tarayıcı araya girmez, ekran okuyucu zorunluluğu duyurmaya devam eder, hata akışını siz yönetirsiniz.

İşaret ile kural tek yerden gelsin

Yıldızı label'a elle yazmak en kolay yol ve en kırılgan yer. Zorunluluk kuralı değiştiğinde iki ayrı yerde değişmesi gerekiyor, biri atlanıyor. Bir projede alanın zorunluluğu kaldırıldı, label'daki yıldız üç ay öylece kaldı ve kimse fark etmedi.

Yıldızı niteliğin kendisinden üretmek bu kaymayı kapatır:

.alan:has(:required) label::after { content: " *"; color: #b02a1f; }

Bedeli de var: CSS ile üretilen içeriğe aria-hidden verilemiyor ve bazı ekran okuyucular onu okuyor, yani az önce susturulan "yıldız" geri geliyor. Yine de tek kaynak daha güvenli. Fazladan okunan bir kelime kullanıcıyı rahatsız eder, yerinde kalmış yanlış bir yıldız ona yanlış bilgi verir.

Zorunlu mu işaretlenir, opsiyonel mi

Yaygın tavsiye her zorunlu alanı işaretlemek ve çoğu form için doğru olan bu. Ama on alanın dokuzu zorunluysa yıldız duvar kâğıdına dönüşüyor; her satırda bulunan bir işaret hiçbir satırı ayırt etmez. Orada yön tersine çevrilir: form başına bir kez "aksi belirtilmedikçe tüm alanlar zorunlu" yazılır, istisnalar etiketin yanında "(isteğe bağlı)" diye metinle gösterilir.

Bu kararın tamamı görsel katmanla ilgili. required her zorunlu alanda kalmaya devam eder, çünkü ekran okuyucu formun en başında bir kez geçen o cümleyi kullanıcı alana geldiğinde hatırlatmıyor.

Giriş formu istisnası

İki alanlı bir giriş formunda yıldız bilgi taşımaz, kullanıcı adının ve şifrenin gerektiğini kullanıcı zaten biliyor. Görsel işaret atlanabilir, nitelik yine durur. Kayıt formu aynı şey değil: orada kullanıcıdan ne istendiği her alanda yeniden öğrenilir, zorunluluk da görünür olmak zorunda.