Ekran okuyucu gibi yardımcı teknolojilerin kullanıcılara neleri duyuracağını nasıl bildiğini hiç merak ettiniz mi? Bunun nedeni, bu teknolojilerin geliştiricilerin sayfalarını semantik HTML ile işaretlemesine bağlı olmasıdır. Peki semantik nedir ve ekran okuyucular bunları nasıl kullanır?
Kullanım olanakları ve anlambilim
Anlambilim konusuna girmeden önce kullanım olanakları terimini anlamanız faydalı olacaktır. Kullanıma sunma, kullanıcısına bir işlem gerçekleştirme fırsatı sunan veya sağlayan herhangi bir nesnedir. Klasik bir örnek olarak çaydanlığı verebiliriz:
Bu çaydanlığın kullanım kılavuzuna ihtiyacı yoktur. Bunun yerine, fiziksel tasarımı kullanıcıya nasıl kullanılacağını anlatır. Sapı olan bu nesneyi, dünyada benzer saplara sahip başka nesneler gördüğünüz için nasıl kaldıracağınızı ve kullanacağınızı anlayabilirsiniz.
Grafik kullanıcı arayüzleri oluştururken kullanıcı arayüzüne görsel kolaylıklar eklemek için CSS gibi öğeleri kullanırız. Örneğin, bir düğmeye gerçek dünyadaki düğmelere benzemesi için gölge ve kenar verebilirsiniz.
Ancak kullanıcı ekranı göremiyorsa bu görsel kolaylıklar ona aktarılmaz. Bu nedenle, kullanıcı arayüzünüzün yardımcı teknolojilere aynı kolaylıkları sunacak şekilde tasarlandığından emin olmanız gerekir. Kullanıcı arayüzü öğesinin olanaklarının görsel olmayan şekilde gösterilmesine anlam bilgisi denir.
Semantik HTML kullanın
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ı sunacak şekilde biçimlendirmek mümkündür ancak ekran okuyucu kullanıldığında bu iki deneyim çok farklıdır.
<div> yalnızca genel bir gruplandırma öğesidir. Bu nedenle, ekran okuyucular yalnızca <div> öğesinin metin içeriğini duyurur.
<button>, "düğme" olarak duyurulur. Bu, kullanıcıya etkileşimde bulunabileceği bir öğeyle karşı karşıya olduğu konusunda çok daha güçlü bir sinyal verir.
Bu sorunun en basit ve genellikle en iyi çözümü, özel etkileşimli kontrollerden tamamen kaçınmaktır.
Örneğin, düğme gibi davranan bir <div> öğesini gerçek bir <button> öğesiyle değiştirin.
Anlamsal mülkler ve erişilebilirlik ağacı
Genel olarak her HTML öğesinde aşağıdaki anlamsal özelliklerden bazıları bulunur:
- Rol veya tür
- Ad
- Bir değer (isteğe bağlı)
- Eyalet (isteğe bağlı)
Bir öğenin rolü, türünü tanımlar. Örneğin, div ve span öğeleri gibi öğeler için "düğme", "giriş" veya hatta "grup" olabilir.
Bir öğenin adı, hesaplanan etiketidir. Ekran okuyucular genellikle bir öğenin adını ve ardından rolünü (ör. "Kaydol, düğme") okur. Bir öğenin adını belirleyen algoritma, öğenin içinde metin içeriği olup olmadığı, title veya placeholder gibi özelliklerinin olup olmadığı, öğenin gerçek bir <label> öğesiyle ilişkili olup olmadığı ve öğenin aria-label ve aria-labelledby gibi ARIA özelliklerine sahip olup olmadığı gibi faktörleri dikkate alır.
Bazı öğeler değere sahip olabilir. Örneğin, <input type="text">, kullanıcının metin alanına yazdığı metni yansıtan bir değere sahip olabilir.
Bazı öğelerin mevcut durumlarını belirten bir durumu da olabilir.
Örneğin, <select> öğesi açık veya kapalı olmasına bağlı olarak genişletilmiş ya da daraltılmış durumda olabilir.
Erişilebilirlik ağacı
Tarayıcı, DOM'daki her 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ı izleyerek bunu yapar.
Chrome'un Geliştirici Araçları'nı kullanarak bir öğenin anlamsal özelliklerini inceleyebilir ve erişilebilirlik ağacındaki konumunu keşfedebilirsiniz.
Sonraki adımlar
Anlambilim ve ekran okuyucu gezinmesine nasıl yardımcı oldukları 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 sayfanın ana hatlarının tamamının etkili başlıklar ve yer işaretleri kullanılarak nasıl aktarılabileceğini ele alacağız.