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.
ARIA
<div role="form" id="sundae-order-form"> <!-- form content --> </div>
HTML
<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
Aşağıdaki yanıtlardan hangisi en erişilebilir form girişidir?
Email address: <input type="email" required>
<label>Email address: <input type="email" required></label>
<label>Email address: <input type="email" required autocomplete="email"></label>
<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>