Ekran okuyucu gibi yardımcı teknolojilerin kullanıcılara ne duyuracağını nasıl bildiğini hiç merak ettiniz mi? Bu teknolojiler, geliştiricilerin sayfalarını semantik HTML ile işaretlemesine bağlıdır. Peki semantik nedir ve ekran okuyucular bunları nasıl kullanır?
Affordances ve semantik
Semantiğe geçmeden önce, olanakları anlamak faydalı olur. Affordance, kullanıcısına bir işlem yapma fırsatı sunan herhangi bir nesnedir. Klasik bir örnek olarak çaydanlığı ele alalım:
Bu çaydanlık için kullanım kılavuzu gerekmiyor. Bunun yerine, fiziksel tasarımı kullanıcıya nasıl çalıştırılması gerektiğini gösterir. Bu nesnenin bir sapı var ve dünyada benzer saplara sahip başka nesneler gördüğünüz için bu nesneyi nasıl alıp kullanacağınızı tahmin edebilirsiniz.
Grafik kullanıcı arayüzleri oluştururken arayüzümüze görsel imkanlar eklemek için CSS kullanırız. Örneğin, bir düğmeye gerçek dünyadaki bir düğmeye benzemesi için gölge ve kenarlık ekleyebilirsiniz.
Ancak ekranı göremeyen kullanıcılara bu görsel ipuçları iletilmez. Bu nedenle, arayüzünüzün bu aynı olanakları yardımcı teknolojiye aktarabilecek şekilde oluşturulduğundan emin olmanız gerekir. Bir kullanıcı arayüzü öğesinin etkileşim olanaklarının bu şekilde görsel olmayan bir şekilde gösterilmesine anlam adı verilir.
Semantik HTML yazma
Doğru semantiği aktarmanın en kolay yolu, semantik olarak zengin HTML öğeleri kullanmaktır.
CSS kullanarak <div> ve <button> öğelerini aynı görsel olanakları sağlayacak şekilde stilize etmek mümkündür ancak ekran okuyucu kullanırken iki deneyim çok farklıdır. <div> yalnızca genel bir gruplandırma öğesidir. Bu nedenle, ekran okuyucu yalnızca <div> öğesinin metin içeriğini duyurur.
<button>, "düğme" olarak duyurulur. Bu, kullanıcıya etkileşimde bulunabileceği bir öğe olduğu konusunda çok daha güçlü bir sinyal verir.
Bu sorunun en iyi çözümü genellikle özel etkileşimli kontrollerden tamamen kaçınmaktır. Örneğin, düğme gibi davranan bir <div> karakterini gerçek bir <button> ile değiştirin.
Anlamsal özellikler ve erişilebilirlik ağacı
Genel olarak, her HTML öğesi aşağıdaki semantik özelliklerden bazılarına sahiptir:
- Rol veya tür
- Ad
- Değer (isteğe bağlı)
- Eyalet (isteğe bağlı)
Bir öğenin rolü, türünü açıklar. Örneğin, "button" (düğme), "input" (giriş) veya div ve span gibi öğeler için yalnızca "group" (grup) olabilir.
Bir öğenin adı, hesaplanan etiketidir. Ekran okuyucular genellikle bir öğenin adını ve ardından rolünü (ör. "Kaydol, düğme") seslendirir. Bir öğenin adını belirleyen algoritma; öğenin içinde metin içeriği olup olmadığını, title veya placeholder gibi özelliklere sahip olup olmadığını, öğenin gerçek bir <label> öğesiyle ilişkili olup olmadığını ve öğenin aria-label ile aria-labelledby gibi ARIA özelliklerine sahip olup olmadığını dikkate alır.
Bazı öğeler değer içerebilir. Örneğin, <input type="text">, kullanıcının metin alanına yazdığı değeri yansıtan bir değere sahip olabilir.
Bazı öğelerin mevcut durumunu gösteren bir durumu da olabilir.
Örneğin, bir <select> öğesi açık veya kapalı olmasına bağlı olarak genişletilmiş veya daraltılmış durumda olabilir.
Erişilebilirlik ağacı
Tarayıcı, DOM'daki her düğüm için düğümün anlamsal olarak "ilginç" olup olmadığını belirler ve düğümü erişilebilirlik ağacına ekler. Ekran okuyucu gibi yardımcı teknolojiler, kullanıcıya alternatif bir kullanıcı arayüzü sunarken genellikle bu erişilebilirlik ağacını takip eder.
Chrome Geliştirici Araçları ile bir öğenin anlamsal özelliklerini inceleyebilir ve erişilebilirlik ağacındaki konumunu keşfedebilirsiniz.
Sonraki adımlar
Anlambilim ve ekran okuyucu navigasyonuna nasıl yardımcı olduğu hakkında biraz bilgi edindikten sonra oluşturduğunuz sayfalara farklı bir gözle bakmaya başlarsınız. Bir sonraki bölümde, bir adım geri giderek bir sayfanın tüm ana hatlarının etkili başlıklar ve işaretler kullanılarak nasıl aktarılabileceğini ele alacağız.