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

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

Bilgisayarları hala birer veri işleme aracı olarak kullanıyoruz. Bu yüzden de formlar insan-bilgisayar iletişiminin gerçekleştiği en kritik noktalar. Kullanıcılarınıza sorunsuz bir hizmet sunabilmenin yolu da bu formların doğru bir şekilde tasarlanmasından geçiyor. Erişilebilirlik açısından da form elemanlarının kurallara uygun kullanımı, deneyimi etkileyen en önemli nokta. Bu yazımızda, formların HTML yapısını oluştururken dikkat edilmesi gerekenlerden bahsedeceğiz.

1- “Input” tiplerini kurallara uygun olarak kullanın

Birçok formda, bütün veri girişlerinde “text” tipindeki “input”ları kullanılıyor (<input type=””text”” />). Her ne kadar görünüm açısından bir sorun oluşturmasa da, erişilebilirlik açısından zorluklar oluşturuyor. Tarih, saat, e-posta, telefon, arama vb. gibi sık kullanılan daha birçok farklı formatlardaki veriler için aslında özelleştirilmiş “input” tipleri var. Tüm input tiplerini incelemek için w3schools’a bakabilirsiniz. Ayrıca diğer form elemanlarının da nerelerde kullanıldığını öğrenmelisiniz. Bunlar daha anlamlı bir kod yapısı oluşturmanıza yardımcı olur.

2- Kullanıcıların klavye kullanım alışkanlıklarını göz önünde bulundurun

Formlarda bazı kullanıcı davranışlarını da dikkate almak, kullanıcılar açısından bir kolaylık sağlar. Örneğin “Tab”e basarak bir sonraki input alanına geçmek, veya bir form doldurulduktan sonra, “Enter” ile formu göndermek gibi, klavye üzerinden gerçekleştirilen bazı işlemlerin doğru şekilde tetiklendiğinden emin olmalısınız. Bu işlemler genelde kendiliğinden çalışırlar ama yine de “Tab”, “Enter” ve yön tuşları gibi formlarda sıkça kullanılan bu tuşların çalışmasını engelleyecek bir durum oluşmuşsa, bunları kaldırmalısınız.

Ö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.

ezgif.com-video-to-gif

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.

mobile-keyboard

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.

Bugün ilk makalen bizdendi.

Daha fazlası için SHERPA Blog okuru olmalısın.
Giriş Yap Ücretsiz kaydol

Benzer Yazılar

KEŞFETMEYE DEVAM ET
Hava durumundan çok daha fazlası: İlham veren 7 yaratıcı arayüz weather-app-designs

Hava durumundan çok daha fazlası: İlham veren 7 yaratıcı arayüz

Gizle
SENİN İÇİN ÖNERİYORUZ
Ana sayfa tasarımında doğru bilinen yanlışlar

Ana sayfa tasarımında doğru bilinen yanlışlar

Gizle