Erişilebilirlik açısından inceleme

Rob Dodson

Web sitenizin veya uygulamanızın erişilebilir olup olmadığını belirlemek zor bir iş gibi görünebilir. Erişilebilirlik konusuna ilk kez yaklaşıyorsanız konunun genişliği nedeniyle nereden başlayacağınızı bilemeyebilirsiniz. Sonuçta, farklı yeteneklere uyum sağlamak için çalışmak, buna karşılık olarak dikkate alınması gereken çeşitli sorunlar olduğu anlamına gelir.

Bu yayında, mevcut bir sitenin erişilebilirliğini incelemek için bu sorunlar mantıklı ve adım adım bir sürece ayrılmıştır.

Klavyeyi kullanmaya başlama

Fare kullanamayan veya kullanmayı tercih etmeyen kullanıcılar için ekrandaki her şeye ulaşmanın birincil yolu klavye gezinmesidir. Bu kitleye, tekrarlanan stres yaralanması (RSI) veya felç gibi motor bozuklukları olan kullanıcıların yanı sıra ekran okuyucu kullanıcıları da dahildir.

İyi bir klavye deneyimi için mantıklı bir sekme sırası ve net bir şekilde ayırt edilebilir odak stilleri kullanmaya çalışın.

  • Sitenizde sekme tuşuyla gezinmeye başlayın. Öğelerin odaklanma sırası DOM sırasını izlemelidir. Hangi öğelerin odaklanmaya uygun olduğundan emin değilseniz Erişilebilirliği Öğrenme kursundaki odaklanma modülüne göz atın. Kullanıcının etkileşimde bulunabileceği veya giriş sağlayabileceği tüm kontrollerin odaklanılabilir olması ve bir odak göstergesi (ör. odak halkası) göstermesi en iyi uygulamadır.

  • Özel etkileşimli kontrollere odaklanılabilir olmalıdır. Bir <div> öğesini şık bir açılır menüye dönüştürmek için JavaScript kullanırsanız bu öğe sekme sırasına otomatik olarak eklenmez. Özel bir kontrolün odaklanılabilir olmasını istiyorsanız tabindex="0" ekleyin. 0'dan büyük tabindex değerleri sekme sırasını değiştirir ve ekran okuyucu kullanıcıları için kafa karıştırıcı olabilir.

  • Yalnızca etkileşimli içerikleri odaklanılabilir hale getirin. Başlıklar gibi etkileşimli olmayan öğelere tabindex eklemek, ekranı görebilen klavye kullanıcılarını yavaşlatır ve ekran okuyucu bu öğeleri zaten bildiği için ekran okuyucu kullanıcılarına yardımcı olmaz.

  • Bir sayfaya yeni içerik eklerseniz kullanıcının bu içerikle ilgili işlem yapabilmesi için önce kullanıcının dikkatini bu içeriğe yönlendirin. Örnekler için Odak noktasını sayfa düzeyinde yönetme başlıklı makaleyi inceleyin.

  • Sitenizi, kullanıcının istediği zaman bir sonraki öğeye odaklanabileceği şekilde tasarlayın. Klavye odağını tuzaklayabilecek otomatik tamamlama widget'larına ve diğer bağlamlara dikkat edin. Kullanıcının sayfanın geri kalanıyla değil, bir modal pencereyle etkileşim kurmasını istediğinizde odağı geçici olarak kilitleyebilirsiniz. Ancak her zaman klavyeden erişilebilen bir modal pencereden çıkma yöntemi sunmanız gerekir. Örnek için Modal Pencereler ve Klavye Tuzaklarına bakın.

Odak kontrolünü kullanılabilir hale getirme

Özel bir kontrol oluşturduysanız kullanıcılarınızın yalnızca klavyeyi kullanarak bu kontrolün tüm özelliklerine erişmesine izin verin. Klavye erişimini iyileştirme teknikleri için Bileşenlerde Odak Noktasını Yönetme başlıklı makaleyi inceleyin.

Ekran dışındaki içeriği yönetme

Çoğu sitede DOM'de bulunduğu halde görünmeyen ekran dışı içerikler yer alır. Bu içeriklere örnek olarak duyarlı çekmece menüsündeki bağlantıları veya henüz görüntülenmemiş bir kalıcı pencerenin içindeki bir düğmeyi gösterebiliriz. Bu öğelerin DOM'de bırakılması, özellikle de ekran okuyucuların sayfanın bir parçası olan ekran dışı içerikleri duyuracak olması durumunda akıl karıştırıcı bir klavye deneyimine yol açabilir.

Bu öğeleri ele almayla ilgili ipuçları için Ekran dışı içerikleri ele alma başlıklı makaleyi inceleyin.

Ekran okuyucuyla test etme

Genel klavye desteğini iyileştirmek, bir sonraki adım için zemin hazırlar. Bu adımda, sayfanın etiketleme ve anlam açısından uygun olup olmadığı ve ekran okuyucu gezinmesine engel olan herhangi bir şey olup olmadığı kontrol edilir.

Anlamsal işaretlemenin yardımcı teknolojiler tarafından nasıl yorumlandığını bilmiyorsanız İçerik yapısı başlıklı makaleyi okuyun.

  • Tüm resimlerde doğru alt metnini kontrol edin. Bu uygulamanın istisnası, resimlerin öncelikle sunum amacıyla kullanıldığı ve önemli içerik parçaları olmadığı durumlardır. Ekran okuyucuların bir resmi atlamasını belirtmek için değeri boş bir dize olarak ayarlayın: alt="".
  • Bir etiketin tüm denetimlerini kontrol edin. Özel kontroller için aria-label veya aria-labelledby kullanılması gerekebilir. Örnekler için ARIA Etiketleri ve İlişkileri bölümüne bakın.
  • Tüm özel kontrollerde uygun bir role ve durumlarını bildiren gerekli ARIA özelliklerinin olup olmadığını kontrol edin. Örneğin, özel onay kutusunun durumunu doğru şekilde iletmesi için bir role="checkbox" ve aria-checked="true|false" öğesine ihtiyacı vardır. ARIA'nın özel kontroller için eksik anlamları nasıl sağlayabileceğine dair genel bir genel bakış için ARIA'ya Giriş başlıklı makaleyi inceleyin.
  • Sayfanızdaki bilgi akışının anlamlı olmasını sağlayın. Ekran okuyucular sayfada DOM sırasına göre gezindiği için CSS kullanarak görsel olarak yeniden konumlandırdığınız tüm öğeleri anlamsız bir sırada duyurur. Bir öğenin sayfanın daha önce görünmesi gerekiyorsa öğeyi DOM'da fiziksel olarak daha öne taşıyın.
  • Sayfadaki tüm içerik için ekran okuyucu gezinmesini desteklemeyi hedefleyin. Sitenin hiçbir bölümünün kalıcı olarak gizlenmediğinden veya ekran okuyucu erişiminin engellenmediğinden emin olun.
    • Ekran okuyucudan gizlenmesi gereken içerikler (ör. ekran dışındaysa veya yalnızca sunum amaçlıysa) aria-hidden="true" olarak ayarlanmalıdır. Daha ayrıntılı bilgi için İçerikleri gizleme başlıklı makaleyi inceleyin.

Ekran okuyucularla ilgili bilgi edinme

Ekran okuyucu kullanmayı öğrenmek zor görünse de ekran okuyucuların anlaşılması aslında oldukça kolaydır. Çoğu geliştirici genellikle birkaç basit temel komutu kullanarak ekran okuyuculardan yararlanabilir.

Mac kullanıyorsanız macOS'in ekran okuyucusu VoiceOver hakkındaki bu videoyu izleyin. PC kullanıyorsanız Windows için bağışla desteklenen açık kaynak ekran okuyucu NVDA hakkındaki bu videoyu izleyin.

aria-hidden, klavye odağını engellemiyor

ARIA'nın yalnızca bir öğenin anlamını etkileyebileceğini, öğenin davranışını etkilemediğini anlamak önemlidir. aria-hidden="true" ile bir öğeyi ekran okuyucuları için gizleyebilirsiniz ancak bu, söz konusu öğenin odaklanma davranışını değiştirmez. Ekran dışındaki etkileşimli içerikler için, klavye akışından gerçekten kaldırıldığından emin olmak amacıyla inert özelliğini kullanın. Eski tarayıcılar için aria-hidden="true" ile tabindex="-1"'yi birleştirin.

Etkileşimli öğeler, amaçlarını ve durumlarını belirtmelidir

Bir kontrolün ne yapacağını gösteren görsel ipuçları veya uygunluklar, çeşitli cihazlarda bulunan çeşitli kullanıcıların sitenizde gezinmesine ve sitenizi kullanmasına yardımcı olur.

  • Bağlantılar ve düğmeler gibi etkileşimli öğeler, etkileşimli olmayan öğelerden ayırt edilebilir olmalıdır. Bir öğenin tıklanabilir olup olmadığını anlayamayan kullanıcıların sitede veya uygulamada gezinmesi zordur. Etkileşimli öğeleri belirtmenin birçok geçerli yolu vardır. Bağlantıları, etrafındaki metinden ayırt etmek için alt çizgiyle vurgulamak yaygın bir uygulamadır.
  • Odak koşuluna benzer şekilde, bağlantılar ve düğmeler gibi etkileşimli öğeler, fare kullanıcılarına işaretçilerinin tıklanabilir bir öğenin üzerinde olduğunu bildirmek için hover durumuna ihtiyaç duyar. Ancak bu öğelerin diğer giriş yöntemleri tarafından erişilebilir olması için hover durumu olmadan ayırt edilebilir olmaları gerekir.

Başlıklardan ve önemli noktalardan yararlanın

Başlıklar ve yer işareti öğeleri, sayfanıza anlamsal yapı sağlar ve yardımcı teknoloji kullanıcılarının gezinme verimliliğini büyük ölçüde artırır. Birçok ekran okuyucu kullanıcısı, aşina olmadıkları bir sayfaya ilk kez geldiklerinde genellikle başlıklara göre gezinmeye çalıştıklarını bildirir.

Benzer şekilde, ekran okuyucular <main> ve <nav> gibi önemli belirgin işaretlere atlama olanağı da sunar. Bu nedenle, sayfanızı kullanıcı deneyimine rehberlik edecek şekilde nasıl yapılandırabileceğinizi düşünmeniz önemlidir.

  • h1-h6 hiyerarşisini kullanın. Başlıkları, sayfanız için bir anahat oluşturmaya yarayan araçlar olarak düşünün. Başlıkların yerleşik stillerine güvenmeyin. Bunun yerine, bunların tümü aynı boyuttaymış gibi davranın ve birincil, ikincil ve üçüncül içerik için anlamsal olarak uygun düzeyi kullanın. Ardından, başlıkları tasarımınızla eşleştirmek için CSS'yi kullanın.
  • Kullanıcıların tekrarlanan içerikleri atlayabilmesi için yer işareti öğelerini ve rollerini kullanın. Birçok yardımcı teknoloji, sayfanın belirli bölümlerine (ör. <main> veya <nav> öğeleriyle tanımlananlar) atlamak için kısayollar sağlar. Bu öğelerin örtük yer işareti rolleri vardır. <div role="search">'te olduğu gibi sayfadaki bölgeleri açıkça tanımlamak için ARIA role özelliğini de kullanabilirsiniz. Daha fazla örnek için Anlam ve içerikte gezinme başlıklı makaleyi inceleyin.
  • role="application" ile çalışma deneyiminiz yoksa bu yöntemi kullanmayın. application yer işareti rolü, yardımcı teknolojiye kısayollarını devre dışı bırakmasını ve tüm tuş basma işlemlerini sayfaya iletmesini söyler. Bu, ekran okuyucu kullanıcılarının genellikle sayfa içinde gezinmek için kullandığı tuşların artık çalışmadığı anlamına gelir. Ayrıca, klavyeyle ilgili tüm işlemleri kendiniz uygulamanız gerekir.

Ekran okuyucuyla başlıkları ve önemli yerleri inceleme

VoiceOver ve NVDA gibi ekran okuyucular, sayfadaki önemli bölgelere atlamak için bir bağlam menüsü sağlar. Erişilebilirlik testi yaparken bu menüleri kullanarak sayfaya genel bir bakış atabilir, başlık düzeylerinizin uygun olup olmadığını ve hangi yer işaretlerinin kullanıldığını belirleyebilirsiniz.

Daha fazla bilgi edinmek için VoiceOver ve NVDA ile ilgili temel bilgiler içeren bu eğitim videolarına göz atın.

Süreci otomatikleştirin

Bir sitenin erişilebilirliğini manuel olarak test etmek zahmetli ve hatalara açık olabilir. Mümkün olduğunca testleri otomatikleştirme faydalıdır. Tarayıcı uzantılarını ve komut satırı erişilebilirlik test paketlerini kullanabilirsiniz.

  • Sayfa, aXe veya WAVE tarayıcı uzantılarındaki tüm testleri geçiyor mu? Kullanabileceğiniz başka seçenekler de vardır ancak bu uzantılar, kontrast oranlarının yetersiz olması ve ARIA özelliklerinin eksik olması gibi ince sorunları tespit edebildikleri için manuel test süreçlerine yararlı bir katkı olabilir.
    • Komut satırında çalışmayı tercih ediyorsanız axe-cli, aXe tarayıcı uzantısıyla aynı özellikleri sunar ancak terminalinizden çalıştırılabilir.
  • Özellikle sürekli entegrasyon ortamında gerilemelerden kaçınmak için otomatik test paketinize axe-core gibi bir kitaplık ekleyin. axe-core, aXe Chrome uzantısını destekleyen motorun komut satırı yardımcı programıdır.
  • Kullandığınız çerçeve veya kitaplık kendi erişilebilirlik araçlarını sağlıyor mu? Örneğin, Angular için protractor-accessibility-plugin. Mümkün olduğunda mevcut araçlardan yararlanın.

PWA'ları test etmek için Lighthouse'ı kullanma

Lighthouse, progresif web uygulamanızın (PWA) performansını ölçen bir araçtır. Ayrıca erişilebilirlik testlerini desteklemek için axe-core kitaplığını kullanır.

Lighthouse'u zaten kullanıyorsanız raporunuzda başarısız erişilebilirlik testlerini arayın. Sitenizin genel kullanıcı deneyimini iyileştirmek için hataları düzeltin.

Ek kaynaklar