Chrome Geliştirici Araçları, geliştiricilerin ağacın tamamıyla ilgili genel bir fikir edinmesini kolaylaştıran tam erişilebilirlik ağacını kullanıma sunuyor. Bu gönderide, bu ağacın nasıl oluşturulduğunu ve işinizde nasıl kullanılacağını öğreneceksiniz.
Erişilebilirlik ağacı nedir?
Ekran okuyucular gibi yardımcı teknolojiler, web içeriğiyle etkileşimde bulunmak için Chromium'un Accessibility API'sini kullanır. Bu API'nin temel modeli erişilebilirlik ağacıdır: Yardımcı teknolojinin özellikleri ve özellikleri sorgulayabileceği ve bunlar üzerinde işlem yapabileceği erişilebilirlik nesnelerinin bir ağacı. Web geliştiricileri, erişilebilirlik ağacını öncelikle HTML için ARIA özellikleri gibi DOM özellikleriyle şekillendirir ve işler.
Chrome Geliştirici Araçları'nda, geliştiricilerin, içeriklerinin yardımcı teknolojilerden nasıl etkilendiğini anlamalarına yardımcı olmak için erişilebilirlik bölmesi sağlıyoruz. Somut olarak, DOM ağaç görüntüleyicisinde bir düğüm seçildiğinde, ilgili erişilebilirlik düğümünün özellikleri bölmede, düğümün üst öğelerinin ve onun ilk alt öğelerinin görünümüyle birlikte görüntülenir.
Ağaç nasıl oluşturulur?
Geliştirici Araçları'ndaki bu yeni tam ağaç görünümünün nasıl göründüğüne geçmeden önce, erişilebilirlik ağacının ne olduğunu daha somut terimlerle gözden geçirelim. Erişilebilirlik ağacı, DOM ağacının bir türevidir. Yapısı aşağı yukarı aynıdır ancak yalnızca stil için kullanılan <div> öğesi gibi anlamsal içerik barındırmayan düğümleri kaldırmak basitleştirilmiştir. Ağaçtaki her düğümün Button veya Heading gibi bir rolü vardır. Ad genellikle ARIA özelliklerinden olabilir veya düğümün içeriğinden türetilebilir. Bir HTML belgesine baktığımızda:
<html>
<head>
<title>How old are you?</title>
</head>
<body>
<label for="age">Age</label>
<input id="age" type="number" name="age" value="42">
<div>
<button>Back</button>
<button>Next</button>
</div>
</body>
</html>
Chromium'daki Blink adlı oluşturucu, yaklaşık olarak aşağıdaki gibi bir dahili erişilebilirlik ağacı oluşturur.
role='rootWebArea' focusable name='How old are you?'
role='genericContainer' ignored
role='genericContainer' ignored
role='labelText'
role='staticText' name='Age'
role='spinButton' editable focusable name='Age' value='42'
role='genericContainer' editable
role='staticText' editable name='42'
role='genericContainer'
role='button' focusable name='Back'
role='staticText' name='Back'
role='button' focusable name='Next'
role='staticText' name='Next'
Bu temsilin, genericContainer rolüne sahip birden çok gereksiz düğüm içerdiğini unutmayın. Bu düğüm, erişilebilirlik ağacının DOM ağacının basitleştirilmiş bir türevi olduğu yönündeki ifadeyle çelişir. Yine de bu düğümlerin çoğu sadece iç ağaçta meydana gelir ve yardımcı teknolojilerden etkilenmez. Geliştirici Araçları, erişilebilirlik bilgilerini doğrudan oluşturucu işleminden topladığından bu, Geliştirici Araçları'nın işlediği ağaç gösterimidir.
Geliştirici Araçları'ndaki tam erişilebilirlik ağacı
Yeni ve tam erişilebilirlik ağacı, DOM ağacıyla senkronize edilmiştir. Bu sayede geliştiriciler iki ağaç arasında geçiş yapabilir. Yeni ağacın daha keşfedilebilir, kullanışlı ve kullanımı kolay olacağını umuyoruz.
Erişilebilirlik ağacının işleyiş şeklini öğrendiğinize göre artık yeni ağaç görünümünün nasıl göründüğüne bakmak için Geliştirici Araçları'nı kullanabilirsiniz. Ağacı göstermek için, bir başlık, başlık ve iki düğme içeren aşağıdaki HTML dokümanı kullanılmıştır.
<!DOCTYPE html>
<title>Test</title>
<h1>Heading for example page</h1>
<div>
<button>Back</button>
<button>Next</button>
</div>
Önceki ağaç görünümü yalnızca tek bir düğümü ve üst öğelerini keşfetmenize olanak tanırdı.
Artık yeni ağacın geçişini yaptığınızda DOM ağaç görünümünün yerini alır ve sayfaya ait tam erişilebilirlik ağacını görmenizi sağlar:
Tembel ağaç yapımı
Daha büyük siteler için bile ağaç performansını artırmak amacıyla ağaç, inceleme sırasında ön uçta geçilerek oluşturulur. Ağaçta bir düğüm genişletildikten sonra, düğümlerin alt öğeleri Chrome Geliştirici Araçları Protokolü (CDP) aracılığıyla getirilir ve ağaç yeniden oluşturulur.
Live
Yeni ağaç görünümü etkin durumdadır ve oluşturucudaki erişilebilirlik ağacı değişirse dinamik olarak güncellenir. Ağaçtaki değişiklikler konusunda yardımcı teknolojilere bildirimde bulunan mekanizmalar aynı mekanizmaya bağlanır ve bunu kullanarak etkinlikleri güncellenmiş düğümlere sahip Geliştirici Araçları ön ucuna gönderir. Pratikte, CDP arka ucu ağaç güncellemelerini dinler, daha önce hangi düğümlerin istendiğini izler ve bu düğümlerden herhangi biri değişirse etkinlikleri Geliştirici Araçları ön ucuna gönderir.
Birçok ağacın hikayesi
Erişilebilirlik ağacı ne? bölümündeki açıklamada Blink'in, oluşturduğu DOM için bir erişilebilirlik ağacını nasıl oluşturduğunu ve Geliştirici Araçları bu ağacı CDP üzerinden nasıl getirdiğini öğrendiniz. Bu doğru olsa da, bu açıklamada bazı karışıklıkları atladık. Gerçekte, Chromium'daki erişilebilirlik ağacını tecrübe etmenin birçok farklı yolu vardır. Geliştirici Araçları için yeni ağaç görünümünü tasarlarken, Chromium'un dahili erişilebilirlik özelliklerinin hangi kısmını öne çıkarmak istediğimizle ilgili bazı tercihler yaptık.
Platformlar
Her platformun farklı bir Accessibility API'si vardır. Ağacın şekli tüm platformlarda aynı olsa da ağaçla etkileşim API'si farklıdır ve özellik adları farklılık gösterebilir. Geliştirici Araçları, rol ve özelliklerin ARIA spesifikasyonunda tanımlananlarla eşleşme eğiliminde olduğu Chromium dahili ağacını gösterir.
Birden fazla çerçeve ve site izolasyonu
Chromium her sekmenin içeriğini yalnızca farklı oluşturucu işlemlerine koyduğu gibi siteler arası dokümanları farklı oluşturucu işlemlerinde de izole ettiğinden, işlenmemiş her alt dokümana CDP üzerinden ayrı olarak bağlanmamız ve erişilebilirlik ağacını getirmemiz gerekir. Daha sonra bu alt ağaçları ön uçta bir araya getirerek Chromium'da farklı oluşturucu süreçlerinde yaşamalarına rağmen uyumlu tek bir ağaç görünümü oluşturuyoruz.
Yok sayılan ve ilgi çekmeyen düğümler
Varsayılan olarak bazı düğümleri gizleriz: yoksayılan ve "genel" rolüne sahip adsız düğümler. Bu düğümler semantik anlam taşımaz ve yoksayılan düğümler olması halinde yardımcı teknolojilerden etkilenmez. Ağaç görünümünde karışıklık olmaması için bu düğümleri gizleriz. Eklemezsek çoğu web sayfasının erişilebilirlik ağacı bunun yerine aşağıdaki gibi görünür:
Bu noktada dikkat edilmesi gereken nokta, arka uçta bulunandan başka bir ağaç daha oluşturmamız gerektiği anlamına gelir. Örneğin, A, B, C ve X düğümlerimiz olduğunu varsayalım. Burada A alt X ve B alt öğeleri ve X de alt C'ye sahiptir. X yoksayılan bir düğümse, ağaçtan X'i ayıklar ve bunun yerine C'nin, A'nın alt öğesi olduğu bir ağaç oluştururuz.
Ön uçta, yoksayılan düğümler dahil tam ağacı oluşturur ve bunları yalnızca düğümleri oluşturmadan hemen önce budanırız. Bunu iki nedenden dolayı yaparız:
- Her iki uç noktada da aynı ağaç yapısına sahip olduğumuzdan bu yöntem, düğüm güncellemelerini arka uçtan yönetmeyi çok daha kolay hale getiriyor. Örneğin, örnekteki düğüm B kaldırılırsa X düğümü için bir güncelleme alırız (alt öğeleri değiştiği için) ancak bu düğümü kırpsak neyi güncelleyeceğimizi belirlemede zorluk yaşarız.
- Tüm DOM düğümlerinin karşılık gelen bir erişilebilirlik düğümüne sahip olmasını sağlar. Ağaca geçiş yapıldığında DOM ağacında seçili olan düğüme karşılık gelen düğümü seçeriz. Bu nedenle, önceki örnekte kullanıcı, X'e karşılık gelen DOM düğümü seçiliyken ağacı açıp kapatırsa, A ve B düğümleri arasına X ekler ve ağaçta X'i seçeriz. Bu sayede kullanıcı, tüm DOM düğümleri için erişilebilirlik düğümünü inceleyebilir ve düğümün neden yoksayıldığını belirleyebilir.
Gelecek fikirleri
Yeni erişilebilirlik ağacını kullanıma sunmak sadece bir başlangıç. Bu yeni görünümün üzerine inşa edebileceğimiz gelecekteki projeler için birkaç fikrimiz var ancak görüşlerinizi de öğrenmekten memnuniyet duyarız.
Alternatif filtrelemeler
Yukarıda açıklandığı gibi, şu anda ilgi çekici olmadığı düşünülen düğümleri filtreliyoruz. Bu davranışı devre dışı bırakıp tüm düğümleri göstermek için bir yöntem sunabilir veya Önemli nokta düğümlerini göster ya da Başlıkları göster gibi alternatif filtrelemeler sağlayabiliriz.
A11y sorunlarını vurgula
Ağaçla bir “erişilebilirlik en iyi uygulama” analizini birleştirip erişilebilirlik sorunlarını doğrudan sorun teşkil eden düğümlerde vurgulayabiliriz.
Erişilebilirlik işlemlerini Geliştirici Araçları'nda gösterme
Şu anda gösterdiğimiz ağaç tamamen tek yönlüdür: Belirli bir web sayfasına göz atarken yardımcı teknolojiye hangi bilgilerin iletileceğine dair bir fikir edinmemize olanak tanır. Erişilebilirlik işlemleri ise diğer yöndeki iletişimi temsil eder: Yardımcı teknolojinin sunulan kullanıcı arayüzü üzerinde hareket etmesini sağlarlar. Yardımcı teknolojinin sunduğu API'yi kullanarak "tıklama", kaydırma veya sayfadaki değerleri değiştirme gibi işlemlere izin vermek için bu tür işlemleri Geliştirici Araçları'nda sunabiliriz.