Bu sayfada, Chrome Geliştirici Araçları'ndaki erişilebilirlik özellikleri kapsamlı bir şekilde ele alınmaktadır. Aşağıdaki özellikleri taşıyan web geliştiricileri için tasarlanmıştır:
- Geliştirici Araçları'nı nasıl açacağınız gibi temel bilgilere sahip olmalısınız.
- Erişilebilirlik ilkeleri ve en iyi uygulamalar hakkında bilgi sahibi olmalıdır.
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 konusunda yardım arıyorsanız Chrome Geliştirici Araçları'nda Yardımcı Teknolojiyle Gezinme başlıklı makaleyi inceleyin.
Erişilebilir web sitelerini nasıl geliştireceğinizi öğrenmek istiyorsanız Erişilebilirlik hakkında bilgi başlıklı makaleyi inceleyin.
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ç setinize nasıl uyum sağladığı açıklanmaktadır.
Bir sayfanın erişilebilir olup olmadığını belirlerken aklınızda 2 genel soru olmalıdır:
- Sayfada klavye veya ekran okuyucuyla gezinebilir miyim?
- Sayfadaki öğeler ekran okuyucular için doğru şekilde işaretlendi mi?
Geliştirici Araçları, genel olarak 2. soruyla ilgili hataları düzeltmenize yardımcı olabilir. Çünkü bu hatalar otomatik şekilde kolayca tespit edilebilir. 1. soru da aynı derecede önemli olsa da Geliştirici Araçları bu konuda size yardımcı olamaz. 1. soruyla ilgili hataları bulmanın tek yolu, klavye veya ekran okuyucu içeren bir sayfayı kullanmayı denemektir. Daha fazla bilgi edinmek için Erişilebilirlik İncelemesi Nasıl Yapılır? bölümüne bakın.
Bir sayfanın erişilebilirliğini denetleme
Genel olarak, aşağıdaki hususları 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 konusuna da bakın.
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.
Mobil cihaz simüle etmek istiyorsanız Cihaz alanında Mobil'i seçin. Bu seçenek, kullanıcı aracısı dizenizi farklı bir şekilde değiştirir ve görüntü alanını yeniden boyutlandırır. Sayfanın mobil sürümü masaüstü sürümden farklı görünüyorsa bu seçenek denetlemenizin sonuçları üzerinde önemli bir etki yaratabilir.
Lighthouse bölümünde Erişilebilirlik'in etkinleştirildiğinden emin olun. Raporunuzda hariç tutmak istediğiniz kategorileri devre dışı bırakın. Sayfanızın kalitesini iyileştirmenin başka yollarını keşfetmek istiyorsanız, bunları etkin bırakın.
Kısıtlama bölümü, ağı ve CPU'yu kısıtlamanızı sağlar. Bu işlem, yük performansını analiz ederken faydalıdır. Bu seçenek erişilebilirlik puanınızla alakalı değildir. Böylece istediğiniz şeyi 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 büyük olasılıkla erişilebilirlik puanınızla da alakalı değildir. Dolayısıyla ne istediğinizi kullanabilirsiniz.
Rapor Oluştur'u tıklayın. Geliştirici Araçları, 10 ila 30 saniye geçtikten sonra rapor sunar. Raporunuzda, sayfanın erişilebilirliğini nasıl iyileştireceğinizle ilgili çeşitli ipuçları sunulur.
Hakkında daha fazla bilgi edinmek istediğiniz denetimi tıklayın.
Bu 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ının farklı bir kullanıcı arayüzü vardır ve denetimleri biraz daha farklı şekilde tanımlar.
aXe uzantısının Denetimler paneline göre avantajı, başarısız olan düğümleri inceleyip vurgulayabilmenizi sağlamasıdır.
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.
Bir öğenin erişilebilirlik ağacındaki 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ğinin ekran okuyucuda görüntülenmesi 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 üstlerini 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şfedin
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'i işaretleyin.En üstteki işlem çubuğunda Geliştirici Araçları'nı yeniden yükle'yi tıklayın.
Öğeler panelinin sağ üst köşesinde,
Erişilebilirlik Ağacı görünümüne geç düğmesini açık veya kapalı konuma getirin.
Erişilebilirlik ağacına göz atın. Düğümleri genişletebilir veya tıklayarak ayrıntıları Hesaplanan özellikler bölümünde görebilirsiniz.
Bir düğüm seçin ve DOM ağacına geri dönmek için
DOM ağaç görünümüne geç düğmesini tıklayın.İlgili DOM düğümü şimdi seçilidir. Bu, DOM düğümü ile erişilebilirlik ağaç düğümü arasındaki eşlemeyi anlamak için mükemmel bir yoldur.
Bir öğenin ARIA özelliklerini görüntüleme
ARIA özellikleri, ekran okuyucuların bir sayfanın içeriğini doğru bir ş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örüntüleyin
Sayfadaki öğeler, her zaman kaynakta oldukları 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 seçeneğini 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ı metinleri bulma ve düzeltme
Geliştirici Araçları, düşük kontrast sorunlarını otomatik olarak bulabilir ve düzeltmenize yardımcı olmak için daha iyi renkler önerebilir. Daha fazla bilgi edinmek için Web sitenizi daha okunabilir hale getirme bölümüne bakın.