Erişilebilirlik Ağacı

Erişilebilirlik Ağacı'na Giriş

Alice Boxhall

Dave Gash

Meggin Kearney

Yalnızca ekran okuyucu kullanıcıları için bir kullanıcı arayüzü oluşturduğunuzu hayal edin. Burada herhangi bir görsel kullanıcı arayüzü oluşturmanız gerekmez. Ekran okuyucunun kullanabileceği yeterli bilgiyi sağlamanız yeterlidir.

DOM API'ye benzer şekilde, sayfa yapısını açıklayan bir tür API oluşturursunuz. Ancak bu bilgilerin çoğu yalnızca görsel sunum için yararlı olduğundan daha az bilgi ve daha az düğümle idare edebilirsiniz. Bu, aşağıdaki gibi görünebilir.

Bu, temel olarak tarayıcının ekran okuyucuya sunduğu şeydir. Tarayıcı, DOM ağacını alır ve yardımcı teknoloji için yararlı bir forma dönüştürür. Bu değiştirilmiş ağaç Erişilebilirlik Ağacı olarak adlandırılmaktadır.

Erişilebilirlik ağacını, 90'lardaki eski bir web sayfasına benzetebilirsiniz: birkaç resim, çok sayıda bağlantı, belki bir alan ve bir düğme.

Bu örnekteki gibi bir sayfayı görsel olarak aşağı doğru taramak, ekran okuyucu kullanıcısının elde edeceği deneyime benzer bir deneyim sunar. Arayüz mevcuttur ancak erişilebilirlik ağacı arayüzüne benzer şekilde basit ve doğrudandır.

Erişilebilirlik ağacı, çoğu yardımcı teknolojinin etkileşimde bulunduğu öğedir. Akış şu şekildedir:

1. Bir uygulama (tarayıcı veya başka bir uygulama), kullanıcı arayüzünün anlamsal bir sürümünü API aracılığıyla yardımcı teknolojiye sunar.
2. Yardımcı teknoloji, kullanıcı için alternatif bir kullanıcı arayüzü sunumu oluşturmak amacıyla API aracılığıyla okuduğu bilgileri kullanabilir. Örneğin, bir ekran okuyucu, kullanıcının uygulamadaki sözlü temsili duyduğu bir arayüz oluşturur.
3. Yardımcı teknoloji, kullanıcının uygulamayla farklı bir şekilde etkileşimde bulunmasına da imkan verebilir. Örneğin, çoğu ekran okuyucu, kullanıcının fare tıklamasını veya parmakla dokunmayı kolayca simüle etmesini sağlayan kancalar sağlar.
4. Yardımcı teknoloji, kullanıcı amacını ("tıkla" gibi) erişilebilirlik API'si aracılığıyla uygulamaya geri iletir. Ardından, uygulamanın bu işlemi orijinal kullanıcı arayüzü bağlamında uygun şekilde yorumlaması gerekir.

Web tarayıcıları için her yönde ekstra bir adım vardır. Çünkü tarayıcı aslında içinde çalışan web uygulamalarına yönelik bir platformdur. Bu nedenle, tarayıcının web uygulamasını bir erişilebilirlik ağacına çevirmesi ve yardımcı teknolojiden gelen kullanıcı işlemlerine göre JavaScript'te uygun etkinliklerin tetiklendiğinden emin olması gerekir.

Ancak bu, tarayıcının sorumluluğundadır. Web geliştiricileri olarak işimiz, bu sürecin farkında olmak ve kullanıcılarımız için erişilebilir bir deneyim oluşturmak amacıyla bu süreçten yararlanan web sayfaları geliştirmektir.

Bunu, sayfalarımızın anlamlarını doğru şekilde ifade ederek yaparız: Sayfadaki önemli öğelerin erişilebilir rollere, durumlara ve özelliklere sahip olduğundan ve erişilebilir adlar ile açıklamalar belirttiğimizden emin oluruz. Tarayıcı, özelleştirilmiş bir deneyim oluşturmak için yardımcı teknolojinin bu bilgilere erişmesine izin verebilir.

Yerel HTML'de anlam bilimi

DOM'un büyük bir kısmı örtülü anlamsal anlama sahip olduğundan tarayıcılar DOM ağacını erişilebilirlik ağacına dönüştürebilir. Yani DOM, tarayıcılar tarafından tanınan ve çeşitli platformlarda öngörülebilir şekilde çalışan yerel HTML öğeleri kullanır. Bağlantılar veya düğmeler gibi yerel HTML öğelerinin erişilebilirlik özellikleri otomatik olarak işlenir. Sayfa öğelerimizin anlamlarını ifade eden HTML yazarak bu yerleşik erişilebilirlikten yararlanabiliriz.

Ancak bazen yerel öğelere benzeyen ancak yerel olmayan öğeler kullanırız. Örneğin, bu "düğme" aslında düğme değildir.

HTML'de birçok şekilde oluşturulabilir. Aşağıda bir yöntem gösterilmektedir.

<div class="button-ish">Give me tacos</div>

Gerçek bir düğme öğesi kullanmadığımızda ekran okuyucunun hangi öğeye ulaştığını bilmesi mümkün değildir. Ayrıca, kod şu anda yalnızca fare ile kullanılabildiğinden, yalnızca klavye kullanan kullanıcılar tarafından da kullanılabilmesi için tabindex ekleme konusunda ekstra çalışma yapmamız gerekiyor.

div yerine normal bir button öğesi kullanarak bunu kolayca düzeltebiliriz. Yerel öğe kullanmak, klavye etkileşimlerinin bizim için işlenmesini sağlama avantajına da sahiptir. Yerel öğe kullandığınızda şık görsel efektlerinizi kaybetmeniz gerekmez. Yerel öğeleri istediğiniz gibi görünecek şekilde biçimlendirebilir, ancak yine de gizli anlamları ve davranışları koruyabilirsiniz.

Daha önce ekran okuyucuların bir öğenin rolünü, adını, durumunu ve değerini duyurduğunu belirtmiştik. Doğru semantik öğeyi kullanarak rol, durum ve değer ele alınır ancak öğenin adını bulunabilir hale getirdiğimizden de emin olmalıyız.

Genel olarak iki tür ad vardır:

• Tüm kullanıcılar tarafından bir öğeyle anlamı ilişkilendirmek için kullanılan görünür etiketler ve
• Metin alternatifleri: Yalnızca görsel etikete gerek olmadığında kullanılır.

Metin düzeyindeki öğeler için herhangi bir işlem yapmamız gerekmez. Çünkü bu öğeler, tanımı gereği bazı metin içeriklerine sahiptir. Ancak, giriş veya kontrol öğeleri ve resim gibi görsel içerikler için bir ad belirttiğimizden emin olmamız gerekir. Aslında, metin olmayan herhangi bir içerik için metin alternatifleri sağlamak WebAIM kontrol listesindeki ilk öğedir.

Bunu yapmanın bir yolu, "Form girişlerinin ilişkili metin etiketleri olması" önerisini uygulamaktır. Bir etiketi onay kutusu gibi bir form öğesiyle ilişkilendirmenin iki yolu vardır. Bu yöntemlerden herhangi biri, etiket metninin onay kutusunun tıklama hedefi olmasına da neden olur. Bu, fare veya dokunmatik ekran kullanıcıları için de faydalıdır. Bir etiketi bir öğeyle ilişkilendirmek için:

• Giriş öğesini bir etiket öğesinin içine yerleştirin

<label>
    <input type="checkbox">Receive promotional offers?
</label>

veya

• Etiketin for özelliğini kullanın ve öğenin id özelliğine referans verin

<input id="promo" type="checkbox">
<label for="promo">Receive promotional offers?</label>

Onay kutusu doğru şekilde etiketlendiğinde ekran okuyucu, öğenin onay kutusu rolüne sahip olduğunu, işaretli durumda olduğunu ve "Tanıtım teklifleri almak istiyor musunuz?" olarak adlandırıldığını bildirebilir.