Ürettiğiniz form insanlar içindir. Kullanıcılar farklı cihazlar kullanır. Bazıları fare, bazıları dokunmatik cihaz, bazıları klavye, bazıları da göz hareketleriyle kontrol edilen bir cihaz kullanır. 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 erişilebilir ve kullanılabilir hale nasıl getireceğinizi öğrenin.
Kullanıcıların form alanının amacını anlamalarını sağlama
Seçebileceğiniz birçok form denetimi vardır.
Bu rollerin ortak özelliği nedir?
Her form kontrolünün ilişkilendirilmiş 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> öğesine dokunduğunuzda veya tıkladığınızda ilgili form denetimine odaklanılır ve böylece daha büyük bir hedef haline gelir.
Yerleşik tarayıcı özelliklerine erişmek için anlamlı HTML kullanın
Teoride, yalnızca <div> öğelerini kullanarak bir form oluşturabilirsiniz.
Hatta yerel <form> gibi görünmesini de sağlayabilirsiniz.
Anlamsal olmayan öğeleri kullanmanın sakıncası nedir?
Yerleşik form öğeleri birçok yerleşik özellik sağlar. Bir örnekle açıklayalım.
Görsel olarak, <input> (örnekteki ilk öğe) ve <div> aynı görünür.
<div>, contenteditable özelliğine sahip olduğundan ikisi için de metin ekleyebilirsiniz.
Ancak uygun bir <input> öğesi ile <input> gibi görünen bir <div> öğesi kullanma arasında birçok fark vardır.
Ekran okuyucu kullanıcısı, <div> öğesini giriş öğesi olarak tanımaz ve formu dolduramaz.
Ekran okuyucuda kullanıcının duyduğu tek şey "Ad" olur. Öğenin metin eklemeye yönelik bir form kontrolü olduğuna dair herhangi bir gösterge olmaz.
<div>Name</div> tıklandığında onunla birlikte gelen <div> odaklanmaz. <label> ve <input> ise for ve id özellikleri kullanılarak bağlanır.
Form gönderildikten sonra, <div> içine girilen veriler isteğe dahil edilmez.
Verileri JavaScript ile eklemek mümkün olsa da <input>, bunu varsayılan olarak yapar.
Yerleşik form öğelerinin başka özellikleri vardır.
Örneğin, uygun form öğeleri ve doğru inputmode veya type ile dokunmatik bir klavye uygun karakterleri gösterir. <div> öğesinde inputmode özelliği kullanıldığında bu mümkün değildir.
Kullanıcıların beklenen veri biçimini bildiğinden 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.
Doğrulama kuralını tarayıcılara belirten minlength özelliğini kullanıyorsunuz.
Kullanıcıların, doğrulama kuralından da haberdar olmasını nasıl sağlayabilirsiniz? Söyleyin.
Beklenen biçimle ilgili bilgileri form denetiminin hemen altına ekleyin.
Yardımcı cihazları açıkça belirtmek için form denetiminde aria-describedby özelliğini ve aynı değere sahip hata mesajında id özelliğini kullanarak ikisini de bağlayın.
Kullanıcıların bir form denetiminin hata mesajını bulmasına yardımcı olma
Doğrulama ile ilgili önceki modülde, geçersiz veri girişi olması durumunda hata mesajlarının nasıl gösterileceğini öğ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 veriler girilirse tarayıcı, form gönderildiğinde form kontrolünün yanında bir hata mesajı görüntüler. Ayrıca ekran okuyucular hata mesajını bildirir.
Kendi hata mesajınızı da tanımlayabilirsiniz:
Bu örnekte, hata mesajını form denetimine bağlamak için daha fazla değişiklik yapılması gerekiyor.
Basit bir yaklaşım, form kontrolünde hata mesajı öğesindeki id ile eşleşen aria-describedby özelliğini kullanmaktır.
Ardından, hata mesajı için aria-live="assertive" kullanın.
ARIA canlı bölgeleri, hata gösterildiği anda ekran okuyucu kullanıcılarına bir hatayı bildirir.
Birden fazla alan içeren formlar için bu yaklaşımda sorun, aria-live ürününün genellikle birden fazla hata olması durumunda yalnızca ilk hatayı bildirmesidir.
Aynı işlemdeki birden fazla aria-live duyurusuyla ilgili bu makalede açıklandığı gibi, tüm hataları birleştirerek tek bir mesaj oluşturabilirsiniz. Bir başka yaklaşım da hatalar olduğunu bildirmek, ardından alana odaklanıldığında hataları tek tek bildirmektir.
Kullanıcıların hataları fark ettiğinden emin olma
Tasarımcılar bazen :invalid sözde sınıfını kullanarak geçersiz durumu kırmızıya renklendirir.
Ancak bir hatayı ya da başarıyı bildirmek için
asla sadece renge güvenmemelisiniz.
Kırmızı-yeşil renk körlüğü olan kişiler için yeşil ve kırmızı kenarlık
neredeyse aynı görünür.
İletinin bir hata ile ilişkili olup olmadığını görmek imkansızdır.
Renk eklemenin yanı sıra bir simge kullanın ya da hata mesajlarınızın önüne hata türünü ekleyin.
<span class="error">
<strong>Error:</strong>Please use at least eight characters.
</span>
Kullanıcıların formunuzda gezinmesine yardımcı olma
CSS ile form kontrollerinin görsel sırasını değiştirebilirsiniz. Görsel sıra ile klavyede gezinme (DOM sırası) arasındaki kopukluk, ekran okuyucu ve klavye kullanıcıları için soruna neden olur.
Sayfadaki görsel sıranın DOM sırasını takip etmesini sağlama hakkında daha fazla bilgi edinin.
Kullanıcıların o sırada odaklanılan form denetimini belirlemesine yardımcı olma
Bu formda gezinmek için klavyenizi kullanın.
Etkin hale geldikten sonra form denetimlerinin stillerinin değiştiğini fark ettiniz mi?
Bu, varsayılan odak stilidir.
Bunu :focus CSS sözde sınıfıyla geçersiz kılabilirsiniz.
:focus içinde hangi stilleri kullanırsanız kullanın, daima varsayılan durum ile odak durumu arasındaki görsel farkın tanınabilir olduğundan emin olun.
Odak göstergeleri tasarlama hakkında daha fazla bilgi edinin.
Formunuzun kullanılabilir olduğundan emin olun
Formunuzu farklı cihazlarla doldurarak sık karşılaşılan birçok sorunu belirleyebilirsiniz. Yalnızca klavyenizi kullanın, bir ekran okuyucu (Windows'da NVDA veya Mac'te VoiceOver gibi) kullanın ya da sayfayı %200 yakınlaştırın. Formlarınızı farklı platformlarda, özellikle de her gün kullanmadığınız cihazlarda veya ayarlarda her zaman test edin. Ekran okuyucu kullanan birini mi yoksa metin büyütme yazılımı kullanan birini mi tanıyor musunuz? Formunuzu doldurmalarını isteyin. Erişilebilirlik incelemeleri muhteşemdir, gerçek kullanıcılarla test etmek daha da iyidir.
Erişilebilirlik incelemesi yapma ve gerçek kullanıcılarla test etme hakkında daha fazla bilgi edinin.