Microsoft Edge DevTools'da Kaynak Sırası Görüntüleyici ile tanışın

  • History |
  • |
  • 0 Yorum

Geçen yıl, web geliştirici topluluğu The Web We Want'ın ihtiyaçlarını daha iyi anlamak için tarayıcı üreticileri tarafından sektörler arası bir çabaya katıldık . Bu çabayla doğrulanan ilk ihtiyaçlardan biri, geliştirici araçlarını kullanarak bir sayfadaki öğelerin kaynak sırasını görüntülemenin bir yolunu isteyen Adrian Roseli tarafından sunuldu .
Bugün, Microsoft Edge DevTools'da yeni bir deneysel Kaynak Sırası Görüntüleyiciyi tanıtmaktan mutluluk duyuyoruz. Bunu, Microsoft Edge veya Google Chrome'un (85 veya daha yenisi) kanary yapılarında deneysel DevTools özelliklerini etkinleştirerek bugün deneyebilirsiniz .

Daha fazla bilgi edin:

İstediğimiz Web

Kaynak sırası neden önemlidir?

Adrian , sunum videosunda ve diğer birkaç blog gönderisinde sorunu açıklayarak harika bir iş çıkardı , ancak işte kısa bir özet:
Modern CSS mizanpaj teknikleri ile web tasarımcıları, geleneksel mizanpajlardan sıyrılmak ve web'e yeni estetik getirmek için her zamankinden daha fazla güce sahipler. Sorun şu ki, altında ne olduğu hala birçok kullanıcı için önemli. Örneğin, sayfa kaynağındaki içeriğin sırası, ekran okuyucuların okuduğu tek yardımcı teknolojidir. Bu nedenle, ekranda görüntüledikleriniz kadar altında olanın da anlamlı olduğundan emin olmanız gerekir.
Aşağıdaki örneği göz önünde bulundurun:
Kalem Bkz
Kaynak sırası sorunu örneğini Christian Heilmann (tarafından @ codepo8 )
üzerine CodePen .
Görsel olarak, her şey yolunda görünüyor - çorap, ardından gömlek, pantolon ve son olarak ayakkabı giymek mantıklı. Ancak, klavyeyi kullanarak belgede gezinirseniz, farklı bir hikaye elde edersiniz.

Şimdi önce ayakkabılar, sonra pantolonlar, sonra gömlekler ve son olarak da çoraplar, sayfadaki düzene uymayan ve istediğiniz gibi olmayabilir.
Gören kullanıcılar için bu çok fazla kafa karışıklığına neden olmayabilir. Ancak, ekran okuyucuya bağımlı bir kullanıcı için içerik artık bir anlam ifade etmeyebilir.

Suçlu, belgedeki kaynak sırasının ekranda görüntülenenle eşleşmemesidir. Aşağıdaki kodda HTML, öğeleri tek bir hiyerarşi kullanarak sıralar. Ekran okuyucular bu hiyerarşiyi kullanır.
Ancak, ekrandaki görüntüleme sırası CSS'de display:flex ve order kullanılarak tanımlanır:
Önceden, bunu test etmenin tek yolu klavyeyi kullanarak sayfanızda gezinmek veya bir ekran okuyucuyla test etmekti. Yeni Kaynak Sırası Görüntüleyici, sayfada üst üste binen kaynak sırasını görmenizi sağlar. Etkinleştirme seçeneğini DevTools'un erişilebilirlik bölmesinde bulabilirsiniz.