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, ifade gücü yüksek 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 gezinme açısından ç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 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, genel olarak ekran okuyucular için 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 öğe-alt öğe 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, içerik bloklarını atlama tekniği olarak başlık yapısından bahsediyor
• 2.4.6 bölümünde, yararlı başlıklar yazmayla ilgili bazı ayrıntılar ele alınmaktadır.
• 2.4.10, "İçeriğin ayrı bölümleri, uygun olduğu durumlarda başlıklar kullanılarak belirtilir."

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 denetimleri ve yer işaretleri bulunur.

Okuyucular, ekran okuyucunun rotor özelliğini (sayfa başlıklarının listesini ayırıp taramanın kolay bir yolu) kullanarak sayfadaki bağlantı listesine erişebilir. Bazen, wiki'lerde olduğu gibi çok sayıda bağlantı bulunur. Bu nedenle okuyucu, bağlantılar arasında bir terimi arayabilir. Bu, isabet sayısını sayfadaki terimin her oluşumu 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 kullanışlı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.

Bağlantı metninin kötü olması da 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 tuhaflığa oldukça alışmış 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 yol açar. 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.