Bu modül, erişilebilirlik testi için yardımcı teknoloji (AT) kullanmaya odaklanmaktadır. Engelli bir kişi bir görevi yerine getirme becerilerini artırmak, sürdürmek veya iyileştirmek için AT'yi kullanabilir.
Dijital ortamda AT'ler şunlar olabilir:
- Hayır/Düşük teknoloji: baş/ağız çubukları, el büyüteçleri, büyük düğmeli cihazlar
- İleri teknoloji: sesle etkinleştirilen cihazlar, göz izleme cihazları, uyarlanabilir klavyeler/fareler
- 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 test etmeyle 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 temel kodunu okuyan bir yazılım parçasıdır. Daha sonra bu bilgiyi kullanıcı için konuşmaya veya Braille çıkışına dönüştürür.
Ekran okuyucular görme engelli ve işitme engelli kişiler için son derece önemli olsa da az gören, 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çinse VoiceOver ve Talkback'tir.
İşletim sisteminize (OS), favori tarayıcınıza ve kullandığınız cihaza bağlı olarak, bir ekran okuyucu en iyi seçenek olarak öne çıkabilir. Çoğu ekran okuyucu, belirli donanımlar ve web tarayıcıları dikkate alınarak oluşturulmuştur. Bir ekran okuyucuyu kalibre edilmemiş bir tarayıcıyla kullandığınızda daha fazla "hata" veya beklenmeyen davranışla karşılaşabilirsiniz. Ekran okuyucular aşağıdaki kombinasyonlarda kullanıldığında en iyi performansı gösterir.
Ekran okuyucu komutları
Masaüstü veya mobil cihazınız için ekran okuyucu yazılımınız için uygun ayarları yaptıktan sonra, teknolojiyi daha yakından tanımak için ekran okuyucunun dokümanlarına (önceki tabloda bağlantısı verilmiştir) bakmanız ve bazı gerekli ekran okuyucu komutlarını incelemeniz gerekir. Daha önce bir ekran okuyucu kullandıysanız yeni bir tane denemeyi düşünün!
Erişilebilirlik testi için ekran okuyucu kullanırken hedefiniz, ekran okuyucu kullanıcılarının deneyimine öykünmek değil, kodunuzdaki web sitenizin veya uygulamanızın kullanımını engelleyen sorunları tespit etmektir. Bu nedenle bazı temel bilgiler, birkaç ekran okuyucu komutu ve biraz (veya biraz) pratikle birçok şey yapabilirsiniz.
Ekran okuyucu ve diğer AT'leri kullanan kişilerin kullanıcı deneyimini daha iyi anlamak isterseniz bu değerli bilgiyi edinmek için birçok kuruluş ve kişiyle etkileşim kurabilirsiniz. AT kullanarak kodu bir dizi kurala göre test etmenin ve kullanıcılardan deneyimleri hakkında sorular sormanın genellikle farklı sonuçlar verdiğini unutmayın. Tamamen kapsayıcı ürünler üretmek için bunların her ikisi de önemli unsurlardır.
Masaüstü ekran okuyucular için tuş komutları
Mobil cihaz ekran okuyucular için tuş komutları
Ekran okuyucu test demosu
Demomuzu test etmek için, MacOS çalıştıran bir dizüstü bilgisayarda Safari kullandık ve sesi yakaladık. Herhangi bir ekran okuyucu kullanarak bu adımları uygulayabilirsiniz ancak bazı hatalarla karşılaşma şekliniz bu modülde anlatılandan 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 işlem, demo web sayfasını çevreleyen <iframe> öğesini kaldırdığı ve bazı test araçlarının çalışmasını etkileyebileceğinden önemlidir. CodePen'in hata ayıklama modu hakkında daha fazla bilgi
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.
Her sorun için düzeltmeler demoya uygulanmadan önce ve uygulandıktan sonra 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 okuyucular kullanarak gezinmek için kullandıkları başlıca yollardan biridir. Bunlar mevcut değilse ekran okuyucu kullanıcısının bağlamı anlamak için sayfanın tamamını okuması gerekir. Bu çok zaman alabilir ve hayal kırıklığına neden olabilir. Demodaki öğelerden herhangi birine göre gezinmeye çalışırsanız bu öğelerin var olmadığını hızlı bir şekilde keşfedeceksiniz.
- Önemli nokta örneği:
<div class="main">...</div> - Başlık örneği:
<p class="h1">Join the Club</p>
Her şeyi doğru bir şekilde güncellediyseniz herhangi bir görsel değişiklik olmayacaktır, ancak 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 seviyeleri ve anlamsal HTML'nin önemini hatırlayabilirsiniz. Bir içerik başlık gibi görünebilir ancak içerik aslında stilize edilmiş bir <div> ile sarmalanmış.
Başlıklar ve önemli noktalarla ilgili sorunu düzeltmek için, öncelikle bu şekilde işaretlenmesi gereken her bir öğeyi belirlemeniz 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 bir şekilde güncellediyseniz herhangi bir görsel değişiklik olmayacaktır, ancak ekran okuyucu deneyiminiz büyük ölçüde iyileşecektir.
2. Sorun: Bağlantı bağlamı
Ekran okuyucu kullanıcılarına, bir bağlantının amacını ve bağlantının kullanıcıları web sitesi ya da uygulamanın dışında yeni bir konuma yönlendirip yönlendirmediğini vermeniz önemlidir.
Demomuzda, etkin görsel alternatif metnini güncellediğimizde bağlantıların çoğunu düzelttik. Ancak özellikle yeni bir konuma yönlendiren bağlantılar olmak üzere, ek bağlamdan yararlanabilecek ç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>
Ekran okuyucu kullanıcıları için bu sorunu düzeltmek amacıyla kodu, görseller öğesini etkilemeden daha fazla bilgi ekleyecek şekilde güncelleriz. Okuma ve bilişsel bozukluğu olanlar gibi daha fazla kişiye yardımcı olmak için bunun yerine görsel metin eklemeyi seçebiliriz.
Ek bağlantı bilgileri eklemeyi düşünebileceğimiz birçok farklı kalıp vardır. Yalnızca bir dili destekleyen basit ortamımıza dayanarak 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 bilgiyi 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 başlangıç resmi olarak kullanılan satır içi SVG'yi seçemedi, ancak ekran okuyucu bunu bulup ek bilgi olmaksızın "resim" olarak duyuruyor. Bu durum, role="img" özelliği SVG'ye açıkça eklenmeden de 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 göre uygun görsel alternatif metnini eklememiz (bilgilendirici resim) veya resmi ekran okuyucu kullanıcılarından gizlememiz (dekoratif) gerekir.
Resmi en iyi şekilde kategorize etmenin artılarını ve eksilerini değerlendirdik ve dekoratif olduğuna karar verdik. Bu nedenle, resmi gizlemek için kodu eklemek veya değiştirmek istiyoruz. Doğrudan SVG resmine role="presentation" eklemek, hızlı bir yöntemdir. Bu işlem, ekran okuyucuya söz konusu resmi atlaması ve bu resmi resim grubunda listelememesi için bir sinyal gönderir.
<div class="section-right">
<svg role="presentation">...</svg>
</div>
4. Sorun: Madde işareti süsleme
Ekran okuyucunun nadir hastalıklar bölümlerinin altındaki CSS madde işaretini okuduğunu fark etmiş olabilirsiniz. Görseller modülünde tartıştığımız geleneksel görsel türü olmasa da, resim yine de 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 değiştirilmesi gerekir.
<p class="bullet">...</p>
Daha önce bahsettiğimiz dekoratif resim örneğine benzer şekilde, HTML'ye madde işareti sınıfıyla role="presentation" ekleyerek ekran okuyucudan gizleyebilirsiniz. Benzer şekilde, role="none" kullanılabilir. Ancak aria-hidden: true uygulamasını 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>
5. Sorun: Form alanı
Formlar modülünde, tüm form alanlarının görsel ve programatik bir etiketi olması gerektiğini de öğ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. Bir metin yer tutucu öğesi vardır ancak görsel olarak kalıcı olmadığından ve tüm ekran okuyucularla tam olarak uyumlu olmadığından bu öğe 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 programlı bir şekilde bağlanmıştır ve alana içerik eklendiğinde bile etiketin görünür kalması için JavaScript ile hareket 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 demonun tüm testlerini tamamladınız. Bu değişikliklerin tümünü bu demo için güncellenmiş Codepen'de inceleyebilirsiniz.
Artık kendi web sitelerinizin ve uygulamalarınızın erişilebilirliğini incelemek için öğrendiklerinizi kullanabilirsiniz.
Tüm bu erişilebilirlik testlerinin amacı, kullanıcıların karşılaşabileceği olası çok sayıda sorunu ele almaktır. Ancak bu, işlemi tamamladığınızda web sitenize veya uygulamanıza tam olarak erişilebileceği anlamına gelmez. En yüksek başarıyı, web sitenizi veya uygulamanızı süreç boyunca erişilebilirlikle tasarlayarak ve bu testleri lansman öncesi diğer testlerinize dahil ederek bulabilirsiniz.
Öğrendiklerinizi sınayın
Otomatik erişilebilirlik testi bilginizi test edin
Erişilebilirliği test etmek için kullanılacak en iyi ekran okuyucu hangisidir?
Yardımcı teknolojilerle test yapmanın amacı nedir?