Bu sayfada, Chrome Geliştirici Araçları'ndaki erişilebilirlik özellikleriyle ilgili kapsamlı bir referans sunulmaktadır. Bu özellik, aşağıdakileri yapan web geliştiriciler için tasarlanmıştır:
- Geliştirici Araçları'nı açma gibi temel bilgileri öğrenin.
- Erişilebilirlik ilkeleri ve en iyi uygulamaları hakkında bilgi sahibi olmalıdır.
Bu referansın amacı, bir sayfanın erişilebilirliğini incelemenize yardımcı olabilecek Geliştirici Araçları'nda bulunan tüm araçları keşfetmenize yardımcı olmaktır.
Ekran okuyucu gibi bir yardımcı teknolojiyle DevTools'da gezinme konusunda yardıma ihtiyacınız varsa Navigating Chrome DevTools With Assistive Technology (Chrome Geliştirici Araçları'nda Yardımcı Teknolojiyle Gezinme) başlıklı makaleyi inceleyin.
Erişilebilir web siteleri geliştirme hakkında bilgi edinmek isterseniz Erişilebilirlik hakkında bilgi edinin 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ç kitinize nasıl uyduğu 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?
- Sayfanın öğeleri, ekran okuyucular için düzgün şekilde işaretlenmiş mi?
Genel olarak, 2. soruyla ilgili hatalar otomatik olarak kolayca tespit edilebildiğinden Geliştirici Araçları bu hataları düzeltmenize yardımcı olabilir. 1. soru da aynı derecede önemlidir ancak maalesef DevTools bu konuda size yardımcı olamaz. 1. soruyla ilgili hataları bulmanın tek yolu, klavye veya ekran okuyucu içeren bir sayfayı kendiniz kullanmayı denemektir. Daha fazla bilgi edinmek için Erişilebilirlik İncelemesi Yapma başlıklı makaleyi inceleyin.
Bir sayfanın erişilebilirliğini denetleme
Genel olarak, Lighthouse panelindeki erişilebilirlik kontrollerini kullanarak şunları belirleyebilirsiniz:
- Sayfa, ekran okuyucular için doğru şekilde işaretlenmiş olmalıdır.
- Bir sayfadaki metin öğeleri yeterli kontrast oranlarına sahip olmalıdır. 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 panelini tıklayın. DevTools'da çeşitli yapılandırma seçenekleri gösterilir.
Bir mobil cihazı simüle etmek istiyorsanız Cihaz için Mobil'i seçin. Bu seçenek, kullanıcı aracısı dizenizi değiştirir ve görünüm alanını yeniden boyutlandırır. Sayfanın mobil versiyonu masaüstü sürümünden farklı şekilde gösteriliyorsa bu seçenek, denetiminizin sonuçlarını önemli ölçüde etkileyebilir.
Lighthouse bölümünde Erişilebilirlik'in etkinleştirildiğinden emin olun. Diğer kategorileri raporunuza dahil etmek istemiyorsanız devre dışı bırakın. Sayfanızın kalitesini artırmanın başka yollarını keşfetmek istiyorsanız bu ayarları etkin bırakın.
Sınırlama bölümünde, yükleme performansını analiz ederken faydalı olan ağ ve CPU'yu sınırlayabilirsiniz. Bu seçenek, erişilebilirlik puanınızla alakalı değildir. Bu nedenle, istediğiniz seçeneği kullanabilirsiniz.
Depolamayı 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 seçeneği kullanabilirsiniz.
Rapor Oluştur'u tıklayın. 10-30 saniye sonra Geliştirici Araçları bir rapor sunar. Raporunuzda, sayfanın erişilebilirliğini nasıl iyileştirebileceğinizle ilgili çeşitli ipuçları yer alır.
Hakkında daha fazla bilgi edinmek istediğiniz denetimi tıklayın.
Söz konusu denetimin belgelerini görüntülemek için Daha fazla bilgi'yi tıklayın.
Ayrıca: 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 destekleyen temel motor olduğundan genellikle aynı bilgileri sağlar. aXe uzantısının kullanıcı arayüzü farklıdır ve denetimleri biraz farklı şekilde açıklar.
aXe uzantısının Denetlemeler paneline göre bir avantajı, başarısız olan düğümleri incelemenize ve vurgulamanıza olanak tanımasıdır.
Cihaz araç çubuğuyla içeriğin yeniden akıtılmasını test etme
Web İçeriği Erişilebilirlik Yönergeleri (WCAG) yeniden akıtma ölçütü, web içeriğinin, görüntü alanı yeniden boyutlandırıldığında veya yönü değiştiğinde bile bilgi kaybı olmadan görüntülenebilmesini önerir. İçeriği tek bir sütunla hizalayarak büyütülmüş metin kullanan kullanıcılar desteklenir. İçeriğinizin nasıl yeniden akıtıldığını test etmek için Lighthouse panelindeki Cihaz araç çubuğu ile görüntü alanını dinamik olarak yeniden boyutlandırın.
Görüntü alanını yeniden boyutlandırmak için tutma yerlerini istediğiniz boyutlara sürükleyin. Test edilecek belirli boyutlar için WCAG yeniden akıtma başarı ölçütüne bakın.
Erişilebilirlik sekmesi
Erişilebilirlik sekmesinde, erişilebilirlik ağacını, ARIA özelliklerini ve DOM düğümlerinin hesaplanmış erişilebilirlik özelliklerini görüntüleyebilirsiniz.
Erişilebilirlik sekmesini açmak için:
- Öğeler panelini tıklayın.
- DOM Ağacı'nda incelemek istediğiniz öğeyi seçin.
- Erişilebilirlik sekmesini tıklayın. Bu sekme, Diğer Sekmeler keyboard_double_arrow_right düğmesinin arkasında gizlenmiş olabilir.
Gelecekte daha hızlı erişmek için Erişilebilirlik sekmesini öne sürükleyebilirsiniz.
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ındaki, sayfa içeriklerinin ekran okuyucuda gösterilmesi için alakalı ve faydalı olan öğeleri içerir.
Bir öğenin erişilebilirlik ağacındaki konumunu Erişilebilirlik sekmesinden incelemek için Erişilebilirlik ağacını göster'i açın.
Bu açma/kapatma düğmesi, Öğeler panelindeki DOM ağacını tam sayfa erişilebilirlik ağacıyla değiştirir. Bu ağaç, web içeriğinizin yardımcı teknolojiye nasıl sunulduğunu daha iyi anlamanıza yardımcı olur.
Erişilebilirlik ağacına göz atmak için düğümleri genişletebilir ve seçerek Hesaplanmış özellikler bölümünde ayrıntılarını görebilirsiniz.
İstediğiniz zaman DOM ağacına geri dönebilirsiniz. İlgili DOM düğümü seçili kalır. Bu yöntem, DOM düğümü ile erişilebilirlik ağacı düğümü arasındaki eşlemeyi anlamak için idealdir.
Bir öğenin ARIA özelliklerini görüntüleme
ARIA özellikleri, ekran okuyucuların bir sayfanın içeriğini düzgün şekilde temsil etmek için ihtiyaç duyduğu tüm bilgilere sahip olmasını sağlar.
Bir öğenin ARIA özelliklerini Erişilebilirlik sekmesinde görüntüleyin.
Ekrandaki öğelerin kaynak sırasını görüntüleme
Sayfadaki öğeler her zaman kaynakta bulundukları sırada 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 hatalarını ayıklamak için:
- Sayfadaki bir öğeyi inceleyin.
- Öğeler > Erişilebilirlik > Kaynak Sırası Görüntüleyici'de check_box 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 ana hatlarını çizerek ve kaynak sırasına karşılık gelen sayılarla işaretler.
Bir öğenin hesaplanmış erişilebilirlik özelliklerini görüntüleme
Bazı erişilebilirlik özellikleri tarayıcı tarafından dinamik olarak hesaplanır. Bu özellikler, Erişilebilirlik sekmesinin Hesaplanmış Özellikler bölümünde görüntülenebilir.
Bir öğenin hesaplanmış erişilebilirlik özelliklerini Erişilebilirlik sekmesinde görüntüleyin.
Oluşturma sekmesi
Kodunuzda veya test ortamınızda manuel olarak belirtmeden belirli CSS medya özelliklerini taklit etmek için Oluşturma sekmesini kullanın. Bu medya özellikleri, kullanıcının cihaz tercihlerine göre web sayfanızın görünümünü değiştirir. Sayfanızın görsel erişilebilirliğini test etmek için Oluşturma sekmesini açın ve aşağıdaki seçenekleri inceleyin:
- Sayfanızı birkaç farklı simüle edilmiş görme bozukluğuyla görüntülemek için görme bozukluklarını taklit edin.
- Sayfanızın koyu veya açık mod etkinleştirilmişken nasıl göründüğünü görmek için CSS medya özelliği
prefers-color-schemeemülasyonunu kullanın. Birçok kişi koyu modu estetik bir tercih olarak görse de Erişilebilirlik aracı olarak koyu mod, bu modun başka açılardan da faydalı olduğunu gösteriyor. - Sayfanızı yazdırma veya ekran medya stilinde görmek için CSS medya türü emülasyonu'nu kullanın.
- Kullanıcı aracısı zorunlu renkler modunu etkinleştirdiyse sayfanızın nasıl görüneceğini görmek için CSS medya özelliği emülasyonu
forced-colorsyapın. - Web içeriğinizi daha yüksek, daha düşük veya belirli bir kontrast değeriyle görmek için CSS medya özelliğini emüle edin
prefers-contrast. - Web içeriğinizi daha az hareketle görüntülemek için CSS medya özelliği
prefers-reduced-motionemülasyonunu kullanın. Bazı kullanıcılar, animasyonlu içeriklerden dolayı dikkat dağınıklığı veya mide bulantısı yaşayabilir. Sayfanızın animasyonlar veya sorunsuz kaydırma gibi özellikler olmadan nasıl göründüğünü görmek için bu seçeneği kullanın. - Kullanıcı, cihazda kullanılan şeffaf veya yarı şeffaf katman efektlerinin azaltılmasını isterse web içeriğinizin nasıl görüneceğini görmek için CSS medya özelliğini taklit edin
prefers-reduced-transparency.
Düşük kontrastlı metinleri bulma ve düzeltme
Geliştirici Araçları, düşük kontrast sorunlarını otomatik olarak bulabilir ve bunları düzeltmenize yardımcı olmak için daha iyi renkler önerebilir. Daha fazla bilgi edinmek için Web sitenizi daha okunabilir hale getirme başlıklı makaleye göz atın.