Oluşturduğunuz form insanlar içindir. Kullanıcılar farklı cihazlar kullanır. Kimi fare, kimi dokunmatik cihaz, bazıları klavye, göz hareketleriyle kontrol edilen bir araç. Bazıları ekran okuyucu, bazıları küçük ekran, bazıları ise metin büyütme yazılımı kullanır. Herkes formunuzu kullanmak ister. Formunuzu herkes için nasıl erişilebilir ve kullanılabilir hale getireceğinizi öğrenin.
Kullanıcıların form alanının amacını anlamasını sağlayın
Seçebileceğiniz çok sayıda form denetimi vardır.
Hepsinin ortak özelliği nedir?
Her form kontrolünde ilişkili bir <label> öğesi olmalıdır.
<label> öğesi, form kontrolünün amacını açıklar.
<label> metni, form kontrolüyle görsel olarak ilişkilendirilir ve ekran okuyucular tarafından okunur.
Ayrıca, <label> simgesine dokunulduğunda veya tıklandığında ilişkili form kontrolü,
daha büyük bir hedef haline getirir.
Yerleşik tarayıcı özelliklerine erişmek için anlamlı HTML kullanın
Teoride yalnızca <div> öğeleri kullanarak bir form oluşturabilirsiniz.
Hatta bunun yerel bir <form> gibi görünmesini bile sağlayabilirsiniz.
anlamsız öğeler mi?
Yerleşik form öğeleri birçok yerleşik özellik sağlar. Şimdi bir örnek inceleyelim.
Görsel olarak, <input> (örnekteki ilki) ve <div> aynı görünüyor.
<div> öğesinin bir alanı olduğundan her ikisi için de metin ekleyebilirsiniz
contenteditable özelliğiyle birlikte kullanılamaz.
Buna rağmen, uygun bir <input> öğesi kullanmakla <div> kullanmak arasında birçok fark vardır.
<input> gibi görünüyor.
Ekran okuyucu kullanıcısı <div> öğesini giriş öğesi olarak tanımıyorsa
veya formu dolduramaz.
Ekran okuyucu kullanıcısının duyduğu yalnızca "Ad",
öğesinin metin eklemeye yönelik bir form kontrolü olduğuna dair herhangi bir gösterge yoktur.
<div>Name</div> tıklandığında, onunla birlikte gelen <div> işaretlenmez, <label> ve
<input>, for ve id özellikleri kullanılarak bağlanır.
Form gönderildikten sonra, <div> bölümüne girilen veriler talebe dahil edilmez.
Verileri JavaScript ile eklemek mümkün olsa da,
<input> bunu varsayılan olarak yapar.
Yerleşik form öğelerinin başka özellikleri de vardır.
Örneğin, uygun form öğeleri ve doğru inputmode veya type ile
dokunmatik klavyede uygun karakterler gösteriliyor. <div> cihazında inputmode özelliğini kullanma
bunu yapamaz.
Kullanıcıların beklenen veri biçimi hakkında bilgi sahibi olduklarından emin olun
Bir form kontrolü için çeşitli doğrulama kuralları tanımlayabilirsiniz.
Örneğin, bir form alanının her zaman en az sekiz karakter içermesi gerektiğini varsayalım.
Tarayıcılara doğrulama kuralını belirten minlength özelliğini kullanırsınız.
Kullanıcıların doğrulama kuralından da haberdar olmasını nasıl sağlayabilirsiniz? Anlatın.
Beklenen biçimle ilgili bilgileri form kontrolünün hemen altına ekleyin.
Yardımcı cihazlar için açıklığa kavuşturmak üzere
form kontrolünde aria-describedby özelliğini kullanın,
ve hata mesajında aynı değere sahip id bulunur.
Kullanıcıların form denetimiyle ilgili hata mesajını bulmasına yardımcı olun
Doğrulama ile ilgili önceki modülde geçersiz veri girişi durumunda hata mesajlarını nasıl göstereceğinizi öğrendiniz.
<label for="name">Name</label>
<input type="text" name="name" id="name" required>
Örneğin, bir alanda required özelliği varsa ve geçersiz veri girilirse tarayıcı
form gönderildiğinde form kontrolünün yanında bir hata mesajı gösterilir. Ekran okuyucular da hata mesajını duyurur.
Kendi hata mesajınızı da tanımlayabilirsiniz:
Bu örnekte, hata mesajının form denetimine bağlanması için daha fazla değişiklik yapılması gerekiyor.
aria-describedby, basit bir yaklaşım olarak
özelliğini gönderin.id
Ardından, hata mesajı için aria-live="assertive" değerini kullanın.
ARIA canlı bölgeleri, hatanın gösterildiği anda ekran okuyucu kullanıcılarına bir hata bildirir.
Birden çok alanı olan formlarda bu yaklaşımın sorunu,
aria-live, birden fazla hata olması durumunda genellikle yalnızca ilk hatayı duyurur.
Aynı işlemdeki birden fazla aria-live duyurusuyla ilgili bu makalede açıklandığı gibi, tüm hataları bir araya getirerek tek bir mesaj oluşturabilirsiniz. Başka bir yaklaşım da hatalar olduğunu duyurmak ve ardından alan odaklanıldığında hataları tek tek duyurmaktır.
Kullanıcıların hataları tanımasını sağlama
Tasarımcılar bazen geçersiz durumu kırmızıya,
:invalid sözde sınıfını kullanır.
Ancak bir hatayı veya başarıyı bildirmek için
hiçbir zaman
renge güvenmemelisiniz.
Kırmızı-yeşil renk körlüğü olan kişiler
yeşil ve kırmızı kenarlık neredeyse aynı görünüyor.
İletinin bir hatayla ilgili olup olmadığını görmek mümkün değildir.
Renk kullanımına ek olarak bir simge kullanın veya hata iletilerinize önek olarak hata türünü ekleyin.
<span class="error">
<strong>Error:</strong>Please use at least eight characters.
</span>
Kullanıcıların formunuzda gezinmelerine yardımcı olun
Form kontrollerinin görsel sırasını CSS ile değiştirebilirsiniz. Görsel sıra ile klavyeyle gezinme arasında bağlantı kesilmesi (DOM sırası) ekran okuyucu ve klavye kullanıcıları açısından sorunludur.
Paydaşların beklentilerinin karşılanıp karşılanmayacağı sayfadaki görsel sıra DOM sırasını takip eder.
Kullanıcıların, halihazırda odaklanılan form kontrolünü belirlemelerine yardımcı olur
Gezinmek için klavyenizi kullanın
bu formu doldurun.
Form kontrolleri etkinleştirildikten sonra stilinin değiştiğini biliyor muydunuz?
Bu, varsayılan odaklama stilidir.
Bunu,
:focus CSS sözde sınıfı.
:focus içinde hangi stilleri kullanırsanız kullanın,
her zaman varsayılan durum ile odak durumu arasındaki görsel farkın tanınabilir olduğundan emin olun.
Daha fazla bilgi: odak göstergeleri tasarlamak için de kullanılabilir.
Formunuzun kullanılabilir olduğundan emin olma
Formunuzu farklı cihazlarla doldurarak sık karşılaşılan birçok sorunu belirleyebilirsiniz. Sadece klavyenizi kullanın, bir ekran okuyucu (örneğin, Windows veyaNVDA VoiceOver) veya sayfayı %200 yakınlaştırın. Formlarınızı her zaman farklı platformlarda test edin, özellikle de her gün kullanmadığınız cihazlar veya ayarlar var. Ekran okuyucu kullanan ve veya metin büyütme yazılımı kullanan birileri mi? Formunuzu doldurmalarını isteyin. Erişilebilirlik incelemeleri harikadır, gerçek kullanıcılarla test yapmak daha da iyidir.
Şu işlemleri gerçekleştirme hakkında daha fazla bilgi edinin: erişilebilirlik incelemesi ve gerçek kullanıcılarla test yapmanın yollarını öğreneceksiniz.