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

Rob Dodson

Bu rehberin amacı, öncelikli olarak ekran okuyucular gibi yardımcı teknolojilerden yararlanan kullanıcılara ve Chrome Geliştirici Araçları'na erişmelerine yardımcı olmaktır. Chrome Geliştirici Araçları, Google Chrome tarayıcısında yerleşik olarak bulunan web geliştiricisi araçlarından oluşan bir pakettir. Bir web sayfasının erişilebilirliğini iyileştirmekle ilgili Geliştirici Araçları özellikleri arıyorsanız Erişilebilirlik Referansı'na bakın.

Geliştirici Araçları'nın erişilebilirliği için çalışmalarımız devam etmektedir. Bazı paneller ve sekmeler yardımcı teknolojiyle diğerlerine göre daha iyi çalışır. Bu kılavuzda, en erişilebilir paneller hakkında bilgi verilir ve süreç boyunca karşılaşabileceğiniz belirli sorunlar vurgulanır.

Genel bakış

Başlamadan önce, DevTools kullanıcı arayüzünün nasıl yapılandırıldığına dair zihinsel bir modelinizin olması faydalı olacaktır. Geliştirici Araçları, ARIA tablist olarak 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 ve canlı düzenleme nesnelerini okumanıza olanak tanır.

Her bir panelin içerik alanında, dokümanlarda genellikle sekmeler veya bölmeler olarak adlandırılan farklı araçlar bulunur. Örneğin, Öğeler paneli, etkinlik işleyicileri, erişilebilirlik ağacını ve daha fazlasını incelemek için ek sekmeler içerir. Sekmeler ve bölmeler arasındaki fark biraz rastgeledir. İki terimden birini görmenizin tek nedeni resmi Geliştirici Araçları belgelerinin geri kalanıyla tutarlılığı korumaktır.

Klavye kısayolları

DevTools Klavye Kısayolları referansı, size yardımcı olabilecek yardımcı bir kılavuzdur. Bu panele yer işareti koyduğunuzdan ve farklı panelleri keşfederken geri dönüp baktığınızdan emin olun.

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

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

Paneller arasında gezinme

Klavyeyle gezinin

  • Geliştirici Araçları açıkken sonraki panele odaklanmak için Control+] veya Command+] (Mac) tuşlarına basın.
  • Önceki panele odaklanmak için Control+[ veya Command+[ (Mac) tuşlarına basın.
  • Odağı bir panelin tablist öğesine taşımak için Üst Karakter+Sekme tuşlarını ve panelleri değiştirmek için ok tuşlarını kullanabilirsiniz. Ancak önceden belirtilen kısayolları kullanmak daha hızlı olabilir.

Bilinen sorunlar

  • Konsol ve Performans panelleri gibi bazı paneller, etkinleştirilir etkinleştirilmez odağı içerik alanına taşıyabilir. Bu, ok tuşlarıyla gezinmeyi zorlaştırabilir.
  • Seçilen panelin adı yalnızca paneldeki odaklanılan içeriği okuduktan sonra duyurulur. Bu da çok kolay kaçırmanıza neden olabilir.

Komut Menüsüyle 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+Üst Karakter+P veya Command+Üst Karakter+P (Mac) tuşlarına basın. Komut Menüsü, bulanık arama otomatik tamamlama birleşik kutusudur.
  2. Açmak istediğiniz panelin adını yazın, ardından doğru seçeneğe gitmek için Aşağı Ok klavyeyi kullanın.
  3. Bir komut çalıştırmak için Enter tuşuna basın.

Örneğin, Öğeler 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 belirlenir.
  3. Paneli açan komutu çalıştırmak için Enter tuşuna basın.

Bir panelin bu şekilde açılması, odağı panelin içeriğine yönlendirir. Öğ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. Bir öğenin sağ fare tıklamasını simüle ederek içerik menüsünü açın.
  3. İncele seçeneğini belirleyin. Bu işlem, Öğeler panelini açar ve öğeyi DOM Ağacı'na odaklar.

DOM Ağacı, ARIA tree şeklinde düzenlenmiştir. Örnek için Klavyeyle DOM Ağacı'nda gezinme konusuna bakın.

DOM Ağacı'ndaki bir öğenin kodunu kopyalayın

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

Bilinen sorunlar

  • Copy outerHTML (outerHTML'yi kopyala) genellikle geçerli düğümü değil, üst düğümünü seçer. Bununla birlikte, öğenin içeriği kopyalanan outerHTML'de yine de olmalıdır.

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

  • Odak DOM Ağacı'ndaki bir düğüme odaklanıp düzenlenebilir hale getirmek için Enter tuşuna basın.
  • Ö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. Bir yazım hatası yaparsanız ve 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 duyurulmasına kulak vermektir.

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

  • Odak DOM Ağacı'ndaki bir düğüme odaklanıp düzenlenebilir hale getirmek için Enter tuşuna basın.
  • Özellik değerleri arasında geçiş yapmak için Sekme tuşuna basın. Örneğin, öğenin adını duyduğunuzda (örneğin "h2") 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 bastığınızda, öğenin başlangıç ve bitiş etiketleri h3 olarak değiştirilir.

Nesne paneli sekmeleri

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

  • Odak DOM Ağacı'ndaki bir düğüme odaklanıldığında, Stiller bölmesinin seçili olduğunu duyana kadar Sekme tuşuna basın.
  • Kullanılabilir diğer sekmeleri keşfetmek için sağ oku kullanın.

DOM Ağacı, href özelliklerine sahip öğeleri odaklanabilir 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 klavyeden erişilemez.

Stiller bölmesi

Stiller bölmesinde filtreleme stilleri, öğe durumlarını değiştirme (:active ve :focus gibi), sınıfları açıp kapatma ve yeni sınıflar ekleme denetimlerini 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 bölmesinin anlaşılması gereken temel kavram, yalnızca DOM Ağacı'nda şu anda seçili olan düğüm için stilleri göstermesidir. Örneğin, bir <header> düğümünün stillerini incelemeyi tamamladığınızı ve şimdi bir <footer> düğümünün stillerine bakmak istediğinizi varsayalım. Bunun için önce DOM Ağacı'nda <footer> düğümünü seçmeniz gerekir. DOM Ağacı'nı odaklayan footer düğümünün genel yakınındaki bir düğümü (altbilgi içindeki bir bağlantı gibi) incelemek için İncele iş akışını kullanabilir, ardından tam olarak ilgilendiğiniz düğüme gitmek için klavyenizi kullanabilirsiniz.

Stiller bölmesinde gezinme

Tüm stil araçları bir şekilde Stiller bölmesine bağlandığından, önce bu araçta uzman olmak mantıklıdır.

  • Odak Stiller bölmesindeyken odağı içeri 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 bildirilir.
  • Stiller listesinde belirginlik sırasına göre gezinmek için Aşağı Ok tuşuna basın. Ekran okuyucu, CSS dosyasının adından, stilin göründüğü satır numarasından ve stil adının kendisiyle başlayarak her stili okur. Ö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üne odaklanmaya başlar.
  • Her CSS mülkünün düzenlenebilir sürümleri ile karşılık gelen değerleri 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 gezinmek 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ı okuduğunuzdan emin olun.

Bilinen Sorunlar
  • Düzenlenebilir metin için Filtre alanını kullandığınızda stil listesinde gezinemezsiniz.

Öğe durumunu değiştir

:active veya :focus gibi bir öğenin durumunu değiştirmek için:

  1. Stiller bölmesine gidin ve Öğe Durumunu Değiştir düğmesine odaklanana kadar Sekme tuşuna basın.
  2. Öğe durumları koleksiyonunu genişletmek için Enter tuşuna basın. Öğe durumları bir onay kutusu grubu olarak sunulur.
  3. İlk duruma (:active) odaklanılana kadar Sekme tuşuna basın.
  4. Etkinleştirmek için boşluk tuşuna basın. DOM Ağacında seçili olan öğenin bir :active stili varsa bu stil uygulanır.
  5. Kullanılabilir tüm durumları keşfetmek için Sekme tuşuna basmaya devam edin.

Çıkış yapan bir sınıfı ekleme

Öğe Durumunu Değiştir düğmesinin yanında Öğe Sınıfları düğmesi bulunur. Sekme ve ardından Enter tuşlarına basarak odağı ona taşıyın. Odak, Yeni Sınıf Ekle etiketli bir düzenleme metin alanına gider.

Öğe Sınıfları düğmesi temel olarak bir öğeye mevcut sınıfları eklemek için kullanılır. Örneğin, stil sayfanız .clearfix adlı bir yardımcı sınıf içeriyorsa sınıfların öneri listesini görmek için metin düzenleme alanının içinde . tuşuna basabilir ve .clearfix önerisini bulmak için Aşağı Ok tuşunu kullanabilirsiniz. Dilerseniz sınıf adını kendiniz yazıp Enter tuşuna basarak da uygulayabilirsiniz.

Yeni stil kuralı ekle

Öğe Sınıfları düğmesinin yanında Yeni Stil Kuralı düğmesi bulunur. Sekme tuşuna ve ardından Enter tuşuna basarak odağı ona taşıyın. Odak, stil denetleyicinin içindeki düzenlenebilir bir metin alanına gider. Alanı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 daha sonra, CSS özellikleri atamak üzere Sekme tuşuna basabilirsiniz.

Hesaplanan sekme

Odak Hesaplanan sekmesindeyken odağı içeri taşımak ve içeriklerini keşfetmek için Sekme tuşuna basın. Hesaplanan sekmesinde, bir öğeye belirlilik sırasına göre gerçekte hangi CSS özelliklerinin uygulandığını keşfetmek için kontroller bulunur.

Tüm hesaplanan stilleri keşfedin

Hesaplanan stiller koleksiyonuna ulaşana kadar Sekme tuşuna basın. Bunlar bir ARIA tree olarak sunulur. Bir liste kutusunun genişletilmesi, hesaplanan stili hangi CSS seçicilerin uyguladığını gösterir. Bu seçiciler belirliliğe göre düzenlenmiştir. Ekran okuyucu, hesaplanan değeri, şu anda 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ı bildirir.

Bilinen sorunlar

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

Etkinlik işleyiciler sekmesi

Öğeler panelinden Etkinlik İşleyicileri sekmesini kullanarak bir öğeye uygulanan etkinlik işleyicileri inceleyebilirsiniz. Odak Stiller bölmesindeyken Etkinlik İşleyiciler sekmesine gitmek için Sağ Ok'a basın.

Etkinlik işleyicileri keşfedin

Etkinlik işleyiciler, 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ın yanı sıra etkinlik işleyicinin tanımlandığı dosya adını ve satır numarasını bildirir.

Erişilebilirlik bölmesi

Odak Erişilebilirlik bölmesindeyken, odağı içeri 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 hesaplanan erişilebilirlik özelliklerini keşfetmek için kontroller bulunur.

Erişilebilirlik Ağacı

Erişilebilirlik Ağacı, ARIA tree olarak sunulur. Burada her treeitem, DOM'deki bir öğeye karşılık gelir. Ağaç, seçilen düğüm için hesaplanan rolü bildirir. div ve span gibi genel öğeler ağaçta "GeneralContainer" olarak duyurulur. Ağaçta gezinmek ve üst-alt ilişkilerini keşfetmek 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 düzgün bir şekilde gösterilmeyebilir. Bu sorunla ilgili ilerlemeden haberdar olmak için Chromium sorunu #868480'e abone olun.
  • ARIA Özellikleri ve Hesaplanan Özellikler bölümleri ARIA ağaçları olarak işaretlenmiştir ancak şu anda odak yönetimi bulunmadığından klavyeyle kullanılamazlar.

Denetimler paneli

Denetimler paneli; performans, erişilebilirlik, SEO ve diğer çeşitli kategorilerle ilgili yaygın sorunları kontrol etmek için bir sitede bir dizi test gerçekleştirmenize olanak tanır.

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

  1. Denetimler paneli ilk açıldığında odak, formun sonundaki Denetleme Çalıştır düğmesine yerleştirilir. Varsayılan olarak form, 3G bağlantısı simülasyonunda mobil emülasyon kullanarak her kategori için denetim çalıştıracak şekilde yapılandırılır.
  2. Denetleme ayarlarını değiştirmek için üst karakter + sekme tuşlarını kullanın veya Göz atma moduna geri dönün.
  3. Denetimi çalıştırmaya hazır olduğunuzda Denetlemeyi Çalıştır düğmesine geri dönün ve Enter tuşuna basın.
  4. Odak, denetimden çıkmanıza olanak tanıyan İptal düğmesi bulunan bir kalıcı pencereye gider. Denetim işlemi çalıştırılırken ve sayfa birkaç kez yenilenirken bir dizi uyarı sesi duyabilirsiniz.

Bilinen sorunlar

  • Yapılandırma formunun farklı bölümleri şu anda bir fieldset öğesiyle işaretlenmemiştir. Her bir bölümle hangi kontrollerin ilişkili olduğunu görmek için Göz Atma modunda bunlar arasında gezinmek daha kolay olabilir.
  • Denetim tamamlandığında uyarı veya canlı bölge duyurusu gösterilmez. Genellikle bu işlem yaklaşık 30 saniye sürer. Sonrasında sonuçlara gidebilirsiniz. Göz atma modunu kullanmak sonuçlara erişmenin en kolay yolu olabilir.

Denetim raporunda gezinme

Denetim raporu, her bir denetim kategorisine karşılık gelen bölümler halinde düzenlenmiştir. Rapor, her kategorinin puanlarıyla birlikte açılır. Bu puanlar, ilgili bölümlere atlamak için kullanılabilen bağlantılardır. Her bölümde, başarılı veya başarısız denetimlerle ilgili bilgiler içeren genişletilebilir details öğeleri bulunur. Varsayılan olarak, yalnızca başarısız denetimler gösterilir. Her bölüm, geçilen tüm denetimleri içeren son bir details öğesiyle biter.

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