Bu modülde, erişilebilirlik testleri için yardımcı teknolojileri (AT) kullanmaya odaklanılmaktadır. Engelli bireyler, bir görevi yerine getirme becerilerini artırmak, sürdürmek veya geliştirmek için yardımcı teknolojilerden yararlanabilir.
Dijital alanda, DT'ler:
- Teknolojinin kullanılmadığı veya az kullanıldığı yöntemler: baş ve ağız çubukları, elde tutulan büyüteçler, büyük düğmeli cihazlar
- Yüksek teknoloji: sesle etkinleştirilen cihazlar, göz takip cihazları, uyarlanabilir klavyeler ve fareler
- Donanım: anahtar 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 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ımdır. Ardından bu bilgileri kullanıcı için konuşma veya Braille çıkışına dönüştürür.
Ekran okuyucular, görme ve işitme engelli kişiler için vazgeçilmezdir. 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 mevcuttur. En popüler ekran okuyucular masaüstü bilgisayarlarda JAWS, NVDA ve VoiceOver, mobil cihazlarda ise VoiceOver ve Talkback'tir.
İşletim sisteminize, favori tarayıcınıza ve kullandığınız cihaza bağlı olarak bir ekran okuyucu en iyi seçenek olabilir. Çoğu ekran okuyucu, belirli donanımlar ve web tarayıcıları dikkate alınarak geliştirilmiştir. Kalibre edilmediği bir tarayıcıyla ekran okuyucu kullandığınızda daha fazla "hata" veya beklenmedik davranışla karşılaşabilirsiniz. Ekran okuyucular en iyi aşağıdaki kombinasyonlarda çalışır.
| Ekran okuyucu | OS | Tarayıcı uyumluluğu |
|---|---|---|
| Job Access With Speech (JAWS) | Windows | Chrome, Firefox, Edge |
| Non-Visual Desktop Access (NVDA) | Windows | Chrome ve Firefox |
| Narrator | Windows | Edge |
| VoiceOver | macOS | Safari |
| Orca | Linux | Firefox |
| TalkBack | Android | Chrome ve Firefox |
| VoiceOver (mobil için) | iOS | Safari |
| ChromeVox | ChromeOS | Chrome |
Ekran okuyucu komutları
Masaüstü veya mobil cihazınızda ekran okuyucu yazılımınız için uygun kurulumu yaptıktan sonra ekran okuyucu belgelerine (önceki tabloda bağlantısı verilmiştir) göz atmanız ve teknolojiye alışmak için bazı temel ekran okuyucu komutlarını uygulamanız gerekir. Daha önce ekran okuyucu kullandıysanız yeni bir ekran okuyucu deneyebilirsiniz.
Erişilebilirlik testi için ekran okuyucu kullanırken amacınız, kodunuzda web sitenizin veya uygulamanızın kullanımını engelleyen sorunları tespit etmektir. Ekran okuyucu kullanıcısının deneyimini taklit etmek değildir. Bu nedenle, temel bilgiler, birkaç ekran okuyucu komutu ve biraz (veya çok) pratikle yapabileceğiniz çok şey var.
Ekran okuyucuları ve diğer AT'leri kullanan kişilerin kullanıcı deneyimini daha iyi anlamak istiyorsanız bu değerli bilgiyi edinmek için birçok kuruluş ve kişiyle iletişime geçebilirsiniz. Bir AT kullanarak kodu bir dizi kurala göre test etmenin ve kullanıcılara deneyimleri hakkında soru sormanı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 | kontrolü | kontrolü |
| Sonraki/önceki öğeyi okuma | ↓ veya ↑ | Control+Option+→ veya ← |
| Okumaya başla | 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 | Control+OptionCommand+T |
| Tabloların İçinde | Insert Alt + ↓ ↑ ← → | Control+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çme veya etkinleştirme | İki kez dokunma | İki kez dokunma |
| 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 test demosu
Demomuzu test etmek için macOS çalıştıran bir dizüstü bilgisayarda Safari'yi kullandık ve ses yakaladık. Bu adımları herhangi bir ekran okuyucuyla uygulayabilirsiniz ancak bazı hatalarla karşılaşma şekliniz bu modülde açıklananlardan farklı olabilir.
1. Adım
Tüm otomatik ve manuel erişilebilirlik güncellemelerinin uygulandığı güncellenmiş CodePen'i ziyaret edin.
Bir sonraki testlere devam etmek için hata ayıklama modunda görüntüleyin. Bu önemlidir. Çünkü demo web sayfasını çevreleyen <iframe> kaldırılır. Bu da bazı test araçlarıyla çakışabilir. CodePen'in hata ayıklama modu hakkında daha fazla bilgi edinin.
2. Adım
Seçtiğiniz ekran okuyucuyu etkinleştirin ve demo sayfasına gidin. Belirli sorunlara odaklanmadan önce sayfanın tamamında yukarıdan aşağıya doğru gezinebilirsiniz.
Düzeltmeler demoya uygulanmadan önce ve uygulandıktan sonra her sorun için ekran okuyucumuzu kaydettik. Demoyu kendi ekran okuyucunuzla incelemenizi öneririz.
1. sorun: İçerik yapısı
Başlıklar ve önemli noktalar, ekran okuyucuları kullanarak gezinmenin temel 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 biriyle gezinmeye çalışırsanız bu öğelerin olmadığını kısa sürede fark edersiniz.
- Önemli yer ö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 değişiklik olmaz ancak ekran okuyucu deneyiminiz önemli ölçüde iyileşir.
Gelin bu sorunu çözelim.
Erişilemeyen bazı öğeler, yalnızca siteye bakılarak gözlemlenemez. İçerik yapısı modülünde başlık düzeylerinin ve semantik HTML'nin öneminden bahsetmiştik. Bir içerik parçası başlık gibi görünebilir ancak içerik aslında stilize edilmiş bir <div> ile sarmalanmıştır.
Başlıklar ve önemli noktalarla ilgili sorunu düzeltmek için öncelikle bu şekilde 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 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 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 bilgi vermek önemlidir.
Demomuzda, etkin resim alternatif metnini güncellediğimizde bağlantıların çoğunu düzelttik. Ancak, özellikle yeni bir konuma yönlendirdikleri için ek bağlamdan yararlanabilecek çeşitli nadir hastalıklarla ilgili birkaç bağlantı daha 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, görsel öğeyi etkilemeden daha fazla bilgi eklemek üzere kodu güncelliyoruz. Okuma ve bilişsel bozuklukları olanlar gibi daha fazla kişiye yardımcı olmak için bunun yerine ek görsel metin eklemeyi de tercih edebiliriz.
Ek bağlantı bilgileri eklemek için dikkate alabileceğimiz birçok farklı desen vardır. Yalnızca tek bir dili destekleyen ortamımızda, bu durumda ARIA etiketi basit bir seçenektir. ARIA etiketinin orijinal bağlantı metnini geçersiz kıldığını fark edebilirsiniz. Bu nedenle, bu bilgileri güncellemenize 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 kullanılan satır içi SVG'yi algılayamadı. Ancak ekran okuyucu bu resmi bulur ve ek bilgi vermeden "resim" olarak duyurur.
Bu durum, role="img" özelliği SVG'ye 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 gerekiyor. 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 nasıl sınıflandıracağımızın avantajlarını ve dezavantajlarını değerlendirdik. Resmin dekoratif olduğuna karar verdik. Bu nedenle, resmi gizlemek için kodu eklemek veya değiştirmek istiyoruz. Hızlı bir yöntem, SVG resmine doğrudan role="presentation" eklemektir. Bu işlem, ekran okuyucuya bu resmi atlaması ve resim grubunda listelememesi için bir sinyal gönderir.
<div class="section-right">
<svg role="presentation">...</svg>
</div>
4. sorun: Madde işareti dekorasyonu
Ekran okuyucunun, nadir hastalıklar bölümlerinde CSS madde işareti resmini okuduğunu fark etmiş olabilirsiniz. Bu resim, Resimler modülünde bahsettiğimiz resimle aynı olmasa da içeriğin akışını bozduğu ve ekran okuyucu kullanıcısının dikkatini dağıtabileceği veya kafasını karıştırabileceği için yine de değiştirilmesi gerekir.
<p class="bullet">...</p>
Daha önce bahsedilen dekoratif resim örneğinde olduğu gibi, ekran okuyucudan gizlemek için madde işareti sınıfıyla HTML'ye role="presentation" ekleyebilirsiniz. Aynı şekilde, role="none" da işe yarar. aria-hidden: true kullanmadığınızdan emin olun. Aksi takdirde, paragraftaki tüm bilgiler ekran okuyucu kullanıcılarından gizlenir.
<p class="bullet" role="none">...</p>
5. sorun: Form alanı
Formlar modülünde, tüm form alanlarının görsel ve programatik bir etikete sahip olması gerektiğini öğrendik. Bu etiket her zaman görünür kalmalıdır.
Demomuzda, hem görsel hem de programatik etiketimiz eksik. 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 düzeltmek için metin yer tutucusunu benzer bir etiket öğesiyle değiştirin. Bu etiket öğesi, form alanına programatik olarak bağlanır ve içeriğin alana eklenmesi durumunda bile etiketin görünür kalması için JavaScript ile hareket 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>
Özet
Tebrikler! Bu demo için tüm testleri tamamladınız. Bu değişikliklerin tamamı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.
Tüm bu erişilebilirlik testlerinin amacı, kullanıcının karşılaşabileceği olası sorunların mümkün olduğunca çoğunu ele almaktır. Ancak bu, tamamladığınızda web sitenizin veya uygulamanızın mükemmel şekilde erişilebilir olduğu anlamına gelmez. Web sitenizi veya uygulamanızı tüm süreç boyunca erişilebilirlik göz önünde bulundurarak tasarlayıp bu testleri lansman öncesi diğer testlerinizle birlikte uyguladığınızda en iyi sonuçları elde edersiniz.