Ekran gibi yardımcı teknolojilerin ne kadar yardımcı olduğunu merak ettiğiniz oldu mu hiç durdunuz mu? kullanıcılara ne duyuracağını biliyor mu? Bu teknolojiler şu anda geliştiricilerin, sayfalarını anlamsal HTML ile işaretlemesi gerekir. Peki, ve ekran okuyucular bunları nasıl kullanıyor?
Fiyatlar ve anlamlar
Anlamsal açıdan giriş yapmadan önce, başka bir terimi anlamanız yararlı olacaktır: satın alma işlemleri. Eşya, kullanıcılarına bir şeyler sunan veya bunu sağlayan bir nesne olarak bir eylemde bulunma fırsatı bulur. Klasik bir örnek de çaydanlıktır:
Bu çaydanlık için kullanım kılavuzu gerekmez. bunun yerine fiziksel tasarımı kullanıcıya nasıl kullanılması gerektiğini bildirir. Herkese açık kullanıcı adları kullanılır. dünyada benzer tutma yerlerine sahip başka nesneler gördünüz. Bu nesnelerin, Onu alıp çalıştırmalısınız.
Grafik kullanıcı arayüzleri oluştururken CSS gibi öğeleri kullanarak özellikleri kullanıcı arayüzüne ekleyeceğiz. Örneğin, düğmeye gölge verebilir, gerçek dünyadaki bir düğmeye benzeyecek şekilde tasarlar.
Ancak kullanıcı ekranı göremediğinde bu görsel olanaklar otomatik olarak oluşturulmaz. Bu nedenle, kullanıcı arayüzünüzün bu olanakları destekleyici müşterilere teknolojisidir. Bir kullanıcı arayüzü öğesinin olanaklarının görsel olmayan bu şekilde gösterilmesine denir. anlamını çözer.
Anlamsal HTML kullanma
Doğru anlamları iletmenin en kolay yolu, anlam açısından zengin HTML kullanmaktır öğeler.
CSS'yi kullanarak
<div> ve <button> öğelerini aynı görsel olanakları iletecek şekilde biçimlendirin.
ancak ekran okuyucu kullanırken iki deneyim çok farklıdır.
<div> genel bir gruplandırma öğesidir,
Bu nedenle, ekran okuyucular yalnızca <div> içindeki metin içeriğini duyurur.
<button>, "düğme" olarak duyurulur.
kullanıcıya bunun etkileşime girebileceği bir şey olduğuna dair çok daha güçlü bir sinyal verir.
En basit
bu soruna genellikle en iyi çözümdür.
özel etkileşimli denetimlerden tamamen uzak durmaktır.
Örneğin, düğme gibi görünen bir <div> değerini değiştirin
değeri gerçek bir <button> ile değiştirin.
Anlamsal özellikler ve erişilebilirlik ağacı
Genel olarak, her HTML öğesi aşağıdaki anlamlardan bazılarına sahiptir: özellikler:
- Bir rol veya tür
- Ad
- Değer (isteğe bağlı)
- Eyalet (isteğe bağlı)
Bir öğenin role, türünü açıklar (örneğin, "button), "giriş", veya sadece
"grup" div ve span gibi öğeler için kullanılır.
Bir öğenin adı, hesaplanan etiketidir. Ekran okuyucular genellikle
bir öğenin adı ve rolü, ör. "Kaydol, düğmesi." Algoritma
Bu bir öğenin adı, metin olup olmadığı gibi şeyleri hesaba katar
title gibi özelliklere sahip olup olmadığına bakılmaksızın, öğenin içindeki içerik
veya placeholder, öğenin gerçek bir
<label> öğesi ve öğenin
aria-label ve aria-labelledby.
Bazı öğelerin değeri olabilir. Örneğin <input type="text">
kullanıcının metin alanına yazdıklarını yansıtan bir değere sahip olmalıdır.
Bazı öğelerin, mevcut durumlarını belirten bir durumu da olabilir.
Örneğin, bir <select> öğesi expanded veya
daraltılmış duruma getirin.
Erişilebilirlik ağacı
DOM'deki her bir düğüm için tarayıcı, düğümün anlam açısından "ilginç" olması ve söz konusu özelliği erişilebilirliğe ağaç. Ekran okuyucu gibi yardımcı teknolojiler alternatif bir kullanıcı arayüzü sağladığında bunu genellikle bu erişilebilirlik ağacını yürüyerek yapar.
Chrome'un Geliştirici Araçları'nı kullanarak bir öğenin anlamını inceleyebilirsiniz. mülkler ve erişilebilirlik ağacındaki konumunu keşfedeceğiz.
Sonraki adımlar
Anlamlar ve bunların ekran okuyucu gezinmesine nasıl yardımcı olduğu hakkında biraz bilgi edindikten sonra, oluşturduğunuz sayfalara bakmayı ihmal etmeyin. Bir sonraki bölümde, şimdi bir adım geri gidip bir sayfanın tamamının ana hatlarının nasıl etkili başlıklar ve önemli noktalar kullanılarak aktarılır.