Yardımcı Teknoloji testi

Bu modül, erişilebilirlik testi için yardımcı teknolojileri (AT) kullanmaya odaklanmaktadır. Engelli bir kişi bir görevi yerine getirme kapasitesini artırmak, sürdürmek veya iyileştirmek için AT'yi kullanabilir.

Dijital alanda AT'ler şöyle olabilir:

• Yok/düşük teknolojili: baş/ağız çubukları, elde kullanılan büyüteçler, büyük düğmeli cihazlar
• İleri teknoloji: sesle etkinleştirilen cihazlar, göz izleme cihazları, uyarlanabilir klavyeler/mikrofonlar
• Donanım: değiştirme düğmeleri, ergonomik klavyeler, otomatik 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 testiyle ilgili temel bilgiler

Bu modülde, en popüler dijital AT'lerden biri olan ekran okuyuculara odaklanacağız. Ekran okuyucu, bir web sitesinin veya uygulamanın altındaki kodu okuyan yazılım parçalarıdır. Ardından bu bilgileri kullanıcı için konuşmaya veya Braille çıkışına dönüştürür.

Ekran okuyucular görme engelliler ve işitme engelliler için son derece önemli olsa da az görme, okuma bozukluğu veya zihinsel engelli kişiler için de faydalı olabilir.

Tarayıcı uyumluluğu

Birden fazla ekran okuyucu seçeneği vardır. Günümüzde en popüler ekran okuyucular masaüstü bilgisayarlar için JAWS, NVDA ve VoiceOver, mobil cihazlar için 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 tasarlanmıştır. Ekran okuyucuları kalibre edilmemiş bir tarayıcıyla kullandığınızda daha fazla "hata"yla karşılaşabilirsiniz tespit edebilirsiniz. Ekran okuyucular en iyi performansı aşağıdaki kombinasyonlarda kullanıldığında gösterir.

Ekran okuyucu komutları

Ekran okuyucu yazılımınız masaüstünüze veya mobil cihazınıza uygun şekilde ayarlandıktan sonra ekran okuyucu dokümanlarına (önceki tabloda bağlantısı verilmiştir) bakmanız ve teknolojiyi tanımak için bazı temel ekran okuyucu komutlarını gözden geçirmeniz gerekir. Daha önce ekran okuyucu kullandıysanız yeni bir ekran okuyucu denemeyi düşünün!

Erişilebilirlik testi için ekran okuyucu kullandığınızda 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ı algılamaktır. Bu nedenle, birtakım temel bilgiler, birkaç ekran okuyucu komutuyla ve biraz ya da bol bol pratik yaparak yapabileceğiniz pek çok şey var.

Ekran okuyucu ve diğer AT'leri kullanan kişilerin kullanıcı deneyimini daha iyi anlamanız gerekiyorsa bu değerli bilgiyi elde etmek için birçok kuruluş ve kişiyle etkileşime geçebilirsiniz. Kodu bir dizi kurala göre test etmek için AT kullanmanın ve kullanıcılara deneyimleri hakkında soru sormanın genellikle farklı sonuçlar getirdiğini unutmayın. Bunları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 kullanarak ses kaydettik. Herhangi bir ekran okuyucuyu kullanarak bu adımları uygulayabilirsiniz, ancak bazı hatalarla karşılaşma şekliniz bu modülde açıklanandan farklı olabilir.

1. Adım

Güncellenmiş CodePen tüm otomatik ve manuel erişilebilirlik güncellemeleri uygulanmıştır.

İş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ı, bazı test araçlarını etkileyebilir. Daha fazla bilgi: CodePen'in hata ayıklama modu.

2. Adım

İstediğiniz ekran okuyucuyu etkinleştirip demo sayfasına gidin. Belirli sorunlara odaklanmadan önce sayfanın tamamında yukarıdan aşağıya doğru gezinmeyi düşünebilirsiniz.

Düzeltmeler demoya uygulanmadan önce ve uygulandıktan sonra her sorun için ekran okuyucumuzu kaydettik. Demoyu kendi ekran okuyucunuzla çalıştırmanızı öneririz.

1. Sorun: İçerik yapısı

Başlıklar ve önemli noktalar, kullanıcıların ekran okuyucularla gezinmeyi kullandıkları başlıca yöntemlerden biridir. Bunlar mevcut değilse ekran okuyucu kullanıcısının bağlamı anlamak için sayfanın tamamını okuması gerekir. Bu işlem çok fazla zaman alabilir ve hayal kırıklığına neden olabilir. Demodaki iki öğeden birine göre gezinmeye çalışırsanız bunların mevcut olmadığını hemen 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 olmayacaktır. Yine de ekran okuyucu deneyiminiz büyük ölçüde iyileşecektir.

Bu sorunu çözelim.

Erişilemeyen bazı öğeler yalnızca siteye bakılarak incelenemez. İçerik yapısı modülünden, başlık düzeylerinin ve anlamsal HTML'nin önemini hatırlayabilirsiniz. İçerik, başlık gibi görünse de aslında stilize edilmiş bir <div> içinde yer alır.

Başlıklar ve önemli noktalarla ilgili sorunu düzeltmek için öncelikle bu şekilde işaretlenmesi gereken her bir öğ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 olmayacaktır. Yine de ekran okuyucu deneyiminiz büyük ölçüde iyileşecektir.

Sorun 2: Bağlantı bağlamı

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

Demomuzda, etkin resmin alternatif metnini güncellerken bağlantıların çoğunu düzelttik ancak çeşitli nadir hastalıklarla ilgili, özellikle de yeni bir konuma yönlendirme yaptıkları için bağlam bilgisi sağlayabilecek çeşitli nadir hastalıklarla ilgili birkaç ek bağlantı bulabilirsiniz.

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

Bu sorunu çözelim.

Ekran okuyucu kullanıcıları için bu sorunu düzeltmek amacıyla görsel öğeyi etkilemeden daha fazla bilgi eklemek için kodu güncelleriz. Okuma ve bilişsel bozuklukları olan kullanıcılar gibi daha fazla kişiye yardımcı olmak için bunun yerine ilave görsel metin ekleyebiliriz.

Ek bağlantı bilgileri eklemek için değerlendirebileceğimiz birçok farklı kalıp vardır. Yalnızca bir dili destekleyen basit ortamımıza göre ARIA etiketi bu durumda kolay bir seçenektir. ARIA etiketinin orijinal bağlantı metnini geçersiz kıldığını fark edebilirsiniz. Bu nedenle, güncellemeye bu bilgiyi mutlaka ekleyin.

<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 işlev gören satır içi SVG'yi alamadı. Ancak ekran okuyucu bunu bulup "resim" olarak duyurur ek bilgi olmadan. Bu durum, SVG'ye role="img" özelliği açıkça eklenmese bile geçerlidir.

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

Bu sorunu çözelim.

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

Resmi en iyi şekilde kategorize etmenin avantajlarını ve dezavantajlarını değerlendirdik ve resmin 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ı ve resim grubuna eklememesi için bir sinyal gönderir.

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

Sorun 4: Madde işareti süslemesi

Ekran okuyucunun bölümü bulunuyor. Geleneksel görsel türü olmasa da resimler modülünde anlatıldığı gibi, resmin çalışmasını kesintiye uğratacağı için yine de ve ekran okuyucu kullanıcılarının dikkatini dağıtabilecek ya da kafalarını karıştırabilecek.

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

Bu sorunu çözelim.

Daha önce açıklanan dekoratif resim örneğine benzer şekilde, ekran okuyucudan gizlemek için HTML'ye madde işareti sınıfıyla bir role="presentation" ekleyebilirsiniz. Benzer şekilde, role="none" kullanılabilir. Ancak aria-hidden: true kullanmadığınızdan emin olun. Aksi takdirde, tüm paragraf bilgilerini ekran okuyucu kullanıcılarından gizlemiş olursunuz.

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

Sorun 5: Form alanı

Formlar modülünde, tüm formların alanlarında görsel ve programatik etiket de olmalıdır. Bu etiket kalmalıdır her zaman görünür olması gerekir.

Demomuzda, bültene kaydolma e-posta alanımızda hem görsel hem de programatik etiket eksik. Bir metin yer tutucu öğesi vardır ancak bu öğe, görsel olarak kalıcı olmadığı ve tüm ekran okuyucularla tam olarak 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>

Bu sorunu çözelim.

Bu sorunu düzeltmek için metin yer tutucusunu benzer bir etiket öğesiyle değiştirin. Bu etiket öğesi programlı bir şekilde form alanına bağlanmıştır ve alana içerik eklendiğinde bile etiketin görünür kalması için hareket JavaScript ile eklenmiştir.

<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. Tüm bu değişiklikleri bu demo için güncellenmiş Codepen'de inceleyebilirsiniz.

Şimdi, öğrendiklerinizi kullanarak kendi uygulamanızın erişilebilirliğini inceleyebilirsiniz. web siteleri ve uygulamalar için geçerlidir.

Bu erişilebilirlik testinin amacı, mümkün olan en fazla sayıda karşılaşabileceği sorunlar. Ancak bu, web sitenizin veya uygulamanızın kolayca erişilebilir hale getirebilirsiniz. En başarılı başarı kriterlerini Web sitenizi veya uygulamanızı süreç boyunca erişilebilir olacak şekilde tasarlama ve ve bu testleri diğer lansman öncesi testlerinizle bir araya getirmelisiniz.

Öğrendiklerinizi sınayın

Otomatik erişilebilirlik testi hakkındaki bilginizi test edin