Anlambilim ve içerikte gezinme

Sayfada gezinmede anlamın rolü

Alice Boxhall

Dave Gash

Meggin Kearney

Uygunluklar, anlamlar ve yardımcı teknolojilerin, kullanıcıları için alternatif bir kullanıcı deneyimi oluşturmak üzere erişilebilirlik ağacını nasıl kullandığı hakkında bilgi edindiniz. Birçok standart öğede hem anlam hem de destekleyici davranış yerleşik olarak bulunduğu için, anlamlı, semantik HTML yazmanın çok az çabayla çok miktarda erişilebilirlik sağladığını görebilirsiniz.

Bu derste, özellikle gezinme konusunda, ekran okuyucu kullanıcıları için çok önemli olan daha az belirgin anlamlara değineceğiz. Çok sayıda denetim bulunan ancak fazla içerik bulunmayan basit bir sayfada, ihtiyacınız olanı bulmak için sayfayı kolayca tarayabilirsiniz. Ancak Wikipedia girişi veya haber toplayıcı gibi çok fazla içerik bulunan bir sayfada, her şeyi yukarıdan aşağıya doğru okumak pratik değildir; içerik arasında verimli bir şekilde gezinmenin bir yolunu bulmanız gerekir.

Geliştiriciler genellikle ekran okuyucuların sıkıcı ve yavaş kullanımı veya ekran okuyucunun bulması için ekrandaki her şeyin odaklanılabilir olması gerektiği gibi bir yanılgıya sahiptir. Böyle bir durum genellikle yaşanmaz.

Ekran okuyucu kullanıcıları, bilgileri bulmak için genellikle başlık listesinden yararlanır. Çoğu ekran okuyucu, rotor adı verilen önemli bir özellik olan sayfa başlıkları listesini ayırıp taramanın kolay yollarına sahiptir. Bu özelliği desteklemek için HTML başlıklarını nasıl etkili bir şekilde kullanabileceğimize bakalım.

Başlıkları etkili bir şekilde kullanma

İlk olarak, daha önceki bir noktayı tekrarlayalım: DOM sırası önemlidir. Bu durum yalnızca odaklanma sırası için değil, ekran okuyucu sırası için de geçerlidir. VoiceOver, NVDA, JAWS ve ChromeVox gibi ekran okuyucularla denemeler yaparken başlık listesinin, görsel sıralama yerine DOM sırasını takip ettiğini göreceksiniz.

Bu durum genel olarak ekran okuyucular için geçerlidir. Ekran okuyucular erişilebilirlik ağacıyla etkileşim kurduğu ve erişilebilirlik ağacı DOM ağacını temel aldığı için bir ekran okuyucunun algıladığı sıra doğrudan DOM sırasına dayanır. Bu, uygun bir başlık yapısının her zamankinden daha önemli olduğu anlamına gelir.

İyi yapılandırılmış çoğu sayfada başlık düzeyleri, içerik blokları arasında üst-alt ilişkilerini göstermek için iç içe yerleştirilmiştir. WebAIM kontrol listesi tekrar tekrar bu tekniğe atıfta bulunur.

• 1.3.1 "Başlıkları belirtmek için anlamsal işaretleme kullanılır"
• 2.4.1 İçerik bloklarını atlamak için kullanılan bir teknik olarak başlık yapısından bahsedilir
• 2.4.6 Faydalı başlıklar yazmayla ilgili bazı ayrıntıları açıklar
• 2.4.10 "uygun durumlarda, içeriğin her bir bölümü başlıklar kullanılarak belirlenir" ifadesini belirtir

Tüm başlıkların ekranda görünür olması gerekmez. Örneğin, Wikipedia, bazı başlıkları özellikle yalnızca ekran okuyucular ve diğer yardımcı teknolojiler tarafından erişilebilir hale getirmek için kasıtlı olarak ekran dışına yerleştiren bir teknik kullanır.

<style>
    .sr-only {
    position:absolute;
    left:-10000px;
    top:auto;
    width:1px;
    height:1px;
    overflow:hidden;
    }
</style>

<h2 class="sr-only">This heading is offscreen.</h2>

Karmaşık uygulamalarda bu, görsel tasarımın görünür bir başlık gerektirmediği veya yer kalması gerekmediğinde başlıkları yerleştirmek için iyi bir yol olabilir.

Diğer gezinme seçenekleri

Başlıkları iyi olan sayfalar, ekran okuyucu kullanıcılarının gezinmesine yardımcı olsa da bağlantılar, form kontrolleri ve önemli noktalar gibi bir sayfada gezinmek için kullanabilecekleri başka öğeler de vardır.

Okuyucular, sayfadaki bağlantı listesine erişmek için ekran okuyucunun rotor özelliğini (sayfa başlıkları listesini ayırıp taramanın kolay bir yoludur) kullanabilir. Bazen, wiki'de olduğu gibi birçok bağlantı olduğundan okuyucu, bağlantılar içinde bir terimi arayabilir. Bu, isabetleri, terimin sayfada geçtiği her yerde kullanmak yerine, terimi gerçekten içeren bağlantılarla sınırlandırır.

Bu özellik yalnızca ekran okuyucu bağlantıları bulabiliyorsa ve bağlantı metni anlamlıysa yararlıdır. Örneğin, bağlantıları bulmayı zorlaştıran bazı yaygın kalıpları burada bulabilirsiniz.

• href özellikleri olmayan bağlantı etiketleri. Genellikle tek sayfalık uygulamalarda kullanılan bu bağlantı hedefleri, ekran okuyucular için soruna neden olur. Tek sayfalık uygulamalarla ilgili bu makaleden daha fazla bilgi edinebilirsiniz.
• Bağlantılarla uygulanan düğmeler. Bunlar, ekran okuyucunun içeriği bir bağlantı olarak yorumlamasına neden olur ve düğme işlevi kaybolur. Bu durumlarda, bağlantı etiketini gerçek bir düğmeyle değiştirin ve uygun şekilde biçimlendirin.
• Bağlantı içeriği olarak kullanılan resimler. Bazen gerekli olan bağlantılı resimler, ekran okuyucular tarafından kullanılamayabilir. Bağlantının yardımcı teknolojiye düzgün bir şekilde maruz kalmasını sağlamak için resmin alt özellik metnine sahip olduğundan emin olun.

Zayıf bağlantı metni başka bir sorundur. "Daha fazla bilgi" veya "burayı tıklayın" gibi tıklanabilir metinler, bağlantının nereye gittiği hakkında anlamsal bilgi sağlamaz. Bunun yerine, ekran okuyucuların bağlantılar hakkında anlamlı bağlamlar sağlamasına yardımcı olmak için "duyarlı tasarım hakkında daha fazla bilgi edinin" veya "bu tuval eğiticisine bakın" gibi açıklayıcı metinler kullanın.

Rotor, bir form kontrol listesini de alabilir. Okuyucular bu listeyi kullanarak belirli öğeleri arayabilir ve doğrudan bu öğelere gidebilir.

Ekran okuyucuların yaygın olarak yaptıkları bir hata telaffuzdur. Örneğin, bir ekran okuyucu "Udacity"yi "oo-dacity" olarak telaffuz edebilir, bir telefon numarasını büyük bir tam sayı olarak okuyabilir veya büyük harfle yazılmış metinleri bir kısaltmaymış gibi okuyabilir. İşin ilginç yanı, ekran okuyucu kullanıcıları bu özelliğe epey alışkın ve bunu dikkate alıyor.

Bazı geliştiriciler, yalnızca ekran okuyucuda fonetik olarak yazılan metinler sağlayarak bu durumu düzeltmeye çalışır. Fonetik yazımla ilgili basit bir kural vardır: Yapmayın; bu, sorunu daha da kötüleştirir. Örneğin, kullanıcı Braille ekran kullanıyorsa kelime yanlış yazılır ve bu durum daha fazla karışıklığa yol açar. Ekran okuyucular kelimelerin sesli yazılmasını sağladığından, kullanım deneyimini kontrol etmesi ve bunun ne zaman gerekli olduğuna karar vermesi için bunu okuyucuya bırakın.

Okuyucular, önemli nokta listesini görmek için rotoru kullanabilir. Bu liste, okuyucuların HTML önemli noktaları tarafından sağlanan ana içeriği ve gezinmeyle ilgili önemli noktaları bulmalarına yardımcı olur.

HTML5, sayfanın anlamsal yapısını tanımlamaya yardımcı olan header, footer, nav, article, section, main ve aside gibi bazı yeni öğeler sunar. Bu öğeler, herhangi bir yerleşik stili zorlamadan (her durumda CSS ile yapmanız gerekir) sayfada özellikle yapısal ipuçları sağlar.

Anlamsal yapısal öğeler, tekrar eden birden çok div bloğunun yerini alır ve hem yazarlar hem de okuyucular için sayfa yapısını sezgisel olarak ifade etmenin daha net ve açıklayıcı bir yolunu sunar.