Form elemanları erişilebilirliği sağlamak için nasıl tasarlanır?

Herkes hayatının bir noktasında formlarla uğraşmak zorunda kalmıştır. Eskiden daha çok kağıt üzerindeydi. Bugün ise, kullanıcıların bir web sitesiyle etkileşimini sağladıkları için giderek daha fazla dijital formla karşılaşıyoruz. İnternet üzerinden iletişim kurmak veya bir ürün sipariş etmek olsun, her yerde bunlara rastlayabilirsiniz. Örneğin Google ile internette arama yapmak da bundan etkileniyor. Bu formları doldurmak, fiziksel veya bilişsel engeli olan kişiler ile görme engelliler için daha zordur. Tüm insanların kamusal hayata katılımını sağlamak için bu formların engelsiz bir şekilde tasarlanması gerekir. Peki: Erişilebilir form öğeleri nasıl oluşturulur?

Bunun için çeşitli teknikler mevcuttur. Ancak tekniklere geçmeden önce, form elemanlarını bilmek gerekir. Bunlar farklı türlere ayrılabilir. Bunlar arasında aşağıdaki türler yer almaktadır.

• tek satırlı giriş alanları

• çok satırlı giriş alanları

• Seçim listeleri

• Radyo düğmeleri

• Onay kutuları

• Gönder/İptal Düğmeleri

Form alanı etiketlemesi

Formlarda erişilebilirliği sağlamak için, çeşitli kontrollerin etiketlenmesi gerekir. Bu etiketler, yardımcı teknolojilerin kontrollerin işlevlerini tanımasını ve bunları kullanıcıya iletmesini sağlar. Etiketlerin kontrollerle açıkça ilişkilendirilmesi önemlidir, aksi takdirde ekran okuyucular öğelere bağlanamaz. Sonuç olarak, kullanıcılar formu anlamakta zorlanırlar. Hangi alanlara hangi bilgilerin girilmesi gerektiğini belirleyemezler. Sonuç olarak, formu doğru bir şekilde dolduramazlar ve sıklıkla hata yaparlar. Ancak, açıklamaların tümü aynı şekilde etiketlenmez. Belirleyici faktör, bunların herkes tarafından görülebilir olup olmamasıdır. Bu nedenle, HTML programlama dilinde, etiket öğesi ile aria öznitelikleri arasında bir ayrım yapılır. Etiket öğesi, giriş alanları, seçim listeleri, radyo düğmeleri ve onay kutuları için kullanılır ve buna göre yerleştirilmelidir. Giriş alanları ve seçim listeleri için etiket, kontrollerin önüne yerleştirilir. Ancak, radyo düğmeleri ve onay kutuları için, kontrol öğesinden sonra yerleştirilirler. Etiketlerin ilgili öğeye de bağlanabilmesi için for özniteliği eklenmelidir.

HTML'de `aria` özniteliği düğmeler için kullanılır. Düğmeler, örneğin bir formda gönder veya iptal işlevini temsil edebilir. `aria` öznitelikleri, ilgili öğelerin açıklamalarını yalnızca yardımcı teknolojiler tarafından tanınabilir hale getirir. Bu nedenle, yalnızca ekran okuyucu tarafından görülebilmesi gereken giriş alanları için de kullanılabilirler. Web erişilebilirliğini iyileştirmek için kullanılan birçok `aria` özniteliği vardır. Ancak bunlar tür ve işlev bakımından farklılık gösterir. `aria-label` olarak adlandırılan öznitelik, bir öğeyi etiketlemek için kullanılır. Elbette, aynı etiketi birden fazla öğe için kullanmak da mümkündür. Bu, `aria-labelledby` özniteliği ile mümkün kılınır.

Tek ve çok satırlı giriş alanları

Giriş alanları, formlarda en sık kullanılan öğelerden biridir. Tek satırlı veya çok satırlı olabilirler. Tek satırlı alanlar, bir kişinin adı, e-posta adresi, sokak adresi veya şehir gibi kısa sorgular için kullanılır.

Bunlar HTML'de input etiketi ve type özniteliği kullanılarak oluşturulur.

Ayrıca, örneğin çizgi uzunluğunu tanımlayan başka özellikler de eklenebilir.

Çok satırlı alanlar genellikle metin mesajları gibi daha büyük metin alanları için kullanılır. Bunlar daha sonra `textarea` etiketiyle oluşturulur. Geliştirici yine satır sayısını ve satır uzunluğunu belirtebilir. Ancak, bu alanlara erişilebilmesi için `label` etiketinin de eklenmesi gerekir. Bununla birlikte, benzersiz şekilde atanmamışlarsa etiket ile öğeler arasında bağlantı oluşturmak mümkün değildir. Bu durumda, `for` özniteliği ve `id` özniteliği aracılığıyla bağlantı kurulmalıdır. Aşağıdaki HTML örneğinde, bu tür giriş alanlarında basit etiketler uygulanmıştır.

<label for="vorname">Adınız: </label>

<giriş türü“text“ name=“vorname“ id=“vorname“ />

<br />

<label for=“nachricht“>İhre Nachricht: </label>

<textarea name="message" id="message"></textarea>

Burada öncelikle "metin" türünde tek satırlık bir ad giriş alanı oluşturulur. "Adınız:" etiketi, label elementi aracılığıyla herkese görünür hale getirilir. Bu etiket, input elementinin önüne yerleştirilir, çünkü input alanından önce görüntülenir. label-Tag'deki for özniteliği ve input elementindeki id özniteliği bu alanları birbirine bağlar. Her iki içeriğin de aynı olması önemlidir, aksi takdirde bağlantı kurulamaz. name özniteliği bu alan için bir tanımlayıcı görevi görür ve verilerin sunucu sayfasına aktarılması için gereklidir.

Ardından, "textarea" etiketiyle çok satırlı bir giriş alanı oluşturulur. "Mesajınız:" etiketi daha sonra label öğesi aracılığıyla burada görünür. Burada da, aynı metin içeriğine sahip iki alan for ve id öznitelikleri aracılığıyla birbirine bağlanır.

Genel notlar

Genel olarak, formlar açık ve net olmalıdır. Öngörülebilirlik de çok faydalıdır. Bu, kullanıcıların kendilerinden ne beklendiğini hızlı bir şekilde görmelerini sağlar. Açık ve mantıklı bir yapı da çok önemlidir. İlgili içerik öğeleri gruplandırılabilir. Mantıksal olarak ayrılmış birimler görsel olarak da ayrılabilir. Bu, yönlendirmeyi kolaylaştırır. Ayrıca, renklerle birbirinden ayrılabilirler. Minimum 4,5:1 kontrast oranının korunması önemlidir.

Klavye kullanımı

Form alanlarının erişilebilir tasarımında en önemli özelliklerden biri, klavye ile kullanılabilirliktir. Engellilikleri nedeniyle fare kullanamayan kişiler vardır. Bu nedenle, formların klavye kullanılarak da gezinilebilecek şekilde tasarlanması daha da önemlidir. Etiket öğeleri ve aria özniteliklerinin kullanımı, formların anlaşılmasını ve kullanımını kolaylaştırır. Klavye ile kullanımı basitleştirmenin bir diğer yolu da klavye kısayollarının kullanılmasıdır. Burada, form öğelerine klavye kısayolları atanabilir. Bu, belirli alanlara daha hızlı ulaşmaya veya işlevleri daha hızlı çalıştırmaya yardımcı olabilir. HTML'de accesskey özniteliği bu amaçla kullanılır. Bu öznitelik, kullanılacağı öğeye eklenir. Burada basitçe tuş atanır ve bu tuş daha sonra klavye komutu için kullanılır. Örneğin, bir alana veya düğmeye "n" tuşunu atarsanız, Windows'ta klavye kısayolu (Alt + n) ile çalıştırılabilir.

Ancak, bu klavye kısayolunun tarayıcıda başka bir komut için zaten kullanılmadığından emin olun.

Minimuma indirgeme

Benzer şekilde, engelli bireylere gereksiz yük bindirmemek için her şeyi en temel unsurlara indirgemek tavsiye edilir. Bu nedenle, yalnızca kesinlikle gerekli veriler istenmelidir. Zaten mevcut olan verilerin sorgulanmasından vazgeçilmelidir. Ayrıca, form alanlarının görünürlüğü duruma göre uyarlanabilir. İsteğe bağlı giriş alanları veya koşullara bağlı alanlar görünür olmak zorunda değildir. İhtiyaç duyulduğunda görüntülenebilirler. Örneğin, daha önce çocuk bulunmadığı seçilmişse, çocukların yaşını sorgulamak anlamsızdır.

Yardım ve hata mesajları

Ayrıca, giriş yardımı da sunulmalıdır. Bu, bir iletişim kutusu veya ipucu şeklinde olabilir. Bu yardımla, giriş daha ayrıntılı olarak açıklanabilir. Başka bir olasılık da ayrı bir yardım sayfasına bağlantı vermektir. Bu, başarı oranını büyük ölçüde artıracaktır. Hatalar yine de olur. Bu nedenle anlamlı hata mesajları önemlidir. Örneğin, giriş sırasında parola yanlış girildiyse, "Kullanıcı adı veya parola yanlış" mesajı görünmemelidir. Hatayı filtrelemek daha iyidir. Burada doğru olan şu olurdu: "Girdiğiniz parola yanlış. Lütfen doğru parolayı girin".

Birkaç hata türü vardır. İlk olarak, biçim hatası. Burada parola yanlış biçimde girilir. Örneğin, rakamlar yerine harfler girilir. Değer hataları da oluşabilir. Bu, geçerli bir biçime rağmen yanlış bir değer girildiğinde meydana gelebilir. Bunun bir örneği, tarih etiketi için 34 değerinin girilmesi olabilir. Mesajda örneğin şöyle yazacaktır: "Mart ayı 31 gündür. Lütfen etiketi tekrar girin."

Bir diğer hata türü ise geçersiz girişlerdir. Burada geliştirici geçersiz değerler belirtir. Son olarak, zorunlu alanlar için giriş yapılmaması durumunda ortaya çıkan hata türü vardır. Bu, örneğin e-posta adresi zorunlu bir alan ise ve giriş unutulmuşsa olur. Bu durum genellikle genel şartlar ve koşullar için de geçerlidir. Birçok web sitesinde, bu beyanı kabul etmeden devam edemezsiniz.

Zorunlu alanlar

Formlar genellikle zorunlu alanlar içerir. Bunlar mutlaka belirtilmelidir. Zorunlu alanları belirtmek için sık kullanılan bir sembol, form alanının yanında görüntülenen "*" işaretidir. Ancak bu durumda, formun başında yıldız işaretiyle işaretlenmiş alanların zorunlu alanlar olduğu belirtilmelidir. Bir diğer seçenek ise bu zorunlu alanları farklı bir renk veya gölgelendirme ile göstermektir. Ancak bunlar herkes için erişilebilir değildir. Ekran okuyucu kullanıcılarının da bunları tanıyabilmesi için, required veya aria-required özniteliği de kullanılmalıdır. Bu, ekran okuyucuya bunun zorunlu bir alan olduğunu bildirir.

Yer tutucu

Formları daha anlaşılır ve kullanıcı dostu hale getirmenin bir yolu da form alanlarında yer tutucular kullanmaktır. Yer tutucular, kullanıcının hangi tür bilgiyi girmesi gerektiğini belirtmek için form alanında görünen geçici metinlerdir. Bu metinler, form alanına tıklandığında veya odaklanıldığında kaybolur ve form alanının gerçek içeriğiyle değiştirilebilir. Yer tutucular, placeholder özniteliği kullanılarak bir form alanının HTML input öğesine kolayca eklenebilir.

Girişleri kaydet

Tüm kullanıcıların girdilerini kaydetme olanağına sahip olması gerekir. Özellikle uzun formlarda sık sık sorunlar yaşanmaktadır. Veri kaybını önlemek için, girdiler kaydedilebilir. Bu amaçla, mevcut durumu kaydeden bir düğme eklenebilir. Bu, karmaşık formların doldurulmasını kolaylaştırır. Ayrıca, eksik girdilerin daha sonra tamamlanabilmesi avantajını da sağlar. Çünkü bu girdilerin tekrarlanması bazı kullanıcıların formu doldurmayı bırakmasına neden olur. Bu durum hem web sitesi operatörü hem de kullanıcı için can sıkıcı olabilir.

Kimlik doğrulama ve zaman sınırı

Kimlik doğrulama, internette güvenliği artırır. Ancak, sürekli ortaya çıkan engellerden biridir. Bunlar genellikle giriş yapmanın gerekli olduğu web sitelerinde görülür. Ancak bunların herkes için erişilebilir olması için, formların engelsiz olacak şekilde tasarlanması gerekir. Çünkü birçok durumda, kimlik doğrulama prosedürleri zaman sınırlıdır. Bu durumda, kişilerin giriş yapmak için çok az zamanı olur. Genellikle sadece 30 veya 60 saniye. Engelli birçok kişi için bu, giriş yapmak için yeterli süre değildir. Bu nedenle, girişin zamanla sınırlandırılmaması önemlidir.

Captcha'lar başka bir sorun daha yaratıyor. Bunlar, kullanıcıyı bilgisayar değil, insan olarak tanımlamak için kullanılır. Burada, kullanıcıdan bozuk bir görüntüyü tanımlaması ve sonucu bir form alanına girmesi istenir. Ancak çoğu zaman, örneğin bir araba gösteren görüntüler gibi, tüm görüntülere tıklanması gerekir. Bununla birlikte, bunlar her zaman engelsiz değildir. Görme engelli veya az gören kişiler bu görüntüleri tanıyamaz. Bu engeli aşmak için, sesli bir seçenek sunulmalıdır.

Özetle, form alanlarının erişilebilir tasarımı, erişilebilir bir dijital ortama giden yolda önemli bir adımdır. Doğru adlandırmaların kullanılması, net ve yapılandırılmış bir düzen, klavye ile işlem yapma ve ilgili hata mesajları, engelli kişilerin de formları bağımsız olarak doldurabilme olasılığını artırır.