Yardımcı Teknoloji testi

Bu modül, erişilebilirlik testi için yardımcı teknolojilerin (AT) kullanımına odaklanmaktadır. Engelli bireyler, bir görevi gerçekleştirme becerilerini artırmak, sürdürmek veya geliş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: metni seslendirme programları, canlı altyazılar, ekran okuyucular

Genel test iş akışınızda birden fazla AT türünü 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. Ardından bu bilgileri kullanıcı için konuşmaya veya Braille çıkışı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ız ve kullandığınız cihaza bağlı olarak en iyi seçenek olarak bir ekran okuyucu öne çıkabilir. Çoğu ekran okuyucu, belirli donanımlar ve web tarayıcıları göz önünde bulundurularak tasarlanır. Bir ekran okuyucuyu, kalibre edilmediği bir tarayıcıda kullandığınızda daha fazla "hata" veya beklenmedik davranışla 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, temel düzeyde bilgi, birkaç ekran okuyucu komutu ve biraz (veya çok) alıştırma yaparak ç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 testi 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 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üzeltmeler demoya uygulanmadan önce ve uygulandıktan 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 öğelerden birine göre gezinmeye çalışırsanız bunların mevcut olmadığını hemen fark edersiniz.

• Ö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 görsel bir değişiklik olmayacaktır ancak ekran okuyucu deneyiminiz önemli ölçüde iyileşecektir.

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 görsel bir değişiklik olmayacaktır ancak ekran okuyucu deneyiminiz önemli ölçüde iyileşecektir.

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önlendirdikleri için ek bağlam bilgisinden yararlanabilecek birkaç ek bağlantı var.

<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 öğeyi etkilemeden daha fazla bilgi ekleyecek şekilde güncelliyoruz. Alternatif olarak, okuma ve bilişsel bozukluğu olan kişiler gibi daha fazla kişiye yardımcı olmak için bunun yerine ek görsel metin eklemeyi tercih edebiliriz.

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ızda ana açılış resmi olarak işlev gören satır içi SVG'yi algılayamadı. 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. Hızlı bir yöntem, doğrudan SVG resmine role="presentation" eklemektir. 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 bahsedilen dekoratif resim örneğine benzer şekilde, ekran okuyucudan gizlemek için HTML'ye role="presentation" öğesini nokta sınıfıyla 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 görsel ve programatik bir etikete de sahip olması gerektiğini öğrendik. Bu etiket her zaman görünür olmalıdır.

Demomuzda, bülten kaydı e-posta alanımızda hem görsel hem de programatik etiket eksik. Metin yer tutucu öğesi vardır ancak 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 demo için 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, tamamladığınızda web sitenizin veya uygulamanızın mükemmel bir şekilde erişilebilir olacağı 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.