Anlambilim ve içerikte gezinme

Sayfa gezinmesinde semantiklerin 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 semantik hem de destekleyici davranışın yerleşik olması nedeniyle, etkileyici ve semantik HTML yazmanın çok az çabayla çok fazla 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 açısından yoğun 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 kullanımının sıkıcı ve yavaş olduğu veya ekran okuyucunun bir öğeyi bulabilmesi için ekrandaki her şeyin odaklanılabilir olması gerektiği gibi yanlış fikirlere 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 listesi bu tekniğe defalarca atıfta bulunur.

• 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 bölümünde, "İçeriğin ayrı bölümleri, uygun durumlarda başlıklar kullanılarak belirtilir" ifadesi yer alır.

Tüm başlıkların ekranda görünmesi gerekmez. Örneğin Wikipedia, bazı başlıkları yalnızca ekran okuyuculara ve diğer yardımcı teknolojilere erişilebilir hale getirmek için kasıtlı olarak ekranın 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, görsel tasarımda görünür bir başlık gerektirmeyen veya yer olmayan durumlarda başlıkları yerleştirmek için bu yöntemi kullanabilirsiniz.

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 sorunlara neden olur. Tek sayfalık uygulamalarla ilgili bu makalede daha fazla bilgi edinebilirsiniz.
• Bağlantılarla uygulanan düğmeler. Bu, ekran okuyucunun içeriği bağlantı olarak yorumlamasına neden olur ve düğme işlevi kaybolur. Bu durumlarda, sabitleme 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, form denetim 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ç bir şekilde, ekran okuyucu kullanıcıları bu özelliğe oldukça alışkın ve bunu göz önünde bulunduruyor.

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 bazı yeni öğeler (header, footer, nav, article, section, main ve aside) kullanıma sundu. 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, birden fazla tekrar eden 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 daha açıklayıcı bir yolunu sunar.