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şilebilirliğe ilk kez giriyorsanız konunun çok kapsamlı olması nereden başlayacağınızı merak etmenize neden olabilir. Nihayetinde, farklı yetenekleri kapsamak amacıyla çalışmak, karşılık gelen ve aynı şekilde, göz önünde bulundurulması gereken bir dizi sorun olduğu anlamına gelir.

Bu gönderi, mevcut bir sitenin erişilebilirlik açısından incelenmesi için bu sorunları mantıklı ve adım adım açıklamalı bir sürece ayırmaktadır.

Klavyeyle başlama

Fare kullanamayan ya da kullanmamayı seçen kullanıcılar için ekrandaki her şeye erişmenin birincil yöntemi klavyeyle gezinmedir. Bu kitle, tekrarlayan stres yaralanması (RSI) veya felç gibi motor bozukluğu olan kullanıcıların yanı sıra ekran okuyucu kullanıcılarını da içerir.

İyi bir klavye deneyimi için mantıklı bir sekme sıralaması ve net bir şekilde ayırt edilebilir odak stilleri kullanmayı hedefleyin.

  • Sitenizde sekme tuşuyla gezinerek başlayın. Öğelerin odaklandığı sıra, DOM sırasına uygun olmalıdır. Hangi öğelere odaklanılması gerektiğinden emin değilseniz bilgilerinizi tazelemek için Odaklanmanın Temelleri bölümünü inceleyin. En iyi uygulama, bir kullanıcının etkileşimde bulunabileceği veya giriş sağlayabileceği tüm denetimlerin odaklanılabilir olması ve bir odak göstergesi (ör. odak halkası) göstermesidir.

  • Özel etkileşimli kontrollere odaklanılabilir olmalıdır. <div> öğesini gösterişli bir açılır menüye dönüştürmek için JavaScript kullanırsanız sekme sırasına otomatik olarak eklenmez. Bir özel kontrolü odaklanabilir hale getirmek için kontrole tabindex="0" verin. 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çeriğin odaklanılabilir olmasını sağlayın. Başlıklar gibi etkileşimli olmayan öğelere tabindex eklemek, ekranı görebilen klavye kullanıcılarını yavaşlatır ve ekran okuyucu onları duyurmayı zaten bildiğinden ekran okuyucu kullanıcılarına yardımcı olmaz.

  • Bir sayfaya yeni içerik eklerseniz kullanıcının işlem yapabilmesi için öncelikle bu içeriğe odaklanmasını sağlayın. Örnekler için Odağı Sayfa Düzeyinde Yönetme bölümüne bakın.

  • Sitenizi, kullanıcı istediğinde her zaman bir sonraki öğeye odaklanabileceği şekilde tasarlayın. Otomatik tamamlama widget'larına ve klavye odağını yakalayabilecek diğer bağlamlara dikkat edin. Kullanıcının sayfanın geri kalanı yerine kalıcı öğeyle etkileşimde bulunmasını istediğinizde odağı geçici olarak yakalayabilirsiniz, ancak kalıcı iletişimden çıkış yapmak için her zaman klavyeyle erişilebilen bir yol sağlamanız gerekir. Örnek için Modallar ve Klavye Tuzakları bölümüne bakın.

Odak kontrolünü kullanılabilir hale getirin

Özel bir denetim oluşturduysanız kullanıcılarınızın yalnızca klavyeyi kullanarak tüm özelliklerine erişmelerine izin verin. Klavye erişimini iyileştirme teknikleri için Bileşenlerde Odağı Yönetme bölümünü okuyun.

Ekran dışı içerikleri yönetin

Birçok sitede, DOM'de bulunan ancak görünmeyen ekran dışı içerikler (ör. duyarlı çekmece menüsündeki bağlantılar veya henüz gösterilmeyen bir kalıcı pencere içindeki bir düğme gibi) bulunur. Bu öğelerin DOM'de bırakılması, özellikle ekran okuyucular için ekran dışı içeriği sayfanın bir parçasıymış gibi duyuran, kafa karıştırıcı bir klavye deneyimi oluşturabilir.

Bu öğelerle ilgili ipuçları için Ekran dışındaki içerikleri işleme bölümüne bakın.

Ekran okuyucuyla test etme

Genel klavye desteğinin iyileştirilmesi, bir sonraki adım için (sayfada doğru etiketleme, anlamsal bilgiler ve ekran okuyucuda gezinmeyi engelleyen engeller olup olmadığını kontrol etmek) bazı temel bilgiler sağlar.

Anlamsal işaretlemenin yardımcı teknoloji tarafından nasıl yorumlandığına aşina değilseniz İçerik yapısı bölümünü okuyun.

  • Tüm resimlerde doğru alt metni olup olmadığını kontrol edin. Resimlerin temel olarak sunum amacıyla kullanıldığı ve içeriğin gerekli parçaları olmadığı durumlar bu uygulama kapsamındadır. Ekran okuyucuların bir resmi atlaması gerektiğini belirtmek için değeri boş bir dizeye ayarlayın: alt="".
  • Etiketle ilgili tüm denetimleri işaretleyin. Özel kontroller için bu, aria-label veya aria-labelledby kullanılmasını gerektirebilir. Örnekler için ARIA Etiketleri ve İlişkileri bölümüne bakın.
  • Tüm özel kontrolleri kontrol ederek uygun bir role ve durumlarını ileten gerekli ARIA özellikleri olup olmadığına bakın. Örneğin, özel bir onay kutusunun durumunu doğru bir şekilde iletmek için role="checkbox" ve aria-checked="true|false" simgelerine ihtiyacı vardır. ARIA'nın özel denetimlerde eksik anlamları nasıl sağlayabileceğine dair genel bir bakış için ARIA'ya Giriş bölümüne bakın.
  • Sayfanızdaki bilgi akışını mantıklı hale getirin. Ekran okuyucular sayfada DOM sırasına göre gittiğinden, CSS'yi kullanarak görsel olarak yeniden konumlandırdığınız tüm öğeleri anlamsız bir sırayla duyururlar. Bir öğenin sayfanın başlarında görünmesini istiyorsanız onu fiziksel olarak daha önce DOM'ye taşıyın.
  • Sayfadaki tüm içerik için ekran okuyucuyla gezinmeyi desteklemeyi hedefleyin. Sitenin hiçbir bölümünün kalıcı olarak gizlenmediğinden veya ekran okuyucu erişimine kapalı olmadığından emin olun.
    • İçeriğin ekran okuyucudan gizlenmesi gerekiyorsa (örneğin, ekran dışı veya yalnızca sunum amaçlıysa) bu içeriği aria-hidden="true" olarak ayarlayın. Daha ayrıntılı açıklama için İçeriği gizleme bölümüne bakın.

Ekran okuyucularla ilgili bilgi sahibi olun

Ekran okuyucu kullanmayı öğrenmek göz korkutucu görünse de, ekran okuyucular aslında oldukça kullanıcı dostudur. Genel olarak çoğu geliştirici yalnızca birkaç basit tuş komutuyla başa çıkabilir.

Mac kullanıyorsanız, Mac OS ile birlikte gelen ekran okuyucu olan VoiceOver ile ilgili bu videoya göz atın. PC kullanıyorsanız Windows için bağışla desteklenen açık kaynaklı bir ekran okuyucu olan NVDA ile ilgili bu videoya göz atın.

aria-hidden, klavye odağını engellemiyor

ARIA'nın bir öğenin yalnızca anlamını etkileyebileceğini, öğenin davranışını herhangi bir şekilde etkileyebileceğinin anlaşılması önemlidir. aria-hidden="true" ile bir öğeyi ekran okuyuculara gizleyebilirsiniz ancak bu, söz konusu öğenin odak davranışını değiştirmez. Ekran dışı etkileşimli içeriklerde, ekran dışı etkileşimli içeriklerde klavye akışından gerçekten kaldırıldığından emin olmak için inert özelliğini kullanın. Daha eski tarayıcılar için aria-hidden="true" ile tabindex="-1" kodunu birleştirin.

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

Bir kontrolün ne yapacağıyla ilgili görsel ipuçları veya uygun olanaklar sağlamak, çok çeşitli cihazlardan oluşan çok çeşitli kişilerin sitenizde çalışmasına ve gezinmesine yardımcı olur.

  • Bağlantılar ve düğmeler gibi etkileşimli öğeler, etkileşimli olmayan öğelerden ayırt edilebilmelidir. Kullanıcıların bir öğenin tıklanabilir olup olmadığını anlayamadığı durumlarda sitede veya uygulamada gezinmesi zordur. Etkileşimli öğeleri belirtmenin birçok geçerli yolu vardır. Yaygın bir uygulama, bağlantıları çevreleyen metinlerden ayırmak için bağlantıların altını çizmektir.
  • Odak gerekliliğine benzer şekilde, bağlantılar ve düğmeler gibi etkileşimli öğelerde, işaretçileri tıklanabilir bir öğenin üzerine geldiğinde fare kullanıcılarına bunu bildirmek için bir hover durumu gerekir. Ancak bu öğelerin diğer giriş yöntemleri tarafından erişilebilir olması için hover durumu olmadan ayırt edilebilmeleri gerekir.

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

Başlıklar ve önemli nokta öğeleri, sayfanıza anlamsal yapı kazandırır ve yardımcı teknoloji kullanıcılarının gezinme verimliliğini büyük oranda artırır. Birçok ekran okuyucu kullanıcısı, bilmedikleri bir sayfaya ilk geldiklerinde genellikle başlıklara göre gezinmeye çalıştıklarını bildirmektedir.

Benzer şekilde, ekran okuyucular <main> ve <nav> gibi önemli önemli noktalara atlama imkanı da sunar. Bu nedenlerle, sayfa yapısının kullanıcı deneyimine rehberlik etmek için nasıl kullanılabileceğini düşünmek önemlidir.

  • h1-h6 hiyerarşisini kullanın. Başlıkları, sayfanız için bir dış çizgi oluşturmaya yarayan araçlar olarak düşünün. Başlıkların yerleşik stiline güvenmeyin. Bunun yerine, tüm öğelere aynı boyuttaymış gibi davranın ve birincil, ikincil ve üçüncül içerik için anlam açısından uygun bir düzey kullanın. Ardından, başlıkların tasarımınıza uygun olması için CSS kullanın.
  • Kullanıcıların yinelenen içeriği atlayabilmesi için önemli nokta öğelerini ve rolleri kullanın. Birçok yardımcı teknoloji, sayfanın belirli bölümlerine (<main> veya <nav> öğeleriyle tanımlananlar gibi) atlamak için kısayollar sunar. Bu öğelerin önemli nokta rolleri vardır. ARIA role özelliğini, <div role="search"> gibi sayfadaki bölgeleri açık bir şekilde tanımlamak için de kullanabilirsiniz. Daha fazla örnek için Anlambilim ve içerikte gezinme bölümüne bakın.
  • role="application" ile çalışma deneyiminiz yoksa role="application" kullanmaktan kaçının. application belirgin işareti rolü, yardımcı teknolojiye kısayollarını devre dışı bırakmasını ve tüm tuşlara basarak sayfaya gitmesini bildirir. Bu, kullanıcıların genellikle sayfada gezinmek için kullandıkları tuşlar artık çalışmadığı ve klavyeyle tüm işlemleri sizin yapmanız gerektiği anlamına gelir.

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

VoiceOver ve NVDA gibi ekran okuyucular, sayfadaki önemli bölgelere atlamak için bir içerik menüsü sağlar. Erişilebilirliği test ederken bu menüleri kullanarak sayfanın bir özetini görebilir, başlık seviyelerinizin uygun olup olmadığını ve hangi önemli noktaların kullanılmakta olduğunu belirleyebilirsiniz.

Daha fazla bilgi edinmek için VoiceOver ve NVDA'nın temelleriyle ilgili bu eğitici videoları izleyin.

Süreci otomatikleştirme

Bir siteyi erişilebilirlik açısından manuel olarak test etmek yorucu ve hataya açık olabilir. Testleri mümkün olduğunca otomatikleştirmek faydalıdır. Tarayıcı uzantıları ve komut satırı erişilebilirlik test paketlerini kullanabilirsiniz.

  • Sayfa, aXe veya WAVE tarayıcı uzantılarından gelen tüm testleri geçiyor mu? Başka seçenekler de mevcuttur ancak bu uzantılar, başarısız kontrast oranları ve eksik ARIA özellikleri gibi basit sorunları fark edebileceği için tüm manuel test süreçlerine faydalı olabilir.
    • Komut satırında çalışmayı tercih ederseniz axe-cli, aXe tarayıcı uzantısıyla aynı özellikleri sağlar ancak terminalinizden çalıştırılabilir.
  • Özellikle sürekli entegrasyon ortamında gerilemeleri önlemek için otomatik test paketinize axe-core gibi bir kitaplık ekleyin. Axe-çekirdek, aXe Chrome uzantısını çalıştıran ancak bir komut satırı yardımcı programında bulunan motordur.
  • Bir çerçeve veya kitaplık kullanıyorsanız 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'u kullanın

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

Lighthouse'u zaten kullanıyorsanız raporunuzda başarısız erişilebilirlik testleri olup olmadığına bakın. Sitenizin genel kullanıcı deneyimini iyileştirmek için hataları düzeltin.

Ek kaynaklar