Yardımcı teknolojilerle Chrome Geliştirici Araçları'nda gezinme

Rob Dodson

Bu kılavuz, öncelikle ekran okuyucular gibi yardımcı teknolojilere (AT) güvenen kullanıcıların Chrome Geliştirici Araçları'na erişmesine ve bu araçları kullanmasına yardımcı olmayı amaçlamaktadır. Chrome Geliştirici Araçları, Google Chrome tarayıcısında yerleşik olarak bulunan bir web geliştirici araçları paketidir. Bir web sayfasının erişilebilirliğini iyileştirmekle ilgili Geliştirici Araçları özelliklerini arıyorsanız Erişilebilirlik Referansı'nı inceleyin.

Geliştirici Araçları'nın erişilebilirliği henüz geliştirme aşamasındadır. Bazı paneller ve sekmeler, diğerlerine kıyasla AT ile daha iyi çalışır. Bu rehber, en erişilebilir panelleri adım adım gösterir ve yol boyunca karşılaşabileceğiniz belirli sorunları vurgular.

Genel Bakış

DevTools, paneller serisine ayrılmıştır ve ARIA tablist olarak düzenlenmiştir. Örneğin:

• Öğeler paneli, DOM düğümlerini veya CSS'yi görüntülemenize ve değiştirmenize olanak tanır.
• Konsol paneli, JavaScript günlüklerini okumanıza ve nesneleri canlı olarak düzenlemenize olanak tanır.

Her panelin içerik alanında, dokümanlarda genellikle sekmeler veya pencereler olarak adlandırılan çeşitli araçlar bulunur. Örneğin, Öğeler panelinde etkinlik işleyicileri, erişilebilirlik ağacını ve daha birçok şeyi incelemek için ek sekmeler bulunur. Sekmeler ve bölmeler arasındaki ayrım biraz keyfidir. Bir terimi veya diğerini görmenizin tek nedeni, resmi DevTools belgelerinin geri kalanıyla tutarlılığı korumaktır.

Klavye kısayolları

Geliştirici Araçları klavye kısayolları referansı, faydalı bir kopya kağıdıdır. Farklı panelleri keşfederken bu sayfaya yer işareti koyduğunuzdan ve sayfayı tekrar ziyaret ettiğinizden emin olun.

Geliştirici Araçları'nı açma

Başlamak için Chrome Geliştirici Araçları'nı açma başlıklı makaleyi okuyun. Geliştirici Araçları'nı klavye kısayolları veya menü öğeleri aracılığıyla açmanın çeşitli yolları vardır.

Paneller arasında gezinme

Paneller arasında klavye, komut menüsü veya fare ya da izleme dörtgeni kullanarak gezinebilirsiniz.

Klavyeyle gezinme

• Geliştirici Araçları açıkken sonraki panele odaklanmak için Ctrl+] veya Command+] (Mac) tuşlarına basın.
• Önceki panele odaklanmak için Ctrl+[ veya Command+[ (Mac) tuşlarına basın.
• Odağı bir panelin tablist içine taşımak için üst karakter+sekme tuşlarını, panelleri değiştirmek için ise ok tuşlarını kullanmak da mümkündür. Ancak, daha önce bahsedilen kısayolları kullanmak daha hızlı olabilir.

Bilinen sorunlar

• Console (Konsol) ve Performance (Performans) panelleri gibi bazı paneller, etkinleştirildikleri anda odaklarını içerik alanlarına taşıyabilir. Bu durum, ok tuşlarıyla gezinmeyi zorlaştırabilir.
• Seçilen panelin adı, yalnızca ekran okuyucu paneldeki odaklanılmış içeriği okuduktan sonra duyurulur. Bu nedenle, bu tür reklamları kaçırmak çok kolay olabilir.

Komut menüsünü kullanarak gezinme

Belirli bir panele odaklanmak için Komut Menüsü'nü kullanın:

1. Geliştirici Araçları açıkken Komut Menüsü'nü açmak için Control+Shift+P veya Command+Shift+P (Mac) tuşlarına basın. Komut menüsü, yaklaşık arama otomatik tamamlama açılır kutusudur.
2. Açmak istediğiniz panelin adını yazın, ardından aşağı ok klavye tuşunu kullanarak doğru seçeneğe gidin.
3. Komut çalıştırmak için Enter tuşuna basın.

Örneğin, Nesneler panelini açmak için:

1. Komut Menüsü'nü açın.
2. E ve ardından L yazın. Panel > Öğeleri Göster seçeneği belirlenmiş olmalıdır.
3. Paneli açan komutu çalıştırmak için Enter tuşuna basın.

Bir paneli bu şekilde açtığınızda odak doğrudan panelin içeriğine yönlendirilir. Öğeler panelinde odak, DOM ağacına taşınır.

Nesne paneli

Sayfadaki bir öğeyi inceleme

1. Ekran okuyucunun imlecini kullanarak incelemek istediğiniz öğeye gidin.
2. İçerik menüsünü açmak için öğeyi sağ tıklamayı simüle edin.
3. Denetle seçeneğini belirleyin. Bu işlem, Nesne panelini açar ve DOM Ağacı'nda öğeye odaklanır.

DOM Ağacı, ARIA tree olarak düzenlenir. Örneği Klavye ile DOM Ağacı'nda gezinme başlıklı makalede bulabilirsiniz.

DOM ağacındaki bir öğenin kodunu kopyalama

1. DOM Ağacı'nda bir düğüme odaklanarak sağ tıklama içerik menüsünü açın.
2. Kopyala seçeneğini genişletin.
3. outerHTML'yi kopyala'yı seçin.

Bilinen sorunlar

• Kopyalama outerHTML, genellikle amaçlanan düğüm yerine üst düğümü seçer. Ancak öğenin içeriği yine de outerHTML içine kopyalanmalıdır.

DOM ağacındaki bir öğenin özelliklerini değiştirme

• Odak DOM Ağacı'ndaki bir düğümdeyken Enter tuşuna basarak düğümü düzenlenebilir hale getirin.
• Özellik değerleri arasında geçiş yapmak için Sekme tuşuna basın. "Boşluk" ifadesini duyduğunuzda boş bir metin girişinin içindesinizdir ve yeni bir özellik değeri yazabilirsiniz.
• Değişikliği kabul etmek ve öğenin tüm içeriğini dinlemek için Control+Enter veya Command+Enter (Mac) tuşlarına basın.

Bilinen sorunlar

• Metin girişine yazdığınızda geri bildirim almazsınız. Yazım hatası yapıp girişinizi ok tuşlarıyla incelerseniz geri bildirim almazsınız. Çalışmanızı kontrol etmenin en kolay yolu değişikliği kabul edip öğenin tamamının okunmasını dinlemektir.

DOM ağacındaki bir öğenin HTML'sini düzenleme

• Odak DOM Ağacı'ndaki bir düğümdeyken Enter tuşuna basarak düğümü düzenlenebilir hale getirin.
• Özellik değerleri arasında geçiş yapmak için Sekme tuşuna basın. Öğenin adını (ör. h2) duyduğunuzda bir metin girişinin içindesinizdir ve öğenin türünü değiştirebilirsiniz.
• Değişikliği kabul etmek için Control+Enter veya Command+Enter (Mac) tuşlarına basın.

Örneğin, h3 yazıp Control+Enter veya Command+Enter (Mac) tuşlarına basıldığında öğenin başlangıç ve bitiş etiketleri h3 olarak değiştirilir.

Nesne paneli sekmeleri

Öğeler panelinde, bir öğeye uygulanan CSS veya öğenin erişilebilirlik ağacındaki yeri gibi şeyleri incelemek için ek sekmeler bulunur.

• Odak DOM Ağacı'ndaki bir düğümdeyken Stiller bölmesinin seçildiğini duyana kadar Sekme tuşuna basın.
• Kullanabileceğiniz diğer sekmeleri keşfetmek için sağ ok tuşunu kullanın.

DOM Ağacı, href özelliklerine sahip öğeleri odaklanılabilir bağlantılara dönüştürür. Bu nedenle, Stiller bölmesine ulaşmak için Sekme tuşuna birden fazla kez basmanız gerekebilir.

Bilinen sorunlar

DOM Kesme Noktaları ve Özellikler sekmelerine klavyeyle erişilemiyor.

Stiller bölmesi

Stiller bölmesinde, stilleri filtreleme, öğe durumlarını (ör. :active ve :focus) açma/kapatma, sınıfları açma/kapatma ve yeni sınıflar ekleme kontrollerini bulabilirsiniz. Ayrıca, DOM Ağacı'nda ön planda olan öğeye uygulanan stilleri keşfetmek ve değiştirmek için güçlü bir stil inceleme aracı da vardır.

Stiller bölmesiyle ilgili olarak anlaşılması gereken temel kavram, bu bölmenin yalnızca DOM Ağacı'nda seçili olan düğümün stillerini göstermesidir. Örneğin, bir <header> düğümünün stillerini incelemeyi bitirdiğinizi ve şimdi bir <footer> düğümünün stillerine bakmak istediğinizi varsayalım. Bunun için DOM Ağacı'nda <footer> düğümünü seçmeniz gerekir.

footer düğümünün genel çevresinde bulunan bir düğümü (ör. altbilgideki bir bağlantı) incelemek için İncele iş akışını kullanmak daha hızlı olabilir. Bu iş akışı, DOM ağacına odaklanır. Ardından, klavyenizi kullanarak ilgilendiğiniz düğüme gidebilirsiniz.

Stiller bölmesinde gezinme

Tüm stil araçları bir şekilde Stiller bölmesine bağlı olduğundan önce bu araçta uzmanlaşmak mantıklıdır.

• Odak Stiller bölmesindeyken odağı içeriye taşımak ve içeriklerini keşfetmek için Sekme tuşuna basın.
• İlk stil etkin hale gelene kadar Sekme tuşuna basın. Ekran okuyucu kullanıyorsanız bu ilk stil "element.style {}" olarak duyurulur.
• Stil listesinde özgüllük sırasına göre gezinmek için aşağı ok tuşuna basın. Ekran okuyucu, her stili CSS dosyasının adıyla, stilin göründüğü satır numarasıyla ve stilin adıyla birlikte duyurur. Örneğin: "main.css:233 .card__img {}"
• Bir stili daha ayrıntılı incelemek için Enter tuşuna basın. Stil adının düzenlenebilir bir sürümünde odaklanma başlar.
• Her CSS özelliğinin düzenlenebilir sürümleri ve bunlara karşılık gelen değerler arasında geçiş yapmak için Tab tuşuna basın. Her stil bloğunun sonunda, ek CSS özellikleri eklemek için kullanabileceğiniz boş bir düzenlenebilir metin alanı bulunur.
• Stil listesinde ilerlemek için Sekme tuşuna basmaya devam edebilir veya bu moddan çıkıp ok tuşlarıyla gezinmeye geri dönmek için Escape tuşuna basabilirsiniz.

Ek kısayollar için Stiller bölmesi klavye referansını inceleyin.

Bilinen sorunlar

• Filtrele düzenlenebilir metin alanını kullanıyorsanız stil listesinde gezinemezsiniz.

Öğe durumunu açma/kapatma

Bir öğenin durumunu (ör. :active veya :focus) değiştirmek için:

1. Stiller bölmesine gidin ve odak Öğe Durumunu Değiştir düğmesine gelene kadar Sekme tuşuna basın.
2. Öğe durumları koleksiyonunu genişletmek için Enter tuşuna basın. Öğe durumları, bir grup onay kutusu olarak gösterilir.
3. Odak ilk duruma, :active, gelene kadar Sekme tuşuna basın.
4. Etkinleştirmek için boşluk tuşuna basın. DOM ağacında şu anda seçili olan öğenin :active stili varsa artık uygulanır.
5. Kullanılabilir tüm durumları keşfetmek için Tab tuşuna basmaya devam edin.

Ayrılan sınıf ekleme

Nesne Durumunu Aç/Kapat düğmesinin yanında Nesne Sınıfları düğmesi bulunur. Sekme ve ardından Enter tuşuna basarak odağı bu düğmeye taşıyın. Odak, Yeni Sınıf Ekle etiketli bir düzenleme metni alanına taşınır.

Element Classes (Öğe Sınıfları) düğmesi, öncelikle mevcut sınıfları bir öğeye eklemek için kullanılır. Örneğin, stil sayfanızda .clearfix adlı bir yardımcı sınıf varsa düzenleme metin alanında . tuşuna basarak sınıf öneri listesini görebilir ve aşağı ok tuşunu kullanarak .clearfix önerisini bulabilirsiniz. Alternatif olarak, sınıf adını kendiniz yazıp uygulamak için Enter tuşuna basın.

Yeni stil kuralı ekleme

Öğe Sınıfları düğmesinin yanında Yeni Stil Kuralı düğmesi bulunur. Sekme tuşuna basarak odağı bu düğmeye taşıyın ve Enter tuşuna basın. Odak, stil denetçisindeki düzenlenebilir bir metin alanına taşınır. Alanının ilk metin içeriği, DOM Ağacı'nda seçilen öğenin etiket adıdır. Bu alana istediğiniz sınıf adını yazabilir ve ardından Tab tuşuna basarak CSS özelliklerini atayabilirsiniz.

Hesaplanmış sekmesi

Odak Hesaplanmış sekmesindeyken, odağı içeriye taşımak ve içeriğini keşfetmek için Tab tuşuna basın. Hesaplanan sekmesinde, hangi CSS özelliklerinin bir öğeye özgüllük sırasına göre uygulandığını keşfetmeye yönelik kontroller bulunur.

Hesaplanmış tüm stilleri keşfetme

Hesaplanmış stiller koleksiyonuna ulaşana kadar Sekme tuşuna basın. Bunlar ARIA tree olarak sunulur. Liste kutusunu genişlettiğinizde, hesaplanan stili uygulayan CSS seçiciler gösterilir. Bu seçiciler, özgüllüğe göre düzenlenir.

Ekran okuyucu; hesaplanan değeri, hangi CSS seçicinin eşleştiğini, seçiciyi içeren stil sayfasının dosya adını ve seçicinin satır numarasını duyurur.

Bilinen sorunlar

• Filtre metin alanını kullanırsanız artık stilleri inceleyemezsiniz.

Etkinlik işleyiciler sekmesi

Öğeler panelinde, Etkinlik İşleyicileri sekmesini kullanarak bir öğeye uygulanan etkinlik işleyicilerini inceleyebilirsiniz. Odak Styles (Stiller) bölmesindeyken sağ ok tuşuna basarak Event Listeners (Etkinlik Dinleyicileri) sekmesine gidin.

Etkinlik işleyicileri keşfetme

Etkinlik işleyicileri ARIA tree olarak sunulur. Bunlar arasında gezinmek için ok tuşlarını kullanabilirsiniz. Ekran okuyucu, etkinlik işleyicinin bağlı olduğu DOM nesnesinin adını, etkinlik işleyicinin tanımlandığı dosya adını ve satır numarasını duyurur.

Erişilebilirlik bölmesi

Odak Erişilebilirlik bölmesindeyken, odağı içeriye taşımak ve içeriğini keşfetmek için Sekme tuşuna basın. Erişilebilirlik bölmesinde, erişilebilirlik ağacını, bir öğeye uygulanan ARIA özelliklerini ve hesaplanmış erişilebilirlik özelliklerini keşfetmeye yönelik kontroller bulunur.

Erişilebilirlik Ağacı

Erişilebilirlik Ağacı, her treeitem öğesinin DOM'daki bir öğeye karşılık geldiği bir ARIA tree olarak sunulur. Ağaç, seçili düğüm için hesaplanan rolü duyurur. div ve span gibi genel öğeler, ağaçta "GenericContainer" olarak duyurulur. Ağaçta gezinmek ve üst-alt ilişkilerini incelemek için ok tuşlarını kullanın.

Bilinen sorunlar

• Erişilebilirlik bölmesi tarafından kullanılan ARIA ağacı türü, VoiceOver gibi macOS ekran okuyucular için Chrome'da kullanılamayabilir. Bu sorunla ilgili gelişmelerden haberdar olmak için Chromium sorunu #868480'e abone olun.
• ARIA Özellikleri ve Hesaplanmış Özellikler bölümleri ARIA ağaçları olarak işaretlenir ancak odak yönetimi içermez. Bu, bu bölümlerin klavye ile kullanılamayacağı anlamına gelir.

Denetimler paneli

Denetimler paneli, performans, erişilebilirlik, SEO ve diğer birçok kategoriyle ilgili yaygın sorunları kontrol etmek için bir siteye karşı bir dizi test çalıştırmanıza olanak tanır.

Denetleme yapılandırma ve çalıştırma

1. Denetimler paneli ilk kez açıldığında odak, formun sonundaki Denetim Çalıştır düğmesine yerleştirilir. Form, varsayılan olarak her kategori için denetim gerçekleştirecek şekilde yapılandırılmıştır. Bu denetimlerde, mobil emülasyon ve simüle edilmiş 3G bağlantısı kullanılır.
2. Denetim ayarlarını değiştirmek için üst karakter+sekme tuşlarını kullanın veya Göz atma modunda geri gidin.
3. Denetimi çalıştırmaya hazır olduğunuzda Denetimi Çalıştır düğmesine geri dönüp Enter tuşuna basın.
4. Odak, denetimden çıkmanızı sağlayan bir İptal düğmesi içeren bir modal pencereye taşınır. Denetleme çalıştırılıp sayfa birden çok kez yenilenirken bir dizi kısa ses duyabilirsiniz.

Bilinen sorunlar

• Yapılandırma formunun farklı bölümleri fieldset öğesiyle işaretlenmemiş. Hangi kontrollerin hangi bölümle ilişkili olduğunu anlamak için bu bölümlerde Göz Atma modunda gezinmek daha kolay olabilir.
• Denetim çalışması tamamlandığında earcon veya canlı bölge duyurusu yapılmıyor. Genellikle yaklaşık 30 saniye sürer. Bu sürenin ardından sonuçlara gidebilirsiniz. Sonuçlara hızlıca ulaşmak için Göz atma modunu kullanın.

Denetim raporunda gezinme

Denetleme raporu, denetleme kategorilerinin her birine karşılık gelen bölümler halinde düzenlenir. Rapor, her kategori için puanların listelendiği bir şekilde açılır. Bu puanlar, ilgili bölümlere gitmek için kullanılabilecek bağlantılar da içerir. Her bölümde, başarılı veya başarısız denetimlerle ilgili bilgileri içeren genişletilebilir details öğeler bulunur. Varsayılan olarak yalnızca başarısız olan denetimler gösterilir. Her bölüm, tüm başarılı denetimleri içeren son bir details öğesiyle sona erer.

Yeni bir denetleme çalıştırmak için üst karakter+sekme tuşlarını kullanarak rapordan çıkın ve Denetleme Yap düğmesini bulun.