Erişilebilirlik ağacına giriş
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. Ekran okuyucunun kullanması için yeterli bilgi sağlamanız yeterlidir.
Oluşturacağınız şey, DOM API'ye benzer şekilde sayfa yapısını açıklayan bir tür API'dir. Ancak bu bilgilerin çoğu yalnızca görsel sunum için yararlı olduğundan daha az bilgi ve daha az düğümle işinizi görebilirsiniz. Şöyle bir şey olabilir.
Bu, tarayıcının ekran okuyucuya sunduğu şeydir. Tarayıcı, DOM ağacını alır ve yardımcı teknolojiler için kullanışlı bir biçime dönüştürür. Bu değiştirilmiş ağaca erişilebilirlik ağacı denir.
Erişilebilirlik ağacını, 90 'lı yıllardan kalma eski bir web sayfasına benzetebilirsiniz: birkaç resim, çok sayıda bağlantı, belki bir alan ve bir düğme.
Bu örnekte olduğu gibi bir sayfayı görsel olarak taramak, ekran okuyucu kullanıcılarınınkine benzer bir deneyim yaşamanızı sağlar. Arayüz mevcut ancak erişilebilirlik ağacı arayüzü gibi basit ve doğrudan.
Erişilebilirlik ağacı, çoğu yardımcı teknolojinin etkileşimde bulunduğu yerdir. Akış şu şekilde ilerler.
- 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.
- Yardımcı teknoloji, API aracılığıyla okuduğu bilgileri kullanarak kullanıcı için alternatif bir kullanıcı arayüzü sunumu oluşturabilir. Örneğin, ekran okuyucu, kullanıcının uygulamanın sesli bir temsilini duyduğu bir arayüz oluşturur.
- 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 etmesine olanak tanıyan kancalar sağlar.
- Yardımcı teknoloji, kullanıcı niyetini (ör. "tıklama") Accessibility API aracılığıyla uygulamaya geri iletir. Ardından uygulama, işlemi orijinal kullanıcı arayüzü bağlamında uygun şekilde yorumlamakla yükümlüdür.
Web tarayıcıları için her iki yönde de ek 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 göre JavaScript'te uygun etkinliklerin tetiklendiğinden emin olması gerekir.
Ancak bu tamamen tarayıcının sorumluluğundadır. Web geliştiricileri olarak görevimiz, 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 anlamsal yapısını doğru şekilde ifade ederek yaparız: Sayfadaki önemli öğelerin doğru erişilebilir rollere, durumlara ve özelliklere sahip olduğundan ve erişilebilir özellikli adlar ile açıklamalar belirttiğimizden emin oluruz. Tarayıcı daha sonra yardımcı teknolojinin bu bilgilere erişmesine izin vererek özelleştirilmiş bir deneyim oluşturabilir.
Yerel HTML'de semantik
DOM'un büyük bir kısmı dolaylı anlamsal anlam taşıdığından, tarayıcı 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 öğelerini kullanır. Bağlantılar veya düğmeler gibi yerel HTML öğelerinin erişilebilirliği bu şekilde otomatik olarak işlenir. Sayfa öğelerimizin semantiğini 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 bir düğme değildir.
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 öğesi kullanmadığımızda ekran okuyucunun neye ulaştığını bilmesi mümkün değildir. Ayrıca, yalnızca klavye kullanan kullanıcılar için kullanılabilir hale getirmek amacıyla tabindex ekleme gibi ek bir iş yapmamız gerekir. Çünkü şu anki kodlamasıyla yalnızca fareyle kullanılabilir.
div yerine normal bir button öğesi kullanarak bu sorunu kolayca çözebiliriz.
Yerel bir öğe kullanmanın bir diğer avantajı da klavye etkileşimlerini bizim için halletmesidir. Yerel bir öğe kullandığınız için şık görsel efektlerinizi kaybetmeniz gerekmediğini unutmayın. Yerel öğeleri istediğiniz gibi görünecek şekilde biçimlendirebilir ve örtük semantiği ve davranışı koruyabilirsiniz.
Ekran okuyucuların bir öğenin rolünü, adını, durumunu ve değerini duyuracağını daha önce belirtmiştik. Doğru semantik öğeyi kullanarak rol, durum ve değer konularını ele almış olduk. Ancak öğenin adının da keşfedilebilir olmasını sağlamamız gerekir.
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
- Yalnızca görsel etikete ihtiyaç duyulmadığında kullanılan metin alternatifleri.
Metin düzeyindeki öğeler için bir şey yapmamız gerekmez çünkü tanım gereği bu öğelerde metin içeriği bulunur. 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 olmayan içerikler için metin alternatifleri sağlamak WebAIM kontrol listesindeki ilk maddedir.
Bunu yapmanın bir yolu, "Form girişlerinde ilişkili metin etiketleri var" ö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 kutusu için tıklama hedefi olmasını da sağlar. Bu da fare veya dokunmatik ekran kullanıcıları için 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 öğeninidö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 rolünün onay kutusu olduğunu, işaretli durumda olduğunu ve "Promosyon teklifleri almak istiyor musunuz?" şeklinde adlandırıldığını bildirebilir.
