Anlambilim ve içerikte gezinme

Sayfa gezintisinde anlam biliminin rolü

Aylin Yazar
Alice Boxhall
Dave Gash
Dave Gash
Meggin Kearney
Meggin Kearney

Uygun fiyatlar, anlamlar ve yardımcı teknolojilerin kullanıcılara alternatif bir kullanıcı deneyimi oluşturmak için erişilebilirlik ağacını nasıl kullandığını öğrendiniz. Birçok standart öğe hem anlamlara hem de destekleyici davranışlara yerleşik olarak sahip olduğundan, anlamlı, semantik HTML yazmanın çok az çabayla size yüksek miktarda erişilebilirlik sağladığını görebilirsiniz.

Bu derste, özellikle gezinmeyle ilgili olarak ekran okuyucu kullanıcıları için çok önemli olan, daha az bariz bazı anlamlara değineceğiz. Çok fazla kontrol içeren, ancak fazla içerik bulunmayan basit bir sayfada, ihtiyacınız olan şeyi bulmak için sayfayı kolayca tarayabilirsiniz. Ancak Wikipedia girişi veya haber toplayıcı gibi çok fazla içeriğe sahip bir sayfada her şeyi yukarıdan aşağıya okumak pratik değildir; içerik içinde verimli bir şekilde gezinmek için bir yönteme ihtiyacınız vardır.

Geliştiriciler genellikle ekran okuyucuların can sıkıcı ve yavaş kullanıldığı veya ekran okuyucunun ekranı bulabilmesi için ekrandaki her şeyin odaklanılabilir olması gerektiği gibi bir yanılgıya sahip olur. Ancak bu durum çoğu zaman mümkün değildir.

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 kolayca izole edip tarayabilir. Bu özelliği desteklemek için HTML başlıklarını etkili şekilde nasıl kullanabileceğimize bakalım.

Başlıkları etkili bir şekilde kullanma

İlk olarak, daha önceki bir noktayı hatırlatmak isteriz: Yalnızca odaklanma sırası için değil, ekran okuyucu sırasındaki sıralama için DOM sırası konuları. VoiceOver, NVDA, JAWS ve ChromeVox gibi ekran okuyucularla deneme yaparken, başlık listesinin görsel sıra yerine DOM sırasını takip ettiğini görürsünüz.

Bu, genel olarak ekran okuyucular için geçerlidir. Bu nedenle, ekran okuyucular erişilebilirlik ağacıyla etkileşim kurduğundan ve erişilebilirlik ağacı DOM ağacına dayalı olduğundan bir ekran okuyucunun algıladığı sıra doğrudan DOM sırasına bağlıdır. Bu durum, uygun bir başlık yapısının hiç olmadığı kadar önemli olduğu anlamına geliyor.

İyi yapılandırılmış çoğu sayfada başlık seviyeleri, içerik blokları arasındaki üst-alt ilişkilerini göstermek için iç içe yerleştirilir. WebAIM kontrol listesi sürekli olarak bu teknikten söz eder.

  • 1.3.1 "Anlamsal işaretleme, başlıkları belirtmek için kullanılır"dan bahsetme
  • 2.4.1 İçerik bloklarını atlamak için kullanılan bir teknik olarak başlık yapısından bahseder.
  • 2.4.6'da, kullanışlı başlıklar yazmaya ilişkin bazı ayrıntılar açıklanmıştır
  • 2.4.10 da "İçeriklerin ayrı ayrı bölümleri, uygun olduğunda başlıklar kullanılarak belirlenir"

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

<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ımda görünür bir başlık gerekmediği veya yer kaplamadığı durumlarda başlıkları yerleştirmek için iyi bir yol olabilir.

Diğer gezinme seçenekleri

İyi başlıklara sahip sayfalar, ekran okuyucu kullanıcılarının gezinmesine yardımcı olsa da bağlantılar, form denetimleri ve yer işaretleri gibi, 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 izole edip taramanın kolay bir yoludur) kullanabilir. Bazen, wiki'de olduğu gibi, çok sayıda bağlantı bulunduğundan okuyucu, bağlantılar içinde bir terim arayabilir. Bu, isabetleri, terimin sayfada geçtiği her yerde değil, gerçekten terimi 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 faydalıdır. Bağlantıların bulunmasını zorlaştıran yaygın kalıplardan bazılarını burada görebilirsiniz.

  • href özelliği olmayan bağlantı etiketleri. Genellikle tek sayfalık uygulamalarda kullanılan bu bağlantı hedefleri, ekran okuyucular için sorunlara neden olur. Daha fazla bilgi için tek sayfalık uygulamalarla ilgili bu makaleyi inceleyebilirsiniz.
  • Bağlantılarla uygulanan düğmeler. Bunlar, ekran okuyucunun içeriği 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 bir şekilde biçimlendirin.
  • Bağlantı içeriği olarak kullanılan resimler. Bazen gerekli resimler, ekran okuyucular tarafından kullanılamayabilir. Bağlantının yardımcı teknolojiye doğru şekilde gösterilmesini sağlamak için resmin alt özellik metnine sahip olduğundan emin olun.

Bağlantı metninin kötü olması da başka bir sorundur. "Daha fazla bilgi edinin" veya "burayı tıklayın" gibi tıklanabilir metinler, bağlantının nereye gittiğiyle ilgili anlamsal bilgi sağlamaz. Bunun yerine, ekran okuyucuların bağlantılar hakkında anlamlı bir bağlam 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 listesi de alabilir. Bu listeyi kullanarak, okuyucular belirli öğeleri arayabilir ve doğrudan bu öğelere gidebilirler.

Ekran okuyucuların sıklıkla yaptığı bir hata telaffuzdur. Örneğin, bir ekran okuyucu "Udacity" kelimesini "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 kısaltmamış gibi okuyabilir. İşin ilginç yanı, ekran okuyucu kullanıcılarının bu duruma alışkın olmaları ve dikkate alması.

Bazı geliştiriciler, fonetik olarak yazılan, yalnızca ekran okuyuculara yönelik metinler sağlayarak bu durumu düzeltmeye çalışırlar. Fonetik yazımla ilgili basit bir kural şöyle: Bunu yapmayın, yalnızca sorunu daha da kötüleştirir! Örneğin, kullanıcı Braille ekran kullanıyorsa kelime yanlış yazılır ve bu da daha fazla kafa karışıklığına yol açar. Ekran okuyucular kelimelerin sesli okunmasına izin verir. Bu nedenle, deneyimleri kontrol etmesi ve bunun ne zaman gerekli olduğuna karar vermesi için metni okuyucuya bırakın.

Okuyucular, rotoru kullanarak bir yer işareti listesini görebilir. Bu liste, okuyucuların ana içeriği ve HTML önemli noktaları tarafından sağlanan bir dizi önemli gezinme noktasını 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 dahil bazı yeni öğeleri kullanıma sundu. Bu öğeler, herhangi bir yerleşik stili zorlamadan özellikle sayfada yapısal ipuçları sağlar (bunu yine de CSS ile yapmanız gerekir).

Anlamsal yapısal öğeler, birden fazla, tekrarlayan div bloğunun yerini alır ve hem yazarlar hem de okuyucular için sayfa yapısını sezgisel olarak ifade etmek üzere daha net ve açıklayıcı bir yol sağlar.