Formlar

Form, kullanıcının bir alana veya alan grubuna veri girmesine olanak tanıyan bir öğedir. Formlar tek bir alan kadar basit veya sayfa başına birden fazla alan, giriş doğrulaması ve bazen CAPTCHA içeren çok adımlı bir form öğesi kadar karmaşık olabilir.

Formlar, daha önce ele aldığımız tüm öğelerin yanı sıra yalnızca formlara özgü ek kurallar hakkında bilgi gerektirdiğinden erişilebilirlik açısından doğru şekilde uygulanması en zor öğelerden biri olarak kabul edilir. 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, forma özgü yönergelere odaklanacağız. Ancak içerik yapısı, klavye odak noktası ve renk kontrastı gibi önceki modüllerde öğrendiğiniz diğer tüm yönergeler de form öğeleri için 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 küçük etkileşimli kalıplardır (ör. giriş veya radyo düğmesi öğesi). Çeşitli form alanları arasından seçim yapabilirsiniz.

Alan durumları, özellikler ve değerler gibi belirli özellikler ve işlevler HTML öğelerine doğal olarak yerleştirildiğinden, varsayılan öneri, ARIA ile özel bir şey oluşturmak yerine yerleşik HTML kalıplarını kullanmaktır. Ö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>

Uygun olduğunda en erişilebilir form alanı kalıplarını seçmenin yanı sıra alanlarınıza HTML otomatik tamamlama özellikleri de eklemeniz gerekir. Otomatik tamamlama özellikleri eklemek, kullanıcı aracıları ve yardımcı teknolojilerin (AT) amaçlarını daha ayrıntılı bir şekilde tanımlamasına veya tanımlaması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. Daha genel olarak, otomatik tamamlama özellikleri form doldurmayı daha kolay ve hızlı hale getirir. Bu özellik, özellikle bilişsel ve okuma bozukluğu olan kullanıcılar ile ekran okuyucu gibi AT 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 bu davranış hakkında uyarılmadığı sürece, form alanlarına odaklanıldığında veya kullanıcı girişi alındığında bağlamsal değişiklikler yapılmamalıdır. Örneğin, bir alan odaklandığında veya kullanıcı alana içerik eklediğinde form otomatik olarak gönderilmemelidir.

Etiketler

Etiketler, kullanıcıları alanın amacı hakkında bilgilendirir (alan zorunluysa). Ayrıca alanla ilgili giriş biçimi gibi bilgiler de sağlayabilir. Etiketler her zaman görünür olmalı ve kullanıcılara form alanını 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ı anlayamayabilir.

<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. Benzer öğeleri gruplandırmak için fieldset ve açıklama şablonunu kullanabilirsiniz.

Açıklamalar

Alan açıklamaları, alana ve şartlara daha fazla bağlam bilgisi vermek için kullanıldıkları için etiketlere benzer bir amaca sahiptir. Etiketler veya form talimatları yeterince açıklayıcıysa erişilebilirlik için alan açıklamaları gerekmez.

Ancak, form hatalarını önlemek için ek bilgi eklemenin yararlı olduğu durumlar vardır. Örneğin, bir şifre alanı için minimum giriş uzunluğu hakkında bilgi vermek veya kullanıcıya hangi takvim biçimini (ör. AA-GG-YYYY) kullanacağını söylemek gibi.

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ği 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 ettiğinizden emin olun.

Hatalar

Erişilebilir formlar oluştururken kullanıcıların form hataları yapmasını önlemek için birçok şey yapabilirsiniz. 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 aldık. Ancak formunuz ne kadar net olursa olsun, kullanıcılar zaman içinde hata yapar.

Kullanıcı bir form hatasıyla karşılaştığında ilk adım hatayı bildirmektir. Hatanın oluştuğu alan açıkça tanımlanmalı ve hata metin olarak kullanıcıya açıklanmalıdır.

Hata mesajlarını görüntüleme için farklı yöntemler vardır. Örneğin:

  • Hatanın oluştuğu yerin yakınında satır içi bir modal
  • Sayfanın üst kısmında tek bir büyük mesajda gruplandırılmış hata koleksiyonu

Hataları duyururken klavye odağına 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ı hatalardan haberdar etmek için iki özellik kullanılabilir.

  • HTML required özelliğini kullanabilirsiniz. Tarayıcı, gönderilen doğrulama parametrelerine göre genel bir hata mesajı sağlar.
  • Dilerseniz AT'lerle özelleştirilmiş bir hata mesajı paylaşmak için aria-required özelliğini de kullanabilirsiniz. İletiyi tüm kullanıcıların görebileceği şekilde göstermek için ek kod eklemediğiniz sürece iletiyi yalnızca AT'ler alır.

Kullanıcı, tüm hataların giderildiğini düşündüğünde formu yeniden göndermesine ve gönderim sonuçlarıyla ilgili geri bildirim vermesine izin verin. Hata mesajı, kullanıcıya daha fazla güncelleme yapması gerektiğini söylerken başarı mesajı, tüm hataları giderdiğini 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:

Öğrendiklerinizi test etme

Erişilebilir formlarla ilgili bilginizi test edin

Aşağıdakilerden hangisi en erişilebilir form girişidir?

Email address: <input type="email" required>
"E-posta adresi"ni girişle ilişkilendiren bir etiket yok.
<label>Email address: <input type="email" required></label>
Bu örnekte, kullanıcı aracılarına ve yardımcı teknolojilere (AT) amaç tanımlaması veya tanımlaması sunan otomatik tamamlama özelliği eksik.
<label>Email address: <input type="email" required autocomplete="email"></label>
Bu erişilebilir bir alan etiketidir ancak bu listedeki en erişilebilir etiket değildir.
<label>Email address (required): <input type="email" required aria-describedby="email-validation"> <span id="email-validation" class="validation-message">Please provide a valid email address using the format name@place.com</span></label>
aria-describedby özelliği, alan yanlış doldurulursa kullanıcının görebileceği hataya ek bağlam bilgisi ekler. Bu özellik gerekli olmamakla birlikte AT kullanıcıları için yararlı olabilir.