Yardımcı Teknoloji testi

Bu modül, erişilebilirlik testi için yardımcı teknoloji (AT) kullanımına odaklanmaktadır. Engelli bireyler, bir görevi gerçekleştirme becerilerini artırmak, sürdürmek veya iyileştirmek için AT'den yararlanabilir.

Dijital alanda AT'ler şunlar olabilir:

• Kullanılamaz veya düşük teknolojili: kafa ve ağız çubukları, el büyüteçleri, büyük düğmeli cihazlar
• Yüksek teknoloji: sesle etkinleştirilen cihazlar, göz izleme cihazları, uyarlanabilir klavyeler ve fareler
• Donanım: anahtar düğmeleri, ergonomik klavyeler, otomatik olarak yenilenen Braille cihaz
• Yazılım: metin okuma programları, canlı altyazılar, ekran okuyucular

Genel test iş akışınızda birden fazla AT türü kullanmanızı öneririz.

Ekran okuyucu testinin temelleri

Bu modülde, en popüler dijital AT'lerden biri olan ekran okuyuculara odaklanıyoruz. Ekran okuyucu, bir web sitesinin veya uygulamanın temel kodunu okuyan bir yazılım parçasıdır. Daha sonra bu bilgiyi kullanıcı için konuşmaya veya Braille çıktısına dönüştürür.

Ekran okuyucular, kör ve sağır-kör kişiler için gereklidir ancak az gören, okuma bozukluğu olan ve bilişsel engelli kişilere de fayda sağlayabilir.

Tarayıcı uyumluluğu

Birden fazla ekran okuyucu seçeneği vardır. En popüler ekran okuyucular, masaüstü bilgisayarlar için JAWS, NVDA ve VoiceOver, mobil cihazlar için ise VoiceOver ve Talkback'tir.

İşletim sisteminize (OS), favori tarayıcınıza ve kullandığınız cihaza bağlı olarak tek bir ekran okuyucu en iyi seçenek olabilir. Çoğu ekran okuyucu, belirli donanımlar ve web tarayıcıları göz önünde bulundurularak tasarlanır. Ekran okuyucuyu kalibre edilmemiş bir tarayıcıyla kullandığınızda daha fazla "hata" veya beklenmedik davranışlarla karşılaşabilirsiniz. Ekran okuyucular en iyi performansı aşağıdaki kombinasyonlarla gösterir.

Ekran okuyucu komutları

Masaüstü veya mobil cihazınızda ekran okuyucu yazılımınızı uygun şekilde ayarladıktan sonra, ekran okuyucu belgelerine (önceki tabloda bağlantısı verilmiştir) göz atmalı ve teknolojiyle ilgili bilgi edinmek için bazı temel ekran okuyucu komutlarını uygulamalısınız. Daha önce ekran okuyucu kullandıysanız yeni bir ekran okuyucuyu deneyebilirsiniz.

Erişilebilirlik testi için ekran okuyucu kullanırken amacınız, ekran okuyucu kullanıcısının deneyimini taklit etmek değil, kodunuzda web sitenizin veya uygulamanızın kullanımını engelleyen sorunları tespit etmektir. Bu nedenle, birtakım temel bilgiler, birkaç ekran okuyucu komutu ve biraz (ya da (veya)) biraz alıştırma yaparak pek çok şey yapabilirsiniz.

Ekran okuyucuları ve diğer AT'leri kullanan kullanıcıların kullanıcı deneyimini daha iyi anlamanız gerekiyorsa bu değerli analizleri elde etmek için birçok kuruluş ve kişiyle etkileşime geçebilirsiniz. Kodu bir kurallar grubuna göre test etmek için bir AT'nin kullanılmasının ve kullanıcılara deneyimleri hakkında soru sorulmasının genellikle farklı sonuçlar verdiğini unutmayın. Her ikisi de tamamen kapsayıcı ürünler oluşturmak için önemli unsurlardır.

Masaüstü ekran okuyucuları için tuş komutları

Mobil ekran okuyucular için tuş komutları

Ekran okuyucu test demosu

Demomuzu test etmek için macOS çalıştıran bir dizüstü bilgisayarda Safari'yi kullandık ve sesi yakaladık. Bu adımları herhangi bir ekran okuyucu kullanarak uygulayabilirsiniz ancak bazı hatalarla karşılaşma şekliniz bu modülde açıklanan şekilden farklı olabilir.

1. Adım

Tüm otomatik ve manuel erişilebilirlik güncellemelerinin uygulandığı güncellenmiş CodePen'i ziyaret edin.

Sonraki testlere devam etmek için etiketi hata ayıklama modunda görüntüleyin. Bu, demo web sayfasını çevreleyen ve bazı test araçlarını etkileyebilecek <iframe> öğesini kaldırdığından önemlidir. CodePen'in hata ayıklama modu hakkında daha fazla bilgi edinin.

2. Adım

Tercih ettiğiniz ekran okuyucuyu etkinleştirin ve demo sayfasına gidin. Belirli sorunlara odaklanmadan önce sayfanın tamamını baştan sona gözden geçirebilirsiniz.

Her sorun için ekran okuyucumuzu, düzeltmelerin demoya uygulanmasından önce ve sonra kaydettik. Demoyu kendi ekran okuyucunuzla çalıştırmanızı öneririz.

1. Sorun: İçerik yapısı

Başlıklar ve belirgin işaretler, kullanıcıların ekran okuyucuları kullanarak gezinmesinin başlıca yollarından biridir. Bunlar yoksa ekran okuyucu kullanıcısının bağlamı anlamak için sayfanın tamamını okuması gerekir. Bu işlem çok zaman alabilir ve can sıkıcı olabilir.

Demodaki iki öğeden birine göre gezinmeye çalışırsanız bu öğelerin mevcut olmadığını hızla görürsünüz.

• Önemli nokta örneği: <div class="main">...</div>
• Başlık örneği: <p class="h1">Join the Club</p>

Her şeyi doğru şekilde güncellediyseniz herhangi bir görsel değişiklik olmaz, ancak ekran okuyucu deneyiminiz önemli ölçüde iyileşir.

Sorunu çözelim.

Erişilemeyen bazı öğeler, siteye bakarak gözlemlenemez. İçerik yapısı modülünde başlık düzeylerinin ve anlamsal HTML'nin önemini öğrenmiştiniz. Bir içerik başlık gibi görünebilir ancak aslında stilize bir <div> içine yerleştirilmiştir.

Başlıklar ve yer işaretleriyle ilgili sorunu düzeltmek için önce işaretlenmesi gereken her öğeyi tanımlamanız ve ilgili HTML'yi güncellemeniz gerekir. İlgili CSS'yi de güncellediğinizden emin olun.

• Önemli nokta örneği: <main>...</main>
• Başlık örneği: <h1>Join the Club</h1>

Her şeyi doğru şekilde güncellediyseniz herhangi bir görsel değişiklik olmaz, ancak ekran okuyucu deneyiminiz önemli ölçüde iyileşir.

2. sorun: Bağlantı bağlamı

Ekran okuyucu kullanıcılarına bir bağlantının amacı ve bağlantının onları web sitesinin veya uygulamanın dışındaki yeni bir konuma yönlendirip yönlendirmediği hakkında içerik sunmak önemlidir.

Demomuzda, etkin resim alternatif metnini güncellerken bağlantıların çoğunu düzelttik, ancak özellikle yeni bir konuma yönlendirildikleri için ek bağlamdan fayda sağlayabilecek çeşitli nadir hastalıklarla ilgili birkaç ek bağlantı bulunuyor.

<a href="https://rarediseases.org/rare-diseases/maple-syrup-urine-disease">
  Maple syrup urine disease (MSUD)
</a>

Sorunu çözelim.

Ekran okuyucu kullanıcıları için bu sorunu düzeltmek amacıyla kodu, görsel öğesini etkilemeden daha fazla bilgi ekleyecek şekilde güncelliyoruz. Okuma ve bilişsel bozukluğu olan kişiler gibi daha da fazla kişiye yardımcı olmak için bunun yerine ek görsel metin ekleyebiliriz.

Ek bağlantı bilgileri eklemek için kullanabileceğimiz birçok farklı kalıp vardır. Yalnızca bir dili destekleyen ortamımız göz önüne alındığında, bu durumda ARIA etiketi basit bir seçenektir. ARIA etiketinin orijinal bağlantı metnini geçersiz kıldığını fark edebilirsiniz. Bu nedenle, güncellemenize bu bilgileri eklediğinizden emin olun.

<a href="https://rarediseases.org/rare-diseases/maple-syrup-urine-disease"
  aria-label="Learn more about Maple syrup urine disease on the Rare Diseases website.">
  Maple syrup urine disease (MSUD)
</a>

3. sorun: Dekoratif resim

Otomatik test modülümüzde Lighthouse, demo sayfamızdaki ana başlangıç resmi olarak çalışan satır içi SVG'yi yakalayamadı. Ancak ekran okuyucu, bu öğeyi bulur ve ek bilgi vermeden "resim" olarak duyurur. Bu durum, SVG'ye role="img" özelliği açıkça eklenmemiş olsa bile geçerlidir.

<div class="section-right">
  <svg>...</svg>
</div>

Sorunu çözelim.

Bu sorunu düzeltmek için öncelikle resmin bilgilendirici mi yoksa dekoratif mi olduğuna karar vermemiz gerekir. Bu karara bağlı olarak, uygun resim alternatif metnini (bilgilendirici resim) eklememiz veya resmi ekran okuyucu kullanıcılarından gizlememiz (dekoratif resim) gerekir.

Resmi en iyi şekilde kategorize etmenin avantaj ve dezavantajlarını değerlendirdik ve dekoratif olduğuna karar verdik. Bu nedenle, resmi gizlemek için kod eklemek veya mevcut kodu değiştirmek istiyoruz. SVG resmine doğrudan role="presentation" eklemek hızlı bir yöntemdir. Bu işlem, ekran okuyucuya bu resmi atlamasını ve resimler grubunda listelemesini belirten bir sinyal gönderir.

<div class="section-right">
  <svg role="presentation">...</svg>
</div>

Sorun 4: Mermi süsleme

Ekran okuyucunun, nadir hastalıklar bölümlerinin altındaki CSS madde işareti resmini okuduğunu fark etmiş olabilirsiniz. Resimler modülünde bahsettiğimiz geleneksel resim türü olmasa da içeriğin akışını bozduğu ve ekran okuyucu kullanıcısının dikkatini dağıtabileceği ya da kafasını karıştırabileceği için bu resmin değiştirilmesi gerekir.

<p class="bullet">...</p>

Sorunu çözelim.

Daha önce açıklanan dekoratif resim örneğinde olduğu gibi, ekran okuyucudan gizlemek için madde işareti sınıfına sahip HTML'ye role="presentation" ekleyebilirsiniz. Benzer şekilde, role="none" de kullanılabilir. aria-hidden: true kullanmamaya dikkat edin. Aksi takdirde, paragraf bilgilerinin tamamını ekran okuyucu kullanıcılarından gizlemiş olursunuz.

<p class="bullet" role="none">...</p>

Sorun 5: Form alanı

Formlar modülünde, tüm form alanlarının aynı zamanda bir görsel ve programatik etikete sahip olması gerektiğini öğrendik. Bu etiket her zaman görünür olmalıdır.

Demomuzda, bültene kaydolma e-posta alanımızda hem görsel hem de programatik etiket eksik. Metin yer tutucu öğesi vardır ancak bu öğe, görsel olarak kalıcı olmadığı ve tüm ekran okuyucularla tam uyumlu olmadığı için etiketin yerini almaz.

<form>
  <div class="form-group">
    <input type="email" placeholder="Enter your e-mail address" required>
    <button type="submit">Subscribe</button>
  </div>
</form>

Sorunu çözelim.

Bu sorunu düzeltmek için metin yer tutucusunu benzer bir etiket öğesiyle değiştirin. Bu etiket öğesi, forma programatik olarak bağlanır ve alana içerik eklendiğinde bile etiketin görünür kalması için hareket JavaScript ile eklenir.

<form>
  <div class="form-group">
    <input type="email" required id="youremail" name="youremail" type="text">
    <label for="youremail">Enter your e-mail address</label>
    <button type="submit" aria-label="Subscribe to our newsletter">Subscribe</button>
  </div>
</form>

Son adım

Tebrikler! Bu demoya ilişkin tüm testleri tamamladınız. Bu değişikliklerin tümünü bu demo için güncellenen Codepen'de inceleyebilirsiniz.

Artık öğrendiklerinizi kendi web sitelerinizin ve uygulamalarınızın erişilebilirliğini incelemek için kullanabilirsiniz.

Bu erişilebilirlik testlerinin tümünün amacı, kullanıcıların karşılaşabileceği tüm sorunları ele almaktır. Ancak bu, işiniz bittiğinde web sitenize veya uygulamanıza kusursuz şekilde erişilebildiği anlamına gelmez. Web sitenizi veya uygulamanızı süreç boyunca erişilebilirlik göz önünde bulundurularak tasarlayarak ve bu testleri lansman öncesi diğer testlerinize dahil ederek en iyi sonuçları elde edebilirsiniz.

Öğrendiklerinizi test etme

Otomatik erişilebilirlik testi hakkındaki bilgilerinizi test edin