Bu sayfada, Chrome Geliştirici Araçları'ndaki erişilebilirlik özelliklerine kapsamlı bir referans verilmiştir. Bu belge, şu koşulları karşılayan web geliştiricileri için tasarlanmıştır:
- Geliştirici Araçları hakkında temel bilgilere (ör. nasıl açılacağı) sahip olmak
- Erişilebilirlik ilkeleri ve en iyi uygulamaları hakkında bilgi sahibi olmak.
Bu referansın amacı, Geliştirici Araçları'nda bulunan ve bir sayfanın erişilebilirliğini incelemenize yardımcı olabilecek tüm araçları keşfetmenize yardımcı olmaktır.
Geliştirici Araçları'nda ekran okuyucu gibi yardımcı bir teknolojiyle gezinme hakkında yardım arıyorsanız Chrome Geliştirici Araçları'nda Yardımcı Teknolojiyle Gezinme başlıklı makaleyi inceleyin.
Erişilebilir web siteleri geliştirme konusunda daha fazla bilgi edinmek için Erişilebilirlik Hakkında Bilgi Edinin.
Chrome Geliştirici Araçları'ndaki erişilebilirlik özelliklerine genel bakış
Bu bölümde, Geliştirici Araçları'nın genel erişilebilirlik araç setinizle nasıl kullanıldığı açıklanmaktadır.
Bir sayfanın erişilebilir olup olmadığını belirlerken aklınızda bulundurmanız gereken 2 genel soru vardır:
- Sayfada klavye veya ekran okuyucu ile gezinebilir miyim?
- Sayfa öğeleri ekran okuyucular için uygun şekilde işaretlenmiş mi?
Bu hatalar otomatik bir şekilde kolayca tespit edilebildiğinden Geliştirici Araçları genel olarak 2. soruyla ilgili hataları düzeltmenize yardımcı olabilir. 1. soru bir o kadar önemli, ama ne yazık ki Geliştirici Araçları bu konuda size yardımcı olamaz. 1. soruyla ilgili hataları bulmanın tek yolu, bir sayfayı klavye veya ekran okuyucuyla kullanmayı denemektir. Daha fazla bilgi edinmek için Erişilebilirlik İncelemesi Nasıl Yapılır? bölümüne bakın.
Sayfanın erişilebilirliğini denetleme
Genel olarak, aşağıdakilerin olup olmadığını belirlemek için Lighthouse panelindeki erişilebilirlik kontrollerini kullanın:
- Bir sayfa, ekran okuyucular için düzgün şekilde işaretlenmiştir.
- Bir sayfadaki metin öğeleri yeterli kontrast oranlarına sahip. Web sitenizi daha okunabilir hale getirme başlıklı makaleyi de inceleyin.
Bir sayfayı denetlemek için:
- Denetlemek istediğiniz URL'ye gidin.
Geliştirici Araçları'nda Lighthouse sekmesini tıklayın. Geliştirici Araçları, size çeşitli yapılandırma seçenekleri gösterir.
Bir mobil cihaz simülasyonu yapmak istiyorsanız Cihaz alanında Mobil'i seçin. Bu seçenek, kullanıcı aracısı dizeniz farklı şekilde değişir ve görüntü alanını yeniden boyutlandırır. Sayfanın mobil sürümü, masaüstü sürümünden farklı görünüyorsa bu seçeneğin denetim sonuçları üzerinde önemli bir etkisi olabilir.
Lighthouse bölümünde Erişilebilirlik'in etkinleştirildiğinden emin olun. Raporunuzdan hariç tutmak istiyorsanız diğer kategorileri devre dışı bırakın. Sayfanızın kalitesini iyileştirmenin diğer yollarını keşfetmek istiyorsanız bu seçenekleri etkin durumda bırakın.
Hızlandırma bölümü, ağı ve CPU'yu kısıtlamanızı sağlar. Bu da yük performansını analiz etme açısından faydalıdır. Bu seçeneğin erişilebilirlik puanınızla alakalı olmaması gerekir. Böylece istediğiniz seçeneği kullanabilirsiniz.
Depolama Alanını Temizle onay kutusu, sayfayı yüklemeden önce tüm depolama alanını temizlemenize veya sayfa yüklemeleri arasında depolama alanını korumanıza olanak tanır. Bu seçenek de erişilebilirlik puanınızla alakalı olmayabilir. Bu nedenle, istediğiniz gibi kullanabilirsiniz.
Rapor Oluştur'u tıklayın. Geliştirici Araçları, 10 ila 30 saniye sonra bir rapor sunar. Raporunuzda, sayfanın erişilebilirliğini iyileştirmeyle ilgili çeşitli ipuçları verilir.
Hakkında daha fazla bilgi edinmek istediğiniz denetimi tıklayın.
Söz konusu denetim belgelerini görüntülemek için Daha Fazla Bilgi'yi tıklayın.
Ayrıca bkz.: aXe uzantısı
Chrome'da varsayılan olarak bulunan Lighthouse paneli yerine aXe uzantısını veya Lighthouse uzantısını kullanmayı tercih edebilirsiniz. AXe, Lighthouse panelini çalıştıran temel motor olduğundan genellikle aynı bilgileri sağlar. AXe uzantısı farklı bir kullanıcı arayüzüne sahiptir ve denetimleri biraz farklı şekilde açıklar.
AXe uzantısının Denetimler paneline göre bir avantajı, başarısız düğümleri incelemenize ve vurgulamanıza olanak vermesidir.
Erişilebilirlik bölmesi
Erişilebilirlik bölmesinde, DOM düğümlerinin erişilebilirlik ağacını, ARIA özelliklerini ve hesaplanan erişilebilirlik özelliklerini görüntüleyebilirsiniz.
Erişilebilirlik bölmesini açmak için:
- Öğeler sekmesini tıklayın.
- DOM Ağacı'nda, incelemek istediğiniz öğeyi seçin.
- Erişilebilirlik sekmesini tıklayın. Bu sekme Diğer Sekmeler
düğmesinin arkasında gizlenmiş olabilir.
düğmesinin arkasında gizlenmiş olabilir.
Erişilebilirlik ağacındaki bir öğenin konumunu görüntüleme
Erişilebilirlik ağacı, DOM ağacının bir alt kümesidir. Yalnızca DOM ağacından, sayfanın içeriğini ekran okuyucuda görüntülemek için alakalı ve yararlı olan öğeleri içerir.
Erişilebilirlik bölmesinden bir öğenin erişilebilirlik ağacındaki konumunu inceleyin.
Bu görünüm yalnızca tek bir düğümü ve üst düğümlerini keşfetmenize olanak tanır. Erişilebilirlik ağacının tamamını keşfetmek için aşağıdaki adımları uygulayın.
(Önizleme) Tam sayfa erişilebilirlik ağacını keşfetme
Erişilebilirlik ağacının tam sayfa görünümü, ağacın tamamını keşfetmenize olanak tanır ve web içeriğinizin yardımcı teknolojilere nasıl maruz kaldığını daha iyi anlamanıza yardımcı olur.
Erişilebilirlik ağacını keşfetmek için:
Tam sayfa erişilebilirlik ağacını etkinleştir kutusunu işaretleyin.
Üstteki işlem çubuğunda Geliştirici Araçları'nı yeniden yükle'yi tıklayın.
Öğeler panelinin sağ üst köşesindeki
Erişilebilirlik Ağaç görünümüne geç düğmesini etkinleştirin/devre dışı bırakın.
Erişilebilirlik ağacına göz atın. Hesaplanan özellikler altında, düğümleri genişletebilir veya ayrıntıları görmek için tıklayabilirsiniz.
Bir düğüm seçin ve DOM ağacına geri dönmek için
DOM ağacı görünümüne geç düğmesini tıklayın.
İlgili DOM düğümü artık seçilidir. Bu, DOM düğümü ile erişilebilirlik ağacı düğümü arasındaki eşlemeyi anlamanın harika bir yoludur.
Bir öğenin ARIA özelliklerini görüntüleme
ARIA özellikleri, ekran okuyucuların bir sayfanın içeriğini doğru şekilde temsil etmek için ihtiyaç duydukları tüm bilgilere sahip olmasını sağlar.
Bir öğenin ARIA özelliklerini Erişilebilirlik bölmesinde görüntüleyin.
Ekrandaki öğelerin kaynak sırasını göster
Sayfadaki öğeler her zaman kaynaktaki sırayla görünmez. Bu durum, web'de gezinmek için yardımcı teknolojilerden yararlanan kullanıcıların kafasını karıştırabilir.
Web sitenizdeki kaynak sırasını görüntülemek ve hata ayıklamak için:
- Sayfadaki bir öğeyi inceleyin.
- Öğeler > Erişilebilirlik > Kaynak Sırası Görüntüleyici'de
Kaynak sırasını göster'i işaretleyin.
Geliştirici Araçları, görüntü alanında iç içe yerleştirilmiş öğeleri kenarlıklarla belirtir ve bunları kaynak sıralarına karşılık gelen sayılarla işaretler.
Bir öğenin hesaplanan erişilebilirlik özelliklerini görüntüleme
Bazı erişilebilirlik özellikleri tarayıcı tarafından dinamik olarak hesaplanır. Bu özellikler, Erişilebilirlik bölmesinin Hesaplanan Özellikler bölümünde görüntülenebilir.
Bir öğenin hesaplanan erişilebilirlik özelliklerini Erişilebilirlik bölmesinde görüntüleyin.
Düşük kontrastlı metni keşfetme ve düzeltme
Geliştirici Araçları, düşük kontrast sorunlarını otomatik olarak bulup düzeltmenize yardımcı olmak için daha iyi renkler önerir. Daha fazla bilgi edinmek için Web sitenizi daha okunabilir hale getirme başlıklı makaleye bakın.