Erişilebilirlik Ağacı'na Giriş
Yalnızca ekran okuyucu kullanıcılarına yönelik bir kullanıcı arayüzü oluşturduğunuzu hayal edin. Burada, görsel kullanıcı arayüzü oluşturmanız gerekmez. Kullanıcı arayüzü bilgi sahibi olmanız gerekir.
Sayfa yapısını açıklayan bir tür API, DOM API'ye geri yükleyebilirsiniz, ancak daha az bilgi ve daha az düğümle çünkü bu bilgilerin çoğu yalnızca görsel sunum için yararlıdır. Google aşağıdaki gibi görünebilir.
Tarayıcı, temel olarak ekran okuyucuya gösterileni gösterir. İlgili içeriği oluşturmak için kullanılan DOM ağacını alır ve bunu, yardımcı teknolojiler. Bu değiştirilmiş ağaç, Erişilebilirlik Ağaç.
Erişilebilirlik ağacını eski bir web sayfası gibi bakın: birkaç resim, çok sayıda bağlantı, belki bir alan ve bir düğme.
Böyle bir sayfayı görsel olarak taramak size şuna benzer bir deneyim sunar: neler kazanacağını gösterdi. Orada arayüz var ama sade erişilebilirlik ağacı arayüzüne benzer.
Erişilebilirlik ağacı, yardımcı teknolojilerin çoğuyla etkileşim kurduğu bir alandır. İlgili içeriği oluşturmak için kullanılan şöyle bir şey olur.
- Bir uygulama (tarayıcı veya başka bir uygulama), kendi API aracılığıyla yardımcı teknolojiye kullanıcı arayüzü.
- Yardımcı teknoloji, API üzerinden okuduğu bilgileri kullanarak kullanıcı için alternatif bir kullanıcı arayüzü sunusu oluşturabilirsiniz. Örneğin, Ekran okuyucu, kullanıcının bire bir konuşulanları duyduğu bir arayüz oluşturur temsil eder.
- Yardımcı teknoloji, kullanıcının şurada uygulamayla etkileşimde bulunmasına da olanak tanıyabilir: sağlayabilir. Örneğin, çoğu ekran okuyucu, bir bilgisayardaki bir fare tıklamasını veya parmakla dokunmayı kolayca simüle etmesini sağlar.
- Yardımcı teknoloji, kullanıcının amacını (ör. "tıklama") erişilebilirlik API'si ile uygulamayı öğreteceğim. Uygulama, daha sonra işlemi orijinal kullanıcı arayüzü bağlamında uygun bir şekilde yorumlamalıdır.
Web tarayıcıları için her yönde fazladan bir adım vardır, 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 çevirmeli ve gelen kullanıcı işlemlerine dayalı olarak JavaScript'te uygun etkinliklerin tetiklenmesi çok yardımcı oldu.
Ancak bu, tarayıcının tüm sorumluluğudur. Web geliştiricileri olarak işimiz web sayfaları geliştirirken bu durumun yaşandığının farkında olmak ve oluşturarak kullanıcılarımız için erişilebilir bir deneyim yaratmak.
Bunun için sayfalarımızın semantiğini doğru bir şekilde ifade etmemiz gerekir: sayfadaki önemli öğelerin doğru şekilde erişilebilir olduğundan emin olmak ve erişilebilir adları ve özellikleri belirtmemiz, açıklamaları. Ardından tarayıcı, yardımcı teknolojinin bilgileri nasıl kullanacağınızı öğreneceksiniz.
Yerel HTML'de anlamsal
Tarayıcı, DOM ağacını bir erişilebilirlik ağacına dönüştürebilir, çünkü DOM'nin dolaylı semantik anlamı vardır. Yani DOM, yerel HTML kullanır bu öğeler, tarayıcılar tarafından tanınan ve çeşitli cihazlarda tahmin edilebilir şekilde çalışan platformlar. Bağlantılar veya düğmeler gibi yerel HTML öğeleri için erişilebilirlik otomatik olarak işlenir. Bu yerleşik erişilebilirlik özelliğinden anlamlarını ifade eden HTML kodu yazarak işe yarar.
Bununla birlikte, bazen yerel öğeler gibi görünen ancak olmayan öğeler kullanırız. Örneğin, bu "düğme" hiç düğme değildir.
HTML'de çeşitli şekillerde oluşturulabilir; bir yol 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 bunu bilmesi mümkün olmaz. tam olarak anlamışsınızdır. Ayrıca, yeni bir sorguya dizin eklemek için fazladan tabindex'e ekleyin yalnızca klavye kullanıcıları tarafından kullanılabilir, çünkü şu anda kodlandığı için daha iyi hale getirir.
div yerine normal bir button öğesi kullanarak bunu kolayca düzeltebiliriz.
Yerel öğe kullanmak, klavyeyle ilgilenme avantajı da sağlar.
bizim için önemli. Ayrıca dikkat çekici görsellerinizi kaybetmek zorunda olmadığınızı unutmayın.
yalnızca doğal bir öğe kullandığınız için doğal öğeleri aşağıdaki gibi
istediğiniz gibi görünmelerini sağlayabilir ve gizli anlamlara ve
gösterir.
Daha önce ekran okuyucuların bir öğenin rolünü, adını, durum ve değer. Doğru anlamsal öğeyi, rolü, durumu ve değeri kullanarak ancak bir öğenin adını verdiğimizden de emin olmamız gerekir. bulunabilir.
Genel olarak iki tür ad vardır:
- Görünür etiketler, herhangi bir kullanıcının anlamını bir öğeyle ilişkilendirmek için öğesi ve
- Metin alternatifleri: Bunlar yalnızca görsel bir öğeye gerek olmadığında kullanılır etiket.
Metin düzeyindeki öğeler için, tanımları gereği herhangi bir işlem yapmamız gerekmez. biraz metin içeriği olur. Ancak giriş veya kontrol öğeleri ve görsel bir ad belirtmemiz gerekir. Hatta, metin dışı içerik için metin alternatifleri sunmak çünkü webAIM kontrol listesindeki ilk öğeye bakın.
Bunu yapmanın bir yolu da girin." Etiketi formla ilişkilendirmenin iki yolu vardır öğesi (örneğin, onay kutusu gibi). Bu yöntemlerden herhangi biri, etiket metninin onay kutusu için bir tıklama hedefi haline gelir. Bu, fare veya Okuyucu Gelirleri Yöneticisi'ni tıklayın. 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 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 olması, işaretli durumda olması ve "al" olarak adlandırılmış olması promosyon tekliflerinden bahsedin.
