Erişilebilir web formları nasıl tasarlanır

0
19

Formlar, çoğu web sitesinin önemli bir parçasıdır. Kullanıcıların kaydolması, ürün satın alması ve işletmenizle iletişim kurması için ana kanaldır. İşte tüm web sitesi ziyaretçileriniz tarafından erişilebilir olduklarından nasıl emin olacağınız.

Bu makale, adres formlarınızın erişilebilir ve kullanımı kolay olmasını sağlamanın bazı yollarını özetlemektedir.

Çoğu web sitesi, kullanıcıların oturum açmasına veya parolalarını sıfırlamasına, bir haber bültenine kaydolmasına veya bir şirketle iletişim kurmasına olanak tanıyan çeşitli formlar kullanır.

Ürün ve hizmet satın almaya yönelik olanlar gibi diğer web formları daha karmaşık alanlar içerebilir. Adres aramaları gibi. Makale, makalenin sonuna doğru adres arama API araçlarıyla ilgili bir bölümle birlikte web formları için genel erişilebilirlik en iyi uygulamasını kapsar.

Tüm web sitesi ziyaretçilerinin web formlarınızı kullanabileceğinden emin olmak için bu en iyi uygulama tavsiyesini izleyin.

Inviqa’da kıdemli yazılım mühendisi olan Tim Webster tarafından yazılmıştır.

Açık talimatlar verin

Tüm kullanıcılarınızın bir formu nasıl dolduracaklarını bileceğini varsaymak kolaydır. Ancak bu, yapmayı göze alamayacağınız bir varsayımdır. Her zaman kullanıcılarınızın bir formu nasıl dolduracaklarını bilmediğini varsayın.

Formun amacı hakkında net talimatlar verin Etiketlerin doğru ve bilgilendirici olduğundan emin olun Bu etiketlerin doğru alanda olduğundan emin olun

Kullanıcı formu dolduracağına güveniyorsa, ek talimatlar ve etiketler onları rahatsız etmeyecektir. Ancak ekran okuyucular gibi teknolojiye güvenen kullanıcılar için açık talimatlara sahip olmamak, bunların kullanımını imkansız hale getirebilir.

En basit biçim bile net talimatlara sahip olmanın faydasını görür. Örneğin bu şifre sıfırlama formunu alın.

Çoğu kullanıcı bu formu basit ve kullanımı kolay bulacaktır. Ancak daha fazla talimat ve bilgi eklenerek kolayca geliştirilebilir.

Forma basit bir giriş, kullanıcıya ne beklendiğini ve form gönderildiğinde ne olacağını söyler. Form etiketi olarak “E-posta adresine” sahip olmak bile “E-posta” dan daha iyidir.

Gören bir kullanıcı, günümüzün web formlarında yaygın olan yıldız işaretinin kullanılması için form alanının gerekli olduğunu görebilir. Ancak ekran okuyucu kullanıcıları için, giriş alanında arya gerekli özniteliği kullanarak daha açık olmak daha iyidir.

Daima etiketleri kullanın

Ekran okuyucular, ilgili öğelerde “for” ve “id” kullanılarak form alanlarıyla ilişkilendirilen etiketlere güvenir. Bu, kullanıcı formda gezinirken, alan odaklandığında her alanın etiketinin duyurulacağı anlamına gelir.

Radyo düğmeleri veya onay kutuları gibi öğeleri bir arada gruplandırmak ve gruplandırmayı ve grup içindeki tek tek öğeleri etiketlemek için uygun olan yerlerde alan kümesi ve göstergeyi kullanmak önemlidir.

Yer tutucu metin, kullanıcıdan ne beklendiğine dair bir örnek vermenin kolay bir yoludur. Ancak form etiketlerinin yerine asla kullanılmamalıdır.

Bunun bir örneği, kullanıcıdan cinsiyetiyle ilgili bilgi girmesini istemek olabilir. Formda gezinirken, kullanıcıya okunan ilk öğe “erkek” ise, kullanıcının sorunun ne olduğunu tahmin etmesi gerekir.

Alanları “Lütfen cinsiyetinizi girin” gibi uygun bir etiketle gruplamak, kullanıcıya neyin gerekli olduğu hakkında daha fazla bilgi verir.

Renk kontrastını kontrol edin

Erişilebilir bir web sitesinin tüm öğelerinde olduğu gibi, WCAG 2.1 düzey AA, standart boyutlu metin için en az 4.5: 1 ve büyük metin için 3: 1 renk kontrastı gerektirir.

Grafikler veya simgeler gibi diğer öğeler için minimum kontrast oranı 3: 1’dir. WCAG renk kontrast oranı gereksinimleri ve AAA seviyeleri nasıl anlaşılır?

Web formunuzu oluşturan tüm öğeler için bu renk kontrastı gereksinimlerine uymalısınız. Dahil olmak üzere:

başlıklar etiketler giriş alanı kenarlıkları form talimatları

Başarı ve hata mesajlarınıza da ekstra özen gösterin. Renk kontrastınızı kontrol ederken bunları unutmak kolaydır. Genellikle bu mesajlarla ilişkilendirilen yeşil ve kırmızı renkler, minimum renk kontrastı gereksinimlerini karşılamaz.

WebAIM renk kontrastı denetleyicisini kullanarak metin ve arka plan renkleri arasındaki kontrast oranını kontrol edin.

Kullanıcılara hatalardan bahsedin

Kaçınılmaz olarak bazı kullanıcılar formlarınızı doldururken hatalar yapacak. Bu nedenle kullanıcıya hangi alanların yanlış doldurulduğunu söylemek önemlidir. Bu genellikle alanı veya etiketi kırmızıyla vurgulayarak yapılır.

Ancak erişilebilirliği iyileştirmek için, kullanıcıya hangi alanların yanlış olduğunu söylemekten bir adım daha ileri gitmek daha iyidir.

“Girdiğiniz posta kodu yanlış, lütfen geçerli bir posta kodu girin” gibi kullanıcının hatayı nasıl düzeltebileceğini açıklayan bir mesaj eklemek, tek başına vurgulamaktan çok daha kullanışlıdır.

Anlam iletmek için asla yalnızca renge güvenmeyin. Bu, az görme ve renk körlüğü (renk körlüğü) olanlar hariçtir.

Klavye erişilebilir olduğundan emin olun

Birçok kullanıcı web sitenizde fare olmadan gezinecektir. Örneğin, motor veya el becerisi bozukluğu olan kişiler. Veya yardımcı teknoloji kullanan kişiler. Bu kullanıcılar, web sitenizde gezinmek için genellikle ‘sekme’ tuşunu kullanır.

Kullanıcılarınızın da sadece klavyeyi kullanarak formlarda gezinebilmesi önemlidir. Formunuzun klavyeden erişilebilir olduğundan emin olmak için:

mantıklı bir okuma sırası izleyin, odağı formun alanları arasında büyük ölçüde kaydıracak karmaşık düzenlerden kaçının. Kullanım bağlantılar veya düğmeler gibi şekillendirilmiş yayılma alanları ve div’ler gibi diğer html etiketleri yerine formu göndermek için. Aksi takdirde, yardımcı teknoloji kullanan kişiler doğru öğeye odaklanamayacaktır.

JavaScript kullanıyorsanız, klavye kullanıcılarının formdaki tüm işlevleri kullanmasına izin vermek için tüm fare olaylarını kopyaladığınızdan emin olun.

Arya canlı bölgeleri kullanmak, ekran okuyucuların, kullanıcı formu doldururken kullanıcının forma eklediği herhangi bir içerik veya bilgiden haberdar olmasını sağlamanın harika bir yoludur.

Adres arama aracı erişilebilirliği

Bu makale ve ekran görüntüleri özellikle Loqate adres doğrulama aracına atıfta bulunmaktadır. Loqate’e aşina değilseniz, bu bir adres formu oluştururken kullanabileceğiniz bir adres arama aracıdır. Adres arama API araçları, kullanıcıların iletişim formlarını adres ayrıntılarıyla doldurmasını kolaylaştırır. Loqate’in birçok farklı ücretsiz ve ücretli alternatifi var. Fetchify, AFD yazılımı ve Ideal Postcodes gibi.

Adres API arama araçları nasıl çalışır?

Bir kullanıcı adresini yazdığında, Loqate API gerçek zamanlı bir arama yapar ve kullanıcının seçim yapması için olası adreslerin bir listesini döndürür. Kullanıcı listeden bir adres seçtiğinde, araç kalan adres alanlarını gerekli bilgilerle doldurur. Formu doldurmak için kullanıcıyı telefon numarası gibi birkaç alanı daha doldurmaya bırakmak.

Bir forma otomatik adres arama ve doğrulama eklemek, kullanıcı deneyimini iyileştirmenin harika bir yoludur. Adresinizi aramak ve bir listeden seçmek, elle girmekten çok daha hızlı ve kolaydır. Erişim ihtiyacı olan kullanıcılar için adres arama araçları, bir formu doldurmak için geçen süreyi önemli ölçüde azaltır.

Ve web sitesi sahibinin adresi sunucuya gönderilmeden önce kontrol etmesine ve doğrulamasına izin verir. Maliyetli yazım hataları ve yazım hataları riskini azaltmak.

Tarayıcı otomatik tamamlama işleviyle çatışmalardan nasıl kaçınılır

Bir adres API arama hizmetini kullanırken karşılaşabileceğiniz bir sorun, tarayıcının yerel otomatik tamamlama işleviyle çakışabilmesidir.

Hem tarayıcı hem de Loqate, kullanıcının seçebileceği kafa karıştırıcı ve dikkat dağıtıcı olabilen bir adres seçenekleri listesi sunar. Klavye kullanıcıları için bu özellikle zor olabilir.

Yukarıdaki örnekte görebileceğiniz gibi, Loqate’in adres listesi tarayıcının adres seçeneklerinin altına yerleştirilmiştir. Bu, altındaki adres seçeneklerini okumayı imkansız kılar. Yardımcı teknolojiye sahip kullanıcılar için bir adres seçmek neredeyse imkansız hale geliyor.

Bir web formunun ekran görüntüsü, adres arama aracı ve tarayıcı tarafından otomatik olarak tamamlanan adres formu alanlarını gösterir.  Seçenekler kafa karıştırıcıdır ve en üstteki otomatik tamamlama işlevi, altındaki otomatik tamamlama işlevini gizleyerek kullanılamaz hale getirir.

Bunun üstesinden gelmek için aşağı oka basmak, tarayıcı otomatik tamamlama tarafından sunulan ilk seçeneği vurgulayacaktır. Sekmeye basmak, odağı Loqate’in seçeneklerine kaydırır, ancak bu ne kullanıcı dostu ne de sezgiseldir.

İlgili alanlarda tarayıcının otomatik tamamlamayı devre dışı bırakarak da bundan kaçınmak mümkündür. Ancak bu, bazı kullanıcıların güvenebileceği işlevselliği kaldırır. Yine, bu kullanıcı deneyimi için harika değil.

Çözüm

Ancak, formda bazı küçük ama önemli değişiklikler yaparak her ikisini de kullanabilirsiniz. Buna bir örnek, forma bir arama alanı eklemektir. Bu alana Loqate işlevselliği eklenir ve kullanıcıların diledikleri takdirde adres aramasını kullanmalarına izin verir.

Bu alanda otomatik tamamlamanın devre dışı bırakılması, kullanıcı deneyimine daha az zarar verir, çünkü kullanıcının tarayıcılarında “searchAddress” adlı bir alan için veya bir adres formunda yaygın olarak bulunmayan başka bir alan adı için adresleri depolanması olası değildir.

Kullanıcıya adresini manuel olarak girmesi için bir yol verilmesi, “cadde” veya “posta kodu” olarak adlandırılan giriş alanlarında otomatik tamamlama seçeneğini kullanmasına izin verir. Aşağıdaki resimde bunun bir örneğini görebilirsiniz.

Alanları olan basit bir web formu,

Artık kullanıcının adresini arama veya manuel olarak girme seçeneği vardır. Artık arama alanında otomatik tamamlama devre dışıyken, otomatik tamamlama seçeneklerinde artık bir çakışma yok.

Yarı tamamlanmış web formu, kullanıcının arama adresi alanında seçim yapabileceği bir adres listesi gösterir.

Kullanıcı adresini manuel olarak girmek isterse, yine de formu genişletebilir ve normal şekilde otomatik tamamlama işlevini kullanabilir.

Web formu, bir kullanıcının Loqate kullanarak veya tarayıcı otomatik tamamlama işleviyle manuel olarak adreslerini girmek için izleyebileceği iki yolu gösterir.

Ekran okuyucu erişilebilirliği kontrol ediliyor

Bu, web formunuz ve otomatik tamamlama çakışması sorununu çözerken, dikkate alınması gereken birkaç nokta daha vardır. Yardımcı teknoloji kullanıcıları için, adres seçenekleri göründüğünde kullanıcının bunun farkında olduğundan ve adres seçenekleri arasında gezinebildiğinden emin olmalısınız.

NVDA ekran okuyucuyu kullanırken ve bir adres araması gerçekleştirirken, kullanıcıya görüntülenen adres seçeneklerine rağmen, adres seçeneklerinin mevcut olduğunu veya kullanıcının bunları seçebileceğini öneren hiçbir sesli ipucu olmadığını fark edeceksiniz.

Bunların kullanıcılara duyurulduğundan emin olmanın bir yolu, bir arya canlı bölge ve bazı JavaScript kodu kullanmaktır. Loqate, görünümden gizlenmiş olsa bile canlı bölgenin içeriğini güncelleyerek kullanıcının seçebileceği adres listesini döndürdüğünde, NVDA gibi ekran okuyucular kullanıcıya adres seçeneklerinin orada olduğunu söyleyecektir.

Bu, kullanıcının ok tuşlarını kullanarak gezinebilecekleri bir seçenek listesi olduğunu bilmesini sağlar. Enter tuşunu kullanarak seçim yapabilir veya listeden çıkmak için escape tuşuna basabilirler.

Kullanıcı ok tuşlarını kullanarak listeyi kaydırırken, kullanıcıya odaklandıkları mevcut adres seçeneğinin içeriğini duyurmak için ikinci bir canlı bölgeyi tekrar güncelleyebilirsiniz.

Loqate’in ülke seçici gibi kullanıcının aradığı ülkeyi değiştirmesine izin veren daha karmaşık özellikler kullanıyorsanız, bu seçeneklerin her ikisinin de tek başına klavye kullanarak erişilebilir olduğundan emin olmalısınız. Ve formda göründükleri doğal sekme sırasını takip ediyorlar.

Formunuzu test edin

Form oluştururken acele etmeyin, kullanıcılarınızın onlarla etkileşime gireceği tüm yolları düşünün. Bunları farklı yardımcı teknolojiler kullanarak test edin. Bir dizi engelli insana sorun ve geri bildirimlerini dinleyin.

Sonuçta formunuz ne kadar erişilebilir olursa, onu kullanabilecek kitle o kadar büyük olur.

CEVAP VER

Lütfen yorumunuzu giriniz!
Lütfen isminizi buraya giriniz