Form, kullanıcının bir alana veya alan grubuna veri girmesine olanak tanıyan bir öğedir. Formlar tek bir alan veya sayfa başına birden fazla alan, giriş doğrulama ve CAPTCHA içeren karmaşık, çok adımlı bir form olabilir.
Formlar, erişilebilirlik açısından doğru şekilde oluşturulması en zor öğelerden biri olarak kabul edilir. Bunun nedeni, formların hem daha önce ele aldığımız tüm öğelerle ilgili bilgi hem de yalnızca formlara özgü ek kurallar gerektirmesidir. Biraz bilgi ve zamanla, size ve kullanıcılarınıza uygun erişilebilir bir form oluşturabilirsiniz.
Formlar, bu kurstaki bileşene özel son modüldür. Bu modülde, formlara özgü yönergelere odaklanılmaktadır. Ancak önceki modüllerde yer alan içerik yapısı, klavye odağı ve renk kontrastı gibi yönergeler, form öğeleri için de geçerlidir.
Alanlar
Formların temelini alanlar oluşturur. Alanlar, kullanıcıların içerik girmesine veya seçim yapmasına olanak tanıyan, giriş ya da radyo düğmesi öğesi gibi küçük etkileşimli kalıplardır. Seçebileceğiniz çok çeşitli form alanları vardır.
Alan durumları, özellikler ve değerler gibi belirli özellikler ve işlevler HTML öğelerine doğal olarak yerleştirildiğinden, ARIA ile özel bir şey oluşturmak yerine yerleşik HTML kalıplarını kullanmanız önerilir. Özel alanlar için ARIA'yı manuel olarak eklemeniz gerekir.
Önerilmez: ARIA ile özel HTML
<div role="form" id="sundae-order-form">
<!-- form content -->
</div>
Önerilen: Standart HTML
<form id="sundae-order-form">
<!-- form content -->
</form>
Mümkün olduğunda en erişilebilir form alanı kalıplarını seçmenin yanı sıra alanlarınıza HTML otomatik tamamlama özellikleri de eklemelisiniz. Otomatik tamamlama özellikleri eklemek, kullanıcı aracılarına ve yardımcı teknolojilere (AT) daha ayrıntılı bir amaç tanımı veya tanımlaması yapılmasına olanak tanır.
Otomatik tamamlama özellikleri, kullanıcıların görsel sunumları kişiselleştirmesine olanak tanır. Örneğin, doğum günü otomatik tamamlama özelliği (bday) atanmış bir alanda doğum günü pastası simgesi gösterilebilir. Genel olarak, otomatik tamamlama özellikleri form doldurmayı daha kolay ve hızlı hale getirir. Bu özellik, özellikle bilişsel ve okuma bozuklukları olan kişiler ile ekran okuyucular gibi yardımcı teknolojileri kullananlar için faydalıdır.
<form id="sundae-order-form">
<p>Name: <input type="name" autocomplete="name"></p>
<p>Telephone: <input type="tel" autocomplete="tel"></p>
<p>Email address: <input type="email" autocomplete="email"></p>
</form>
Son olarak, kullanıcı bileşeni kullanmadan önce davranış konusunda uyarılmadığı sürece, odak veya kullanıcı girişi aldıklarında form alanları bağlamsal değişikliklere neden olmamalıdır. Örneğin, bir alan odaklandığında veya kullanıcı alana içerik eklediğinde form otomatik olarak gönderilmemelidir.
Etiketler
Etiketler, bir alanın amacı, alanın zorunlu olup olmadığı hakkında kullanıcıyı bilgilendirir ve giriş biçimi gibi alan gereksinimleri hakkında da bilgi verebilir. Etiketler her zaman görünür olmalı ve form alanını kullanıcılara doğru şekilde açıklamalıdır.
Erişilebilir formların temel ilkelerinden biri, bir alan ile etiketi arasında net ve doğru bir bağlantı oluşturmaktır. Bu durum hem görsel hem de programatik olarak geçerlidir. Bu bağlam olmadan kullanıcı, formdaki alanları nasıl dolduracağını anlamayabilir.
<form id="sundae-order-form">
<p><label>Name (required): <input type="name" autocomplete="name" required></label></p>
<p><label>Telephone (required): <input type="tel" autocomplete="tel" required></label></p>
<p><label>Email address: <input type="email" autocomplete="email"></label></p>
</form>
Ayrıca, posta adresi gibi ilgili form alanlarının programatik ve görsel olarak gruplandırılması gerekir. Bir yöntem, benzer öğeleri gruplandırmak için fieldset ve legend kalıbını kullanmaktır.
Açıklamalar
Alan açıklamaları, alana ve gereksinimlere daha fazla bağlam sağlamak için kullanıldığından amaç bakımından etiketlere benzer. Etiketler veya form talimatları yeterince açıklayıcıysa erişilebilirlik için alan açıklamaları zorunlu değildir.
Ancak, form hatalarını önlemek için ek bilgi eklemenin yararlı olduğu durumlar vardır. Örneğin, şifre alanı için girişin minimum uzunluğu hakkında bilgi vermek veya kullanıcıya hangi takvim biçimini kullanacağını söylemek (ör. AA-GG-YYYY).
Formlarınıza alan açıklamaları eklemek için kullanabileceğiniz birçok farklı yöntem vardır. En iyi yöntemlerden biri, <label> öğesine ek olarak form öğesine aria-describedby özelliğini eklemektir. Ekran okuyucu hem açıklamayı hem de etiketi okur.
Öğenize aria-labelledby özelliğini eklerseniz özellik değeri, <label> içindeki metni geçersiz kılar. Her zaman olduğu gibi, nihai kodu desteklemeyi planladığınız tüm AT'lerle test edin.
Hatalar
Erişilebilir formlar oluştururken kullanıcıların form hataları yapmasını önlemek için yapabileceğiniz birçok şey vardır. Bu modülün önceki bölümlerinde, alanları net bir şekilde işaretleme, tanımlayıcı etiketler oluşturma ve mümkün olduğunda ayrıntılı açıklamalar ekleme konularını ele almıştık. Ancak formunuzun ne kadar net olduğunu düşünürseniz düşünün, sonunda bir kullanıcı hata yapacaktır.
Bir kullanıcı form hatasıyla karşılaştığında ilk adım hatayı bildirmektir. Hataya neden olan alan açıkça belirtilmeli ve hata, kullanıcıya metin olarak açıklanmalıdır.
Hata mesajlarını görüntülemek için farklı yöntemler vardır. Örneğin:
- Hatanın oluştuğu yere yakın bir yerde satır içi olarak gösterilen modal
- Sayfanın üst kısmında daha büyük bir mesajda gruplandırılmış hata koleksiyonu
Hataları duyururken klavye odağı ve ARIA canlı bölge seçeneklerine dikkat edin.
Mümkün olduğunda kullanıcıya hatayı nasıl düzelteceğiyle ilgili ayrıntılı bir öneri sunun. Kullanıcıları hatalar konusunda bilgilendirmek için iki özellik kullanılabilir.
- HTML required özelliğini kullanabilirsiniz. Tarayıcı, dosya doğrulama parametrelerine göre genel bir hata mesajı sağlar.
- Alternatif olarak, AT'lerle özelleştirilmiş bir hata mesajı paylaşmak için aria-required özelliğini kullanabilirsiniz. Bu mesajı, tüm kullanıcılara görünür hale getirmek için kod eklemediğiniz sürece yalnızca AT'ler alır.
Kullanıcı tüm hataların giderildiğini düşündüğünde formu yeniden göndermesine ve gönderiminin sonuçlarıyla ilgili geri bildirimde bulunmasına izin verin. Hata mesajı, kullanıcının yapması gereken başka güncellemeler olduğunu belirtir. Başarı mesajı ise kullanıcının tüm hataları çözdüğünü ve formu başarıyla gönderdiğini onaylar.
Ek başarı ölçütleri
WCAG 2.2, daha erişilebilir form deneyimlerine odaklanan aşağıdaki başarı ölçütlerini kullanıma sundu:
- Hedef Boyutu (Minimum)
- Tutarlı Yardım (Consistent Help)
- Erişilebilir Kimlik Doğrulama
- Gereksiz Giriş (Redundant Entry).