Formlar

Form, kullanıcının bir alana veya gruba veri sağlamasına olanak tanıyan öğelerdir sağlayabilir. Formlar tek bir alan gibi basit olabileceği gibi sayfa başına birden fazla alan, giriş doğrulaması ve CAPTCHA'yı deneyin.

Formlar, bir açılış sayfasına yönlendirmenin en zor ve erişilebilirlik açısından her şeyden haberdar ve yalnızca formlara özel ek kuralları ele aldık. Biraz anladığınızda, size ve ekibinize uygun, erişilebilir bir form yardımcı olur.

Formlar, bu kursun bileşenine özel son modüldür. Bu modülde forma özgü yönergelere odaklanmaz, ancak öğrendiğiniz dersler, sunumlar ve daha fazlası içerik yapısını, klavye odağı ve renk kontrastı, formlara da uygulanır. öğeler.

Alanlar

Formların bel kemiği alanlardır. Alanlar, kullanıcıların içerik girmelerine veya yayın oluşturmalarına olanak tanıyan bir giriş veya radyo düğmesi öğesi seçim. Kayıtlar için çok çeşitli form alanları vardır seçim yapın.

Varsayılan öneri, ARIA ile özel bir şey yaratmak, bu sayede belirli özellikleri ve alan durumları, özellikler ve değerler gibi işlevler, doğası gereği yerleşik olarak bulunur, ancak manuel olarak özel ARIA eklemeniz gerekir.

<div role="form" id="sundae-order-form">
  <!-- form content -->
</div>

<form id="sundae-order-form">
  <!-- form content -->
</form>

En erişilebilir form alanı kalıplarını seçmeye ek olarak varsa, HTML otomatik tamamlama özellikleri kullanabilirsiniz. Otomatik tamamlama özellikleri eklemek, amacın tanımı veya tanımlanması kullanıcı aracılarına ve yardımcı teknolojilere (AT) izin verir.

Otomatik tamamlama özellikleri, kullanıcıların görsel sunuları kişiselleştirmesine olanak tanır. Örneğin, doğum günü otomatik tamamlama özelliğinin bulunduğu bir alanda doğum günü pastası simgesi göstermek özelliği (bday) atandı. Daha genel olarak ifade etmek gerekirse, otomatik tamamlama özellikleri daha kolay ve hızlı bir şekilde doldurabilirsiniz. Bu, özellikle dönüşüm hunisinin bilişsel ve okuma bozuklukları olan ve ekran gibi AT kullananlar okuyucular.

<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, form alanları web sitenizin URL'sini kullanıcı daha önce bu davranışla ilgili uyarı alınmamışsa odaklama veya kullanıcı girişi veya bileşeni kullanabilirsiniz. Örneğin, formlar otomatik olarak gönderilmemelidir. Bir alan odaklanıldığında veya kullanıcı alana içerik eklediğinde.

Etiketler

Etiketler, kullanıcıyı bir alanın amacı hakkında bilgilendirir (alan zorunluysa ve ve alan koşulları hakkında bilgi sağlar. Örneğin, biçimindedir. Etiketler her zaman görünür olmalıdır ve formu doğru şekilde tanımlamalıdır. alanını kullanıcılara göstermek.

Erişilebilir biçimlerin temel ilkelerinden biri, alan ve etiketi arasındaki doğru bağlantıyı sağlar. Bu hem görsel açıdan hem de iş birliği içinde çalışır. Bu bağlam olmadan, kullanıcı bir şeyi nasıl formdaki alanları doldurun.

<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 alakalı form alanlarının programatik ve görsel olarak gruplandırılmıştır. Yöntemlerden biri alan kümesini/açıklamasını kullanmaktır kullanarak benzer öğeleri gruplandırabilirsiniz.

Açıklamalar

Alan açıklamaları, belli bir amaçla kullanımları açısından etiketlere benzer. alanı ve koşulları daha iyi anlamanızı sağlar. Alan açıklamaları Etiketler veya form talimatları açıklayıcıysa erişilebilirlik için gereklidir yeterli.

Ancak, ek bilgi eklemenin yararlı olduğu durumlar da vardır ve bir şifre alanına giriş yapılması veya kullanıcıya hangi takvim biçiminin kullanılacağının söylenmesi (örneğin, AA-GG-YYYY biçiminde).

Projenize alan açıklamaları eklemek için kullanabileceğiniz birçok oluşturabilirsiniz. En iyi yöntemlerden biri, arya-devrimi özelliğini <label> öğesine ek olarak form öğesine bağlayabilirsiniz. Ekran hem açıklamayı hem de etiketi okur.

Bir aria-labelledby özelliğini eklerseniz özellik değeri, <label>. Her zaman olduğu gibi, nihai kodu, eklediğiniz tüm AT'lerle test ettiğinizden planlarsınız.

Hatalar

Erişilebilir formlar oluştururken kullanıcıların hale getirebilirsiniz. Bu modülün başlarında, reklam öğesi oluştururken satın alma işlemini tanımlayıcı etiketler oluşturarak ve belirli durumlarda ayrıntılı açıklamalar ekleyerek yapmasını sağlar. Formunuz ne kadar anlaşılır olursa olsun, en sonunda hata yapacaktır.

Kullanıcı bir form hatasıyla karşılaştığında ilk olarak hatayı bildirin. Hatanın oluştuğu alan açıkça belirtilmeli ve hata kullanıcıya metinle açıklanmalıdır.

Görüntüleme hatası için farklı yöntemler vardır mesajlar bölümünde bulabilirsiniz. Örneğin:

• Hatanın oluştuğu yerin yakınındaki satır içi bir pop-up penceresi
• Sayfanın en üstündeki daha büyük bir mesajda gruplandırılmış hata koleksiyonu

Klavye odağına dikkat ettiğinizden emin olun ve ARIA canlı bölge seçenekleri dikkat edin.

Mümkün olduğunda, kullanıcıya sorunun nasıl düzeltileceği hakkında ayrıntılı bir öneride bulunun. hatası. Kullanıcılara hataları bildirmek için kullanılabilecek iki özellik vardır.

• HTML gerekli özelliğini kullanabilirsiniz. Tarayıcı, girilen doğrulama parametrelerine dayalı olarak genel bir hata mesajı sağlar.
• Alternatif olarak, AT'lerle özelleştirilmiş bir hata mesajı paylaşmak için aria-required özelliğini kullanabilirsiniz. Mesajı tüm kullanıcılara görünür hale getirecek ek bir kod eklemediğiniz sürece mesajı yalnızca AT'ler alır.

Kullanıcı tüm hataların çözüldüğünü düşünüyorsa yeniden göndermelerine izin verin ve gönderimlerinin sonuçları hakkında geri bildirim sağlamalıdır. 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.

Öğrendiklerinizi sınayın

Erişilebilir formlar hakkındaki bilginizi test edin