Teslimat adresi penceresini klavyeyle test etmek
Somut bir örnek, adres penceresinde odak sırasını, iptali ve kaydetmeyi gösterir. Klavye hataları böylece somut biçimde izlenebilir.
Teslimat adresi penceresi klavyeyle tamamen kullanılabilmelidir. Açılıştan sayfaya dönüşe kadar bütün akışı test edin. Yalnız kaydet düğmesine ulaşılması yeterli değildir.
Aşağıdaki örnek varsayımsaldır: Müşteri portalında D-17 adresi “Hafenweg 8” olarak kayıtlıdır. Kullanıcı bina numarasını 10 yapmak ister. Pencerede sokak ve bina numarası alanları ile “İptal” ve “Adresi kaydet” düğmeleri vardır. Bu, elle yapılan bir işlev testidir; kapsamlı erişilebilirlik değerlendirmesi değildir.
Hatayı bir akış olarak kaydetmek
Varsayılan başlangıç durumunda pencere açılır, fakat odak karartılmış alanın arkasındaki “Teslimat adresini değiştir” düğmesinde kalır. Kullanıcı Tab ile sayfa altındaki bağlantılara ilerler. Görünür adres alanları atlanır. Fareyle test edilirken bu hata kolayca gözden kaçabilirdi.
Başlangıç sayfasını, açan düğmeyi, kullanılan tuşları ve gerçekten odaklanan öğeyi kaydedin. Geliştirme ekibi böylece aynı hatayı yeniden görebilir. Test verileri içeren güvenli bir ortam kullanın; deneme için gerçek müşteri adresini değiştirmeyin.
Beklenen davranışı tanımlamak
Bu kısa pencerede “Sokak” alanı, ilk odak için uygun bir konumdur. Uzun veya önemli sonuçlar doğuran pencerelerde başka bir konum gerekebilir. WAI iletişim kutusu örüntüsü bu farkları açıklar.
Eylem | Örnekte beklenen sonuç |
|---|---|
Tab ile açan düğmeye gelip Enter kullanmak | Pencere açılır; odak sokak alanında görünürdür. |
Tab ile ileri gitmek | Sokak, bina numarası, iptal, adresi kaydet; ardından yeniden sokak. |
Shift+Tab ile geri gitmek | Aynı öğeler ters sırayla; pencerenin arkasına geçilmez. |
Bina numarasına 10 yazıp kaydetmeden Escape kullanmak | Pencere kapanır; odak açan düğmeye döner; D-17, Hafenweg 8 olarak kalır. |
Yeniden açıp 10 değerini kaydetmek | Başarı ancak kayıt onaylandıktan sonra gösterilir; D-17, Hafenweg 10 olur. |
Kaydın iş kuralları nedeniyle reddedilmesi | Anlaşılır hata mesajı gösterilir; girdiler korunur; ilgili bölüme ulaşılabilir. |
Tab sırası bu örnek yapıya aittir. Sizin arayüzünüzde ek kontroller bulunabilir.
Nedeni doğru yerde düzeltmek
Eylemler için gerçek düğmeler ve doğru etiketlenmiş alanlar kullanın. Özel bir iletişim kutusunun erişilebilir adı ve doğru uygulanmış odak yönetimi olmalıdır. Yalnız role="dialog" veya aria-modal="true" yazmak arka planı kilitlemez ve klavye davranışı eklemez.
Geliştirme ekibi açılışı, odağın etkin modal pencere içinde tutulmasını ve kapanışı birlikte ele almalıdır. Bu örnekte pencere kapandığında açan düğme hâlâ vardır. Başka bir akışta kaldırılıyorsa mantıklı başka bir dönüş konumu gerekir. Stil kuralları görünür odak işaretini yok etmemelidir.
Kayıt sürerken kapanışı test etmek
Escape, gönderilmiş bir sunucu isteğini otomatik olarak geri çekmez. Örnekte pencere işlem sırasında da kapanabilir. Sayfa D-17 için “Adres değişikliği işleniyor” bilgisini göstermeye devam eder. Onaylı yanıt geldikten sonra adres güncellenir; sonuç belirsizse durumun açıklığa kavuşturulması gerekir. Bu sırada “Değişiklik iptal edildi” demek yanlış olur.
Düzeltmeden sonra testi desteklenen tarayıcılarda ve uygun bir ekran okuyucu yapılandırmasıyla tekrarlayın. Gözlemleri ve açık hataları kaydedin. Düzeltilmiş klavye akışı, diğer bütün sayfaların, kontrastların veya içeriklerin durumunu göstermez.
Kaynaklar
Devamını okuyun
Tüm yazılar
ASES ile Tasarım ve UX
Kullanıcı deneyimi, arayüz ve marka tasarımı