Ekran okuyucular gibi yardımcı teknolojilerin kullanıcılara neyin duyurulacağını nasıl bildiklerini hiç merak ettiniz mi? Cevap, bu teknolojilerin geliştiricilerin sayfalarını anlamsal HTML ile işaretlemelerine dayanmasıdır. Peki anlambilim nedir ve ekran okuyucular bunları nasıl kullanır?
Fırsatlar ve anlamlar
Anlamlara geçmeden önce, başka bir terimi anlamak faydalı olacaktır: affordances. Bir amaca uygunluk, kullanıcısına bir işlem gerçekleştirme fırsatı sunan veya sağlayan herhangi bir nesnedir. Klasik bir örnek olarak çaydanlık verilebilir:
Bu çaydanlık için kullanım kılavuzu gerekmez. Fiziksel tasarımı, kullanıcıya nasıl kullanılması gerektiğini söyler. Bu tutma yerinin tutma yeri vardır ve gördüğünüz yerlerde benzer tutma yerlerine sahip başka nesneler de görmüşsünüzdür.
Grafik kullanıcı arayüzleri oluştururken, kullanıcı arayüzümüze görsel olanaklar eklemek için CSS gibi öğeler kullanırız. Örneğin, bir düğmeye gölge ve kenarlık ekleyerek gerçek dünyadaki asıl bir düğmeye benzemesini sağlayabilirsiniz.
Ancak kullanıcı ekranı göremiyorsa bu görsel olanaklar kullanıcıya iletilmez. Bu nedenle, kullanıcı arayüzünüzün, yardımcı teknolojiye de bu olanakları iletebilecek şekilde tasarlandığından emin olmalısınız. Bir kullanıcı arayüzü öğesinin olanaklarının görsel olmayan bu şekilde gösterilmesi, anlamsal olarak adlandırılır.
Anlamsal HTML kullanma
Uygun anlamları iletmenin en kolay yolu, anlam açısından zengin HTML öğeleri kullanmaktır.
CSS kullanılarak <div> ve <button> öğeleri, aynı görsel olanakları iletecek şekilde biçimlendirilebilir ancak ekran okuyucu kullanılırken iki deneyim çok farklıdır.
<div> yalnızca genel bir gruplandırma öğesidir. Dolayısıyla, ekran okuyucu yalnızca <div> öğesinin metin içeriğini bildirir.
<button> bir "düğme" olarak duyurulur. Bu, kullanıcıya etkileşimde bulunabilecekleri bir şey
olduğuna dair çok daha güçlü bir sinyaldir.
Bu sorunun en basit ve genellikle en iyi çözümü, özel etkileşimli kontrollerden tamamen kaçınmaktır.
Örneğin, düğme gibi çalışan bir <div> öğesini gerçek bir <button> ile değiştirin.
Semantik özellikler ve erişilebilirlik ağacı
Genel olarak her HTML öğesi aşağıdaki anlamsal özelliklerden bazılarına sahiptir:
- Rol veya tür
- Ad
- Value (değer) (isteğe bağlı)
- state (isteğe bağlı)
Bir öğenin rolü, türünü açıklar. Örneğin, div ve span öğeleri için "düğme", "giriş", hatta yalnızca "grup".
Bir öğenin adı, hesaplanan etiketidir. Ekran okuyucular genellikle bir öğenin adını
ve ardından rolünü söyler. Örneğin, "Kaydol, düğme". Bir öğenin adını belirleyen algoritma; öğenin içinde metin içeriğinin olup olmadığı, öğenin title veya placeholder gibi özelliklere sahip olup olmadığı, öğenin gerçek bir <label> öğesiyle ilişkili olup olmadığı ve öğenin aria-label ve aria-labelledby gibi ARIA özelliklerinin olup olmadığı gibi unsurları dikkate alır.
Bazı öğelerin değer olabilir. Örneğin <input type="text">, kullanıcının metin alanına yazdıklarını yansıtan bir değere sahip olabilir.
Bazı öğelerde, geçerli durumlarını ileten bir state olabilir.
Örneğin, bir <select> öğesi açık veya kapalı olmasına bağlı olarak genişletilmiş ya da daraltılmış durumda olabilir.
Erişilebilirlik ağacı
DOM'daki her düğüm için tarayıcı, düğümün anlamsal olarak "ilginç" olup olmadığını belirler ve bunu erişilebilirlik ağacına ekler. Ekran okuyucu gibi yardımcı teknolojiler kullanıcıya alternatif bir kullanıcı arayüzü sağladığında bunu genellikle bu erişilebilirlik ağacında yürüterek yapar.
Chrome'un Geliştirici Araçları'nı kullanarak bir öğenin semantik özelliklerini inceleyebilir ve erişilebilirlik ağacındaki konumunu keşfedebilirsiniz.
Sonraki adımlar
Anlamlar ve bunların ekran okuyucuda gezinmeye nasıl yardımcı oldukları hakkında biraz bilgi sahibi olduğunuzda, farklı oluşturduğunuz sayfalara bakmaktan kaçınamazsınız. Bir sonraki bölümde, bir adım geriye gidip bir sayfanın tüm ana hatlarının etkili başlıklar ve önemli noktalar kullanılarak nasıl işlenebileceğini değerlendireceğiz.