Manuel erişilebilirlik testi

Manuel testle ilgili temel bilgiler

Manuel erişilebilirlik testinde klavye, görsel ve bilişsel testler, araçlar, tespit etmek için kullanabileceğiniz tekniklerdir. Otomatik olarak WCAG’de belirlenen tüm başarı kriterlerini kapsamaz, Otomatik erişilebilirlik testleri gerçekleştirmemeniz ve ardından testi durdurmanız önemlidir.

Teknoloji ilerledikçe yalnızca otomatik araçlarla daha fazla test gerçekleştirilebilir, ancak günümüzde geçerli tüm WCAG kontrol noktalarını kapsamak için test protokollerinize hem manuel hem de yardımcı teknoloji kontrollerinin eklenmesi gerekmektedir.

Manuel erişilebilirlik testlerinin avantajları:

• Makul düzeyde basit ve hızlı çalışıyor
• Yalnızca otomatik testlere kıyasla daha yüksek sorun yüzdesini yakalayın
• Başarı için gereken az araç ve uzmanlık

Manuel erişilebilirlik testlerinin dezavantajları:

• Otomatik testlerden daha karmaşık ve zaman alıcı
• Geniş ölçekte tekrarlamak zor olabilir
• Test yapmak ve sonuçları yorumlamak için daha fazla erişilebilirlik uzmanlığı gerektirir

Şu anda algılanabilen erişilebilirlik öğelerini ve ayrıntılarını karşılaştıralım otomatik bir araç tarafından yapılan risk listesidir.

Manuel test türleri

Verilerinizi incelerken göz önünde bulundurabileceğiniz birçok manuel araç ve teknik vardır. dijital erişilebilirlik için web sayfası veya uygulama. Türkiye'de en büyük üç alana klavye işlevleri, görsel odaklı incelemeler ve kontrol edebilirsiniz.

Bu modülde bu konuların her birini ana hatlarıyla ele alacağız ancak aşağıdaki testler tüm manuel testlerin kapsamlı bir listesi değildir çalıştırmanız gerekir. Hedef EBM'yi kullanarak manuel erişilebilirlik kontrol listesi güvenilir bir kaynaktan yardım alın ve odaklı manuel test yapılacaklar listenizi oluşturun. özel ihtiyaçlarına odaklanacağız.

Klavye kontrolleri

Tüm dijital erişilebilirlik sorunlarının yaklaşık% 25'inin, gazetecilerin ihtiyaçlarına klavye desteği olmamasına neden oluyor. Klavye odağı modülünde öğrendiğimiz gibi bu durum; görme engelli veya görme engelli ekran okuyucu kullanıcıları, ayrıca içeriğin klavyeden erişilebilir olmasını temel alan bir teknolojiden yararlanan ses tanıma yazılımı kullanan kişiler de dahil olmak üzere her türlü kullanıcıyı etkiler.

Klavye testleri aşağıdakilere benzer soruları yanıtlar:

• Web sayfasının veya özelliğin çalışması için fare gerekiyor mu?
• Sekme sıralaması mantıklı ve sezgisel mi?
• Klavye odak göstergesi her zaman görünür mü?
• Odaklanmayı yakalamaması gereken bir öğede takılıp kalabilir misiniz?
• Odaklanmayı engelleyen bir öğenin arkasında veya etrafında gezinebiliyor musunuz?
• Odaklanılan bir öğeyi kapatırken odak göstergesi mantıklı bir yere geri döndü mü?

Klavye işlevselliğinin etkisi çok büyük olsa da test prosedürü oldukça basittir. Tek yapmanız gereken, farenizi kenara bırakmak veya küçük bir JavaScript paketi yükleyip web sitenizi yalnızca klavyenizi kullanarak test etmektir. Klavye testi için aşağıdaki komutlar gereklidir.

Görsel kontroller

Görsel kontroller, sayfadaki görsel öğelere odaklanır ve web sitesini ya da uygulamayı erişilebilirlik açısından incelemek için ekran büyütme veya tarayıcı yakınlaştırma gibi araçlardan faydalanır.

Görsel kontroller size şu bilgileri verebilir:

• Bir renk geçişi veya resmin üzerindeki metin gibi, otomatik aracın algılayamadığı renk kontrastı sorunları var mı?
• Başlık, liste veya diğer yapısal öğelere benzeyen ancak bu şekilde kodlanmayan öğeler var mı?
• Gezinme bağlantıları ve form girişleri, web sitesinde veya uygulamada tutarlı mı?
• Önerileri aşan herhangi bir yanıp sönme, titreme veya animasyon var mı?
• İçerikte boşluklar uygun şekilde ayarlanmış mı? Harfler, kelimeler, satırlar ve paragraflar için mi?
• Ekran büyüteci veya tarayıcı yakınlaştırma işlevini kullanarak tüm içeriği görebiliyor musunuz?

İçerik kontrolleri

Düzenlere, hareketlere ve renklere odaklanan görsel testlerin aksine içerik kontrolleri sayfadaki kelimelere odaklanır. Kopyanın kendisine bakmakla kalmamalı, diğer kullanıcılar için de bir anlam ifade ettiğinden emin olmak için bağlamı incelemelisiniz.

İçerik kontrolleri, aşağıdakilere benzer soruları yanıtlar:

• Sayfa başlıkları, başlıklar ve form etiketleri net ve açıklayıcı mı?
• Resim alternatifleri kısa, doğru ve kullanışlı mı?
• Anlam veya bilgi aktarmanın tek yolu olarak tek başına renk mi kullanılıyor?
• Bağlantılar açıklayıcı mı, yoksa "daha fazla bilgi" veya "burayı tıklayın" gibi genel metinler mi kullanıyorsunuz?
• Sayfanın dilinde herhangi bir değişiklik var mı?
• Sade dil mi kullanılıyor ve ilk referansta tüm kısaltmalar yazılmış mı?

Bazı içerik kontrolleri kısmen otomatik hale getirilebilir. Örneğin, "Burayı tıklayın"ı kontrol eden bir JavaScript inceleyici yazabilirsiniz. ve bir değişiklik yapmanızı önerir. Ancak bu özel çözümlerde, kopyayı bağlama dayalı bir şekilde değiştirmek için çoğu zaman bir insan gerekir.

Demo: Manuel test

Şu ana kadar demo web sayfamızda otomatik testler gerçekleştirdik ve sekiz farklı sorun türünü bulup düzelttik. Artık daha fazla erişilebilirlik sorunu bulup bulamayacağımızı görmek için manuel kontroller yürütmeye hazırız.

1. Adım

Güncellenen CodePen demomuz (otomatik erişilebilirlik güncellemelerinin sayısı)

İşleminize devam etmek için dosyayı hata ayıklama modunda görüntüleyin. test edebilirsiniz. Etiketin etrafındaki <iframe> öğesini kaldırdığı için bu önemlidir demo web sayfası olsun. Bu durum, bazı test araçlarının çalışmasını etkileyebilir. Daha fazla bilgi: CodePen'in hata ayıklama modu.

2. Adım

Farenizi veya dokunmatik yüzeyinizi bir kenara koyarak manuel test işleminizi başlatın ve yalnızca klavyenizi kullanarak DOM'de yukarı ve aşağı gezinin.

Sorun 1: Görünür odak göstergesi

Klavyeyle ilgili ilk sorun hemen görülmelidir, daha doğrusu, görünmeyen odak göstergesi kaldırılmıştır. Demoda CSS'yi taradığınızda, kod tabanına çok korkutucu "outline: none" değerinin eklendiğini görürsünüz.

  :focus {
    outline: none;
  }

Bu sorunu çözelim.

Klavye odağı modülünde öğrendiğiniz gibi, web tarayıcılarının kullanıcılar için görünür bir odak noktası eklemesine izin vermek için bu kod satırını kaldırmanız gerekir. Bir adım daha ileri gidip dijital ürününüzün estetiğini karşılayacak tarzda bir odak göstergesi oluşturabilirsiniz.

:focus {
  outline: 3px dotted #008576;
}

Sorun 2: Odak sipariş

Odak göstergesini değiştirdikten ve görünür hale geldikten sonra sayfaya göz atın. Bunu yaparken form giriş alanının dikkat etmiyor. Kaldırılmış doğal odaklanma sırasından negatif sekme dizinine gönderir.

<input type="email" placeholder="Enter your e-mail address" aria-hidden="true" tabindex="-1" required>

Bu sorunu çözelim.

Kullanıcıların bültenimize kaydolmak için bu alanı kullanmasını istediğimizden, girişin tekrar klavye odaklı hale gelmesi için negatif sekme dizinini kaldırmak veya sıfır olarak ayarlamak yeterli olacaktır.

<input type="email" placeholder="Enter your e-mail address" aria-hidden="true" required>

3. Adım

Klavye odağı kontrol edildikten sonra görsel ve içerik kontrollerine geçiyoruz.

3. Sorun: Bağlantı renk kontrastı

Demo sayfasında yukarı ve aşağı sekme tuşuna basarak klavye testlerini gözden geçirirken, klavyenin görsel olarak gizli üç bağlantıya odaklandığını fark etmiş paragraflarda bulabilirsiniz.

Sayfamızın erişilebilir olması için bağlantıların etrafındaki metinden farklı olması gerekir ve fare imleci ile klavye odağına renk olmayan bir stil değişikliği ekleyin.

Bu sorunu çözelim.

Bunun hızlı bir çözümü, paragrafların içindeki bağlantıların altını çizerek dikkat çekmelerini sağlamaktır. Bu, erişilebilirlik sorununu çözecektir, ancak ulaşmak istediğiniz genel tasarım estetiğine uygun olmayabilir.

Alt çizgi eklememeyi seçerseniz, renkleri hem arka plan hem de metin gereksinimlerini karşılayacak şekilde değiştirmeniz gerekir.

Bağlantı kontrastı kontrol aracı kullanarak demoyu incelediğinizde, bağlantı renginin normal boyutlu metin ile arka plan arasındaki 4.5:1 renk kontrastı koşulunu karşıladığını göreceksiniz. Bununla birlikte, altı çizili olmayan bağlantıların etrafındaki metne göre 3:1 renk kontrastı koşulunu da karşılaması gerekir.

Seçeneklerden biri, bağlantı rengini sayfadaki diğer öğelerle eşleşecek şekilde değiştirmektir. Ancak bağlantı rengini yeşil olarak değiştirirseniz gövde metni de üç öğenin tümü (bağlantılar, arka plan ve etrafındaki metin) arasındaki genel renk kontrastı gereksinimlerini karşılayacak şekilde değiştirilmelidir.

ziyaret edin.

'nı inceleyin.

4. Sorun: Simge renk kontrastı

Eksik olan bir diğer renk kontrastı sorunu da sosyal medya simgeleri. Renk ve kontrast modülünde, temel simgelerin arka plan üzerinde 3:1 oranında bir renk kontrastına uyması gerektiğini öğrendiniz. Demodaki sosyal medya simgelerinin kontrast oranı 1,3:1'dir.

Bu sorunu çözelim.

3:1 renk kontrastı koşullarını karşılamak için sosyal medya simgeleri koyu griye dönüştürülür.

Sorun 5: İçerik düzeni

Paragraf içeriğinin düzenine baktığınızda metnin tamamını iki yana yaslandı. Yazı biçimi modülü, "Uzay nehirleri" oluşturuyor. metni okuyabilmelerini zorlaştırabilir kullanıcıların okuması gereken sorular var.

p.bullet {
   text-align: justify;
}

Bu sorunu çözelim.

Demodaki metin hizalamasını sıfırlamak için kodu text-align: left; veya bu satırı CSS'den tamamen kaldırın (solda gösterilen şekilde) varsayılan hizalamayı ayarlar. Kodu test ettiğinizden emin olun. devralınan stiller varsayılan metin hizalamasını kaldırır.

p.bullet {
   text-align: left;
}

4. Adım

Önceki adımlarda açıklanan tüm manuel erişilebilirlik sorunlarını tanımlayıp düzelttikten sonra sayfanız ekran görüntüsümüzdeki gibi görünmelidir.

Manuel kontrollerinizde, bu modülde ele aldığımızdan daha fazla erişilebilirlik sorunu bulmanız mümkündür. Bu sorunların birçoğunu bir sonraki modülde keşfedeceğiz.

Sonraki adım

Tebrikler! Otomatik ve manuel test modüllerini tamamladınız. Güncellenen CodePen'imizi görüntüleyebilirsiniz. içeren bir web sitesini devreye sokun.

Şimdi, proje yaşam döngüsü boyunca yardımcı teknoloji testleri.

Öğrendiklerinizi sınayın

Manuel erişilebilirlik testi hakkındaki bilginizi test edin