Erişilebilirlik Ağacı

Erişilebilirlik Ağacı'na Giriş

Alice Boxhall
Alice Boxhall
Dave Gash
Dave Gash
Meggin Kearney
Meggin Kearney

Yalnızca ekran okuyucu kullanıcıları için bir kullanıcı arayüzü oluşturduğunuzu düşünün. Burada herhangi bir görsel kullanıcı arayüzü oluşturmanız gerekmez, ancak ekran okuyucunun kullanması için yeterli bilgi sağlamanız yeterlidir.

Sayfa yapısını açıklayan bir API türü oluşturursunuz. Bu API, DOM API'sine benzer, ancak daha az bilgiyle ve daha az düğümle işlem yapabilirsiniz. Çünkü bu bilgilerin çoğu, yalnızca görsel sunum için yararlıdır. Şöyle bir şey olabilir.

Ekran okuyucu DOM API'si modeli

Tarayıcının ekran okuyucuya sunduğu asıl içerik budur. Tarayıcı, DOM ağacını alır ve bunu yardımcı teknoloji için faydalı bir biçime dönüştürür. Bu değiştirilmiş ağa Erişilebilirlik Ağacı diyoruz.

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

1990'lar tarzında bir web sayfası

Böyle bir durumda bir sayfayı görsel olarak taramak size bir ekran okuyucu kullanıcısına benzer bir deneyim sağlar. Arayüz mevcut, ancak erişilebilirlik ağacı arayüzüne benzer şekilde basit ve dolaysız.

Erişilebilirlik ağacı, çoğu yardımcı teknolojinin etkileşime girdiği ağdır. Bu akış böyle bir şekilde ilerliyor.

  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, API aracılığıyla okuduğu bilgileri kullanıcıya alternatif bir kullanıcı arayüzü sunumu oluşturmak amacıyla kullanabilir. Örneğin, bir ekran okuyucu, kullanıcının uygulamanın sözlü bir temsilini duyduğu bir arayüz oluşturur.
  3. Yardımcı teknoloji, kullanıcının uygulamayla farklı bir şekilde etkileşim kurmasına da olanak tanıyabilir. Ö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, erişilebilirlik API'si aracılığıyla kullanıcının amacını (ör. "tıklama") uygulamaya geri aktarır. Uygulama daha sonra eylemi orijinal kullanıcı arayüzü bağlamında uygun şekilde yorumlama sorumluluğuna sahiptir.

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ı için 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 dayalı olarak JavaScript'te uygun etkinliklerin etkinleştiğinden emin olması gerekir.

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

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

Yerel HTML'de anlambilim

DOM'un büyük bir kısmının dolaylı semantik anlamı olduğu için tarayıcılar, DOM ağacını bir erişilebilirlik ağacına dönüştürebilir. Yani DOM, tarayıcılar tarafından tanınan ve çeşitli platformlarda tahmin edilebilir şekilde çalışan yerel HTML öğeleri kullanır. Bağlantılar veya düğmeler gibi yerel HTML öğelerinin erişilebilirlik özelliği otomatik olarak işlenir. Sayfa öğelerinizin anlamını ifade eden HTML yazarak bu yerleşik erişilebilirlik özelliğinden yararlanabiliriz.

Bununla birlikte, bazen yerel öğelere benzeyen ancak doğal olmayan öğeler kullanırız. Örneğin, bu "düğme" bir düğme değildir.

Bana tako ver

HTML'de çeşitli şekillerde oluşturulabilir; bunlardan biri aşağıda gösterilmiştir.

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

Gerçek bir düğme öğesini kullanmadığımızda, ekran okuyucunun bu düğmenin neyle sonuçlandığını bilmesi mümkün olmaz. Ayrıca, şu anda kodlandığı gibi yalnızca fare ile kullanılabildiğinden tabindex'i yalnızca klavye kullanan kullanıcılar için kullanılabilir hale getirmek için tabindex ekleme işlemini yapmamız gerekir.

div yerine normal bir button öğesi kullanarak bunu kolayca düzeltebiliriz. Yerel bir öğenin kullanılması, klavye etkileşimleri ile ilgilenme avantajı da sağlar. Yalnızca yerel bir öğe kullandığınız için gösterişli görsel efektlerinizi kaybetmek zorunda olmadığınızı unutmayın. Yerel öğelerin istediğiniz gibi görünmesini sağlamak için stil uygulayabilir ve örtülü anlamı ve davranışı koruyabilirsiniz.

Daha önce ekran okuyucuların bir öğenin rolünü, adını, durumunu ve değerini duyuracağını belirtmiştik. Doğru anlamsal öğe kullanıldığında rol, durum ve değerin tamamı kapsanır, ancak bir öğenin adını bulunabilir yaptığımızdan da emin olmamız gerekir.

Genel olarak iki tür ad vardır:

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

Metin düzeyindeki öğeler tanımı gereği bir miktar metin içeriğine sahip olacağından, herhangi bir şey yapmamız gerekmez. Ancak giriş veya kontrol öğeleri ve resimler gibi görsel içerikler için bir ad belirttiğimizden emin olmamız gerekir. Aslında, metin dışındaki içerikler için metin alternatifleri sağlamak WebAIM kontrol listesindeki ilk maddedir.

Bunu yapmanın yollarından biri, "Form girişlerinde ilişkili metin etiketleri vardır" önerisini uygulamaktır. Bir etiketi, onay kutusu gibi bir form öğesiyle ilişkilendirmenin iki yolu vardır. Yöntemlerin her ikisi de etiket metninin de onay kutusu için bir tıklama hedefi haline gelmesine neden olur. Bu, fare veya dokunmatik ekran kullanıcıları için de yararlı olur. Bir öğeyi bir öğeyle ilişkilendirmek için:

  • Giriş öğesini bir etiket öğesinin içine yerleştirme
<label>
    <input type="checkbox">Receive promotional offers?
</label>

veya

  • Etiketin for özelliğini kullanın ve öğenin id özelliğine bakın
<input id="promo" type="checkbox">
<label for="promo">Receive promotional offers?</label>

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

Bir onay kutusu için sözlü etiketi gösteren VoiceOver&#39;dan ekrandaki metin çıkışı