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

Bu kılavuz, öncelikle ekran okuyucu gibi yardımcı teknolojileri kullanan kişilerin 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 DevTools özelliklerini arıyorsanız Erişilebilirlik Referansı'na bakın.

Geliştirici Araçları'nın erişilebilirliği henüz geliştirme aşamasındadır. Bazı paneller ve sekmeler, yardımcı teknolojiyle diğerlerinden daha iyi çalışır. Bu kılavuzda, en erişilebilir paneller açıklanmakta ve süreç boyunca karşılaşabileceğiniz belirli sorunlar vurgulanmaktadır.

Genel Bakış

Başlamadan önce, DevTools kullanıcı arayüzünün nasıl yapılandırıldığına dair bir zihinsel model oluşturmanız faydalı olacaktır. Geliştirici Araçları, ARIA tablist içinde düzenlenmiş bir dizi panele ayrılmıştır. Ö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, belgelerde genellikle sekmeler veya bölmeler 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 sayfayı yer işaretlerinize ekleyin ve tekrar ziyaret edin.

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

Klavyeyle gezinme

• Geliştirici Araçları açıkken Ctrl+] veya Command+] (Mac) tuşlarına basarak sonraki panele odaklanın.
• Önceki panele odaklanmak için Control+[ veya Command+[ (Mac) tuşlarına basın.
• Odak noktasını bir panele taşımak için Üst Karakter+Sekme tuşlarını kullanmak ve panelleri değiştirmek için ok tuşlarını kullanmak da mümkündür. Ancak daha önce bahsedilen kısayolları kullanmak daha hızlı olabilir.tablist

Bilinen sorunlar

• Konsol ve 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 paneldeki odaklanılan içerik okunduktan sonra duyurulur. Bu nedenle, bu tür bir mesajı 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, 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, Nesneler panelini açar ve DOM ağacındaki öğeye odaklanır.

DOM Ağacı, ARIA tree olarak düzenlenir. Örnek için Klavyeyle DOM Ağacı'nda gezinme başlıklı makaleyi inceleyin.

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

• Copy outerHTML (outerHTML'yi kopyala) seçeneği genellikle geçerli düğümü değil, üst düğümünü seçer. Ancak öğenin içeriği, kopyalanan outerHTML'de yer almaya devam eder.

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 keşfetmek için ok tuşlarını kullanırsanız da 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 öğeleri 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) değiştirme, sınıfları değiştirme ve yeni sınıflar ekleme kontrollerini bulabilirsiniz. Ayrıca, DOM ağacında odaklanılan öğeye uygulanan stilleri keşfetmek ve değiştirmek için güçlü bir stil inceleme aracı da vardır.

Stiller paneliyle ilgili olarak anlaşılması gereken temel kavram, yalnızca DOM ağacında şu anda seçili olan düğümün stillerini gösterdiğidir. Ö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 öncelikle DOM Ağacı'nda <footer> düğümünü seçmeniz gerekir. footer düğümünün genel çevresindeki 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 tam olarak 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ünlü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. Odak, stil adının düzenlenebilir bir sürümünde 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 Sekme 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.

Diğer kısayollar için Stiller bölmesi klavye referansını okuyun.

Bilinen sorunlar

• Filtrele düzenlenebilir metin alanını kullanırsanız artık stil listesinde gezinemezsiniz.

Öğe durumunu değiştirme

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

1. Stiller bölmesine gidin ve Öğe Durumunu Değiştir düğmesi odaklanana 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. İlk durum olan :active odaklanana kadar Tab tuşuna basın.
4. Etkinleştirmek için boşluk tuşuna basın. DOM ağacında şu anda seçili olan öğede :active stili varsa bu stil artık uygulanır.
5. Kullanılabilir tüm durumları keşfetmek için Tab tuşuna basmaya devam edin.

Kullanımdan kaldırılan bir 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 metin düzenleme 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 sınıf önerileri listesini görmek için düzenleme metin alanında . tuşuna basabilir ve .clearfix önerisini bulmak için aşağı oku kullanabilirsiniz. Alternatif olarak, sınıf adını kendiniz yazıp Enter tuşuna basarak uygulayabilirsiniz.

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çisinin içindeki 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ı yazıp Tab tuşuna basarak CSS özelliklerini atayabilirsiniz.

Hesaplanmış sekmesi

Odak Hesaplanmış sekmesindeyken, odağı içeriye taşımak ve içeriklerini 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. Bir liste kutusunu genişlettiğinizde, hesaplanan stili uygulayan CSS seçiciler gösterilir. Bu seçiciler, özelliğe göre düzenlenir. Ekran okuyucu, hesaplanan değeri, CSS seçicinin şu anda hangi öğeyle 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 Stiller bölmesindeyken sağ ok tuşuna basarak Olay Dinleyicileri sekmesine gidin.

Etkinlik işleyicileri keşfedin

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ığı dosyanın adını ve satır numarasını duyurur.

Erişilebilirlik bölmesi

Odak Erişilebilirlik bölmesindeyken, odağı bölmenin içine taşımak ve içeriğini keşfetmek için Tab 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 öğe 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ü, macOS'teki VoiceOver gibi ekran okuyucular için Chrome'da düzgün şekilde gösterilmeyebilir. Bu konudaki 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şaretlenmiş olsa da şu anda odak yönetimi olmadığı için klavye ile çalıştırılamaz.

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 Denetimi Çalıştır düğmesine yerleştirilir. Form, varsayılan olarak her kategori için denetim yapacak şekilde yapılandırılmıştır. Bu denetimlerde, mobil emülasyon ve simüle edilmiş bir 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ıza olanak tanıyan bir İptal düğmesi içeren bir modal pencereye taşınır. Denetim çalışırken ve sayfa birden çok kez yenilenirken bir dizi sesli simge duyabilirsiniz.

Bilinen sorunlar

• Yapılandırma formunun farklı bölümleri şu anda fieldset öğesiyle işaretlenmiyor. 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 tamamlandığında earcon veya canlı bölge duyurusu yapılmıyor. Genellikle yaklaşık 30 saniye sürer. Bu sürenin sonunda sonuçlara gidebilirsiniz. Sonuçlara ulaşmanın en kolay yolu Göz atma modunu kullanmak olabilir.

Denetim raporunda gezinme

Denetim raporu, denetim kategorilerinin her birine karşılık gelen bölümler halinde düzenlenir. Rapor, her kategori için puan listesiyle 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 nihai 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.