Formlarda HTML yapısıyla ilgili sıkça yapılan hatalar

Özellikle tasarıma göre kolay özelleştirilebilmesi için, “selectbox” kullanılması gereken alanlarda “div” veya liste elemanları kullanılmaması gerekir. Bu durum menünün kullanımı sırasında veya mobil cihazlardaki görüntülemelerde sorun oluşturabilir. SelectboxIt gibi eklentilerle “selectbox” üzerinde istediğiniz özelleştirmeleri sağlarken, aynı zamanda doğru form elemanlarıyla birlikte kullanmış olursunuz.

3- Placeholder ve label kullanımı

“Label” bir inputun tanımlanmasında kullanılır. “Placeholder” ise, o veri alanının nasıl doldurulması gerektiği ile ilgili ipucu verir. Bazı durumlarda, “placeholder”lar “label” olarak kullanılsa da bu aslında doğru bir kullanım değildir. “Placeholder” kullanımı “label” kullanma ihtiyacını gidermez. “Label”ların doğru kullanımına dikkat etmelisiniz. Bir “input”tan önce label eklemek yeterli değildir. for=”” ile o “label”ın hangi “input”u karşıladığını tanımlamalısınız. “Label”lar ekran okuyucular için “input”ların tanınmasını sağlar. Bu tanımlama için aria-describedby=”” da kullanılabilir.

4- Zorunlu alanların belirlenmesi

Formlarda kullanılan doldurulması zorunlu alanları sadece görsel öğelerle belirlemek yerine, HTML içerisinde de belirtmeyi atlamayın. Bunun için “input” içerisinde “required” özelliği kullanılır.

Bazı validasyon sistemlerinde, JS veya CSS ile zorunlu alanların kontrolü yapılırken, HTML içerisinde “required” özelliğini de kullanmayı tercih edin. Bu, tarayıcılar ve ekran okuyucuların bu alanın zorunlu olduğunu algılamasını sağlar.

Zorunlu alanları belirtirken aria özelliklerini de kullanabilirsiniz. “Aria-required” bu alanların ekran okuyucular tarafından algılanmasını sağlar.

5- Formatter eklentilerini kullanılması

Özellikle kredi kartı ve telefon numarası gibi özel dizilimi olan ve karıştırılma ihtimali yüksek verilerin girişi için kullanıcılara bu yapıya uygun “formatter” eklentilerini kullanılabilir. Bu alanlarda oluşabilecek validasyon problemlerini engellerken, kullanıcıların hatalı giriş yapmasını da önler.

Özellikle kredi kartı için istenen bilgilerin yeri konusunda kafası karışan kullanıcılar için aşağıdaki gibi bir eklentiyle kolay bir çözüm üretebilirsiniz.

6- Mobil cihazlar için uygun form elemanları

Mobil cihazlardaki deneyim düşünüldüğünde, çok daha farklı etkenlerin de dikkate alınması gerekiyor. Ekran boyutunun daha küçük olması, klavye ve “input” büyüklüklerine dikkat edilmesi, hareket hareket halindeyken kullanımı gibi durumlar mobil cihazlardaki deneyimin iyileştirilmesi için daha fazla zaman harcanmasını gerektirir.

Mobil cihazlardaki işletim sistemleri form deneyimini iyileştirmek için veri tiplerine uygun özelleştirilen klavyeler, menüler ve tarih seçiciler gibi deneyimi kolaylaştırıcı seçenekler sunar. Bunların kullanımı tabi ki, veri girişine uygun olarak doğru “input” tipinin seçilmesine bağlıdır. Bu farklı veri tiplerine bağlı olarak kullanıcının gördüğü klavye tiplerini şuradan detaylı olarak inceleyebilirsiniz.

Yukarıda da bahsettğimiz gibi “selectbox” gibi özelleştirilmesi zor alanları liste yapısı gibi uygun olmayan elementler kullanıldığında mobil cihazlar tarafından algılanamadığı için klavye seçeneklerini kullanamazsınız. SelectboxIt benzeri eklentiler, mobilde açılır menü seçeneğini kullanmanızı da sağlar.

Bu küçük müdahalelerle kullandığınız formların daha erişilebilir olmasını sağlayabileceğiniz gibi kullanımını da kolaylaştırabilirsiniz. Bugün HTML standartları da “aria” etiketlerinin kullanımıyla birlikte formlardaki kullanım engellerinin çok büyük oranda kaldırmış durumda. Özellikle engelli bireyler için banka işlemleri, hastane randevu sistemleri, e-ticaret sitelerindeki satın alma ve sipariş süreçlerindeki formlar gibi öncelikli sistemlerin bu açıdan da dikkat edilerek hazırlanması gerekiyor.