Anlambilim ve içerikte gezinme

Sayfada gezinmede anlamın rolü

Alice Boxhall

Dave Gash

Meggin Kearney

Kullanım olanakları, anlambilim ve yardımcı teknolojilerin kullanıcıları için alternatif bir kullanıcı deneyimi oluşturmak amacıyla 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 sayıda erişilebilirlik sağladığını görebilirsiniz.

Bu derste, ekran okuyucu kullanıcıları için özellikle gezinmeyle ilgili çok önemli olan ve daha az belirgin olan bazı anlamları ele alacağız. Çok fazla kontrol öğesi ancak az miktarda içerik bulunan basit bir sayfada, ihtiyacınız olan şeyi bulmak için sayfayı taramak kolaydır. Ancak Vikipedi girişi veya haber toplayıcısı gibi içerik yoğunluğu yüksek bir sayfada her şeyi baştan sona okumak pratik değildir. İçerikte verimli bir şekilde gezinmenin bir yoluna ihtiyacınız vardır.

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. Bu genellikle doğru değildir.

Ekran okuyucu kullanıcıları, bilgileri bulmak için genellikle başlık listesinden yararlanır. Çoğu ekran okuyucunun, sayfa başlıklarının listesini ayırıp taramanın kolay yolları vardır. Bu, rotor adı verilen önemli bir özelliktir. 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

Öncelikle daha önce belirttiğimiz bir noktayı tekrarlayalım: DOM sırası önemlidir. Bu durum yalnızca odak 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ıra yerine DOM sırasını izlediğini göreceksiniz.

Bu durum, ekran okuyucular için genel olarak geçerlidir. Ekran okuyucular erişilebilirlik ağacıyla etkileşimde bulunduğundan ve erişilebilirlik ağacı DOM ağacını temel aldığından, ekran okuyucunun algıladığı sıra doğrudan DOM sırasına dayanır. Bu da uygun bir başlık yapısının hiç olmadığı kadar önemli olduğu anlamına gelir.

İyi yapılandırılmış sayfaların çoğunda, başlık düzeyleri, içerik blokları arasındaki üst-alt ilişkilerini belirtmek için iç içe yerleştirilir. WebAIM kontrol listesinde bu teknikten sık sık bahsedilir.

• 1.3.1 "Başlık belirlemek için anlamsal işaretleme kullanılır" ifadesini içeriyor
• 2.4.1'de, içerik bloklarını atlama tekniği olarak başlık yapısından bahsediliyor
• 2.4.6 bölümünde, yararlı başlıklar yazmayla ilgili bazı ayrıntılar ele alınmaktadır.
• 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 bir başlık gerektirmediğinde veya görünür bir başlık için alan bulunmadığında başlıkları yerleştirmek için iyi bir yol olabilir.

Diğer gezinme seçenekleri

İyi başlıklar içeren sayfalar, ekran okuyucu kullanıcılarının gezinmesine yardımcı olsa da sayfa içinde gezinmek için kullanabilecekleri diğer öğeler arasında bağlantılar, form kontrolleri ve yer işaretleri yer alır.

Okuyucular, sayfadaki bağlantı listesine erişmek için ekran okuyucunun rotor özelliğini (sayfa başlıklarının listesini ayırıp taramanın kolay bir yolu) kullanabilir. Bazen, wiki'lerde olduğu gibi çok sayıda bağlantı bulunur. Bu nedenle okuyucu, bağlantılar arasında bir terimi arayabilir. Bu, isabetlerin sayfadaki terimin her oluşumu yerine terimi gerçekten içeren bağlantılarla sınırlandırılmasını sağlar.

Bu özellik yalnızca ekran okuyucu bağlantıları bulabiliyorsa ve bağlantı metni anlamlıysa faydalıdır. Örneğin, bağlantıların bulunmasını zorlaştıran bazı yaygın kalıplar aşağıda verilmiştir.

• href özellikleri olmayan ana sayfa etiketleri. Genellikle tek sayfalık uygulamalarda kullanılan bu bağlantı hedefleri, ekran okuyucularda soruna neden olur. Tek sayfalık uygulamalarla ilgili bu makalede 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ı teknolojilere uygun şekilde gösterilmesini sağlamak için resimde alt özellik metninin bulunduğundan emin olun.

Kötü bağlantı metni de bir sorundur. "Daha fazla bilgi" veya "burayı tıklayın" gibi tıklanabilir metinler, bağlantının nereye yönlendirdiği hakkında anlamsal bilgi sağlamaz. Bunun yerine, ekran okuyucuların bağlantılarla ilgili anlamlı bağlam bilgisi sunmasına yardımcı olmak için "duyarlı tasarım hakkında daha fazla bilgi edinin" veya "bu kanvas eğitimini inceleyin" gibi açıklayıcı metinler kullanın.

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

Ekran okuyucuların yaptığı yaygın bir hata telaffuzdur. Örneğin, 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 harflerle yazılmış metni kısaltma gibi okuyabilir. İlginçtir ki, ekran okuyucu kullanıcıları bu özelliğe epey alışkındır ve bunu dikkate alır.

Bazı geliştiriciler, yalnızca ekran okuyuculara yönelik fonetik olarak yazılmış metinler sağlayarak bu durumu iyileştirmeye çalışır. Fonetik yazım için basit bir kural vardır: Bunu yapmayın. Aksi takdirde sorunu daha da kötüleştirirsiniz. Örneğin, bir kullanıcı Braille ekran kullanıyorsa kelime yanlış yazılarak daha fazla kafa karışıklığına neden olur. Ekran okuyucular, kelimelerin sesli olarak yazılmasına olanak tanır. Bu nedenle, deneyimi kontrol etmek ve bunun ne zaman gerekli olduğuna karar vermek okuyucuya bırakılır.

Okuyucular, landmark listesini görmek için rotoru kullanabilir. Bu liste, okuyucuların ana içeriği ve HTML yer işareti öğeleri tarafından sağlanan bir dizi gezinme yer işaretini bulması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, yerleşik bir stili zorlamadan (CSS ile zaten yapmanız gereken bir işlemdir) sayfaya 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.