Form, kullanıcının bir alana veya alan grubuna veri sağlamasına olanak tanıyan öğelerdir. Formlar, tek bir alan kadar basit veya sayfa başına birden fazla alan, giriş doğrulaması ve bazen CAPTCHA bulunan ç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 özel ek kurallar bilmeyi gerektirdiği için, erişilebilirlik açısından bakılması en zor öğelerden biri olarak kabul edilir. Biraz anlayış ve zaman ayırarak, kendinize 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 odaklanılacaktır. Ancak içerik yapısı, klavye odağı ve renk kontrastı gibi önceki modüllerde öğrendiğiniz diğer tüm yönergeler, form öğeleri için de geçerlidir.
Alanlar
Formların bel kemiği alanlardır. Alanlar, kullanıcıların içerik girmelerine veya seçim yapmalarına olanak tanıyan giriş ya da radyo düğmesi öğesi gibi küçük etkileşimli kalıplardır. Çok çeşitli form alanları arasından seçim yapabilirsiniz.
Varsayılan öneri, ARIA ile özel bir şey oluşturmak yerine, yerleşik HTML kalıplarının kullanılmasıdır. Belirli özellik ve işlevler (ör. alan durumları, özellikler ve değerler) yapısı gereği HTML öğelerinde yerleşik olarak bulunur ancak özel ARIA'yı manuel olarak eklemeniz gerekir.
ARIA
<div role="form" id="sundae-order-form"> <!-- form content --> </div>
HTML
<form id="sundae-order-form"> <!-- form content --> </form>
Uygun durumlarda, 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ına ve yardımcı teknolojilere (AT) daha ayrıntılı bir amacın tanımlanmasını veya tanımlanmasını sağlar.
Otomatik tamamlama özellikleri, kullanıcıların görsel sunumları kişiselleştirmelerine olanak tanır. Örneğin, doğum günü otomatik tamamlama özelliğinin (bday) atanmış olduğu bir alanda doğum günü pastası simgesi gösterilebilir. Daha genel olarak, otomatik tamamlama özellikleri formların
doldurulmasını daha kolay ve hızlı hale getirir. Bu yöntem, özellikle bilişsel ve okuma bozuklukları olan ve ekran
okuyucu gibi AT kullanan kişiler 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ış hakkında uyarılmadığı sürece form alanları, odak veya kullanıcı girişi aldığında bağlamsal değişiklikler oluşturmamalıdır. Örneğin, bir alana odaklanıldığında veya bir kullanıcı alana içerik eklediğinde form otomatik olarak gönderilmemelidir.
Etiketler
Etiketler, alan gerekliyse kullanıcıyı bir alanın amacı hakkında bilgilendirir ve giriş biçimi gibi alan gereksinimleri hakkında bilgi de sağlayabilir. Etiketler her zaman görünür olmalı ve form alanını kullanıcılara doğru bir şekilde açıklamalıdır.
Erişilebilir biçimlerin temel ilkelerinden biri, alan ile etiketi arasında açık ve doğru bir bağlantı kurmaktır. Bu, hem görsel olarak hem de programatik olarak geçerlidir. Bu bağlam olmadan kullanıcılar 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. Yöntemlerden biri, benzer öğeleri gruplandırmak için fieldset/legend kalıbını kullanmaktır.
Açıklamalar
Alan açıklamaları, alana ve gereksinimlere daha fazla bağlam sunmak için kullanılması açısından etiketlere benzer. Etiketler veya form talimatları yeterince açıklayıcıysa erişilebilirlik için alan açıklamaları gerekli değildir.
Bununla birlikte, bir şifre alanı için minimum giriş uzunluğuyla ilgili bilgi aktarma veya kullanıcıya hangi takvim biçiminin kullanılacağını (ör. AA-GG-YYYY) bildirme gibi form hatalarını önlemek için ek bilgi eklemenin faydalı olduğu durumlar vardır.
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 bir 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, son 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 yapabileceğiniz pek çok şey vardır. Bu modülün başlarında, alanları açıkça işaretlemeyi, etiketler oluşturmayı ve mümkün olduğunda ayrıntılı açıklamalar eklemeyi ele aldık. Ancak formunuz ne kadar anlaşılır olursa olsun, sonuçta kullanıcı hata yapacaktır.
Bir kullanıcı form hatasıyla karşılaştığında ilk adım, hatayı bildirmektir. Hatanın oluştuğu alan açıkça tanımlanmalı ve hatanın kendisi kullanıcıya metin içinde açıklanmalıdır.
Hata mesajlarını görüntülemek için kullanabileceğiniz farklı yöntemler vardır. Örneğin:
- Hatanın oluştuğu yerin yakınında satır içinde bir pop-up pencere
- Sayfanın üst kısmındaki büyük bir iletide gruplandırılmış bir hata koleksiyonu
Hataları duyururken klavye odağına ve ARIA canlı bölge seçeneklerine dikkat edin.
Mümkün olduğunda kullanıcıya hatanın nasıl düzeltileceğine dair ayrıntılı bir öneri sunun. Kullanıcılara hataları bildirmek için kullanılabilecek iki özellik vardır.
- HTML zorunlu özelliğini kullanabilirsiniz. Tarayıcı, gönderilen doğrulama parametrelerine göre genel bir hata mesajı sağlar.
- Alternatif olarak, özelleştirilmiş bir hata mesajını AT'lerle paylaşmak için aria-required özelliğini kullanabilirsiniz. Mesajın tüm kullanıcılara görünür olması için ek kod eklemediğiniz sürece mesajı yalnızca AT'ler alır.
Bir kullanıcı tüm hataların çözüldüğünü düşündüğünde formu yeniden göndermelerine ve gönderim sonuçları hakkında geri bildirim vermelerine izin verin. Hata mesajı, kullanıcıya yapması gereken daha fazla güncelleme olduğunu söyler. Başarılı mesajı ise tüm hataları çözdüğünü ve formu başarıyla gönderdiğini onaylar.
Öğrendiklerinizi sınayın
Erişilebilir formlarla ilgili 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>