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 | OS | Tarayıcı uyumluluğu |
---|---|---|
İşe Sesle Erişim (JAWS) | Windows | Chrome, Firefox, Edge |
Görsel Olmayan Masaüstü Erişimi (NVDA) | Windows | Chrome ve Firefox |
Narrator | Windows | Edge |
VoiceOver | macOS | Safari |
Orca | Linux | Firefox |
TalkBack | Android | Chrome ve Firefox |
VoiceOver (mobil cihazlar için) | iOS | Safari |
ChromeVox | ChromeOS | Chrome |
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ı
Öğe | NVDA (Windows) | VoiceOver (macOS) |
---|---|---|
Genel komut tuşları | Ekle | Control+Option |
Sesi durdur | Denetim | Denetim |
Sonraki/önceki sayfayı okuma | ↓ veya ↑ | Denetleyici+Option+→ veya ← |
Okumaya başlama | Ekle↓ | Control+Option+A |
Öğe Listesi/Rotor | NVDA + F7 | Control+Option+U |
Önemli noktalar | D | Control+Option+U |
Başlıklar | H | Control+Option+Command+H |
Bağlantılar | K | Control+Option+Command+L |
Form denetimleri | O | Control+Option+Command+J |
Tablolar | T | Denetleme+OptionCommand+T |
Tablolar İçinde | Ekle Alt + ↓ ↑ ← → | Denetleyici+Option+↓ ↑ ← → |
Mobil ekran okuyucular için tuş komutları
Öğe | TalkBack (Android) | VoiceOver (iOS) |
---|---|---|
Keşfet | Bir parmağınızı ekranda sürükleyin | Bir parmağınızı ekranda sürükleyin |
Seçin veya etkinleştirin | İki kez dokunun | İki kez dokunun |
Yukarı veya aşağı taşıma | İki parmağınızla yukarı veya aşağı kaydırın | Üç parmağınızla yukarı veya aşağı kaydırın |
Sayfaları değiştirme | İki parmağınızla sola veya sağa kaydırın | Üç parmağınızla sola veya sağa kaydırın |
Sonraki/önceki | Tek parmağınızla sola veya sağa kaydırın | Tek parmağınızla sola veya sağa kaydırın |
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.
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>
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>
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>
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>
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.
Erişilebilirliği test etmek için kullanılabilecek en iyi ekran okuyucu nedir?
Yardımcı teknolojiyle test yapmanın amacı nedir?