Anlambilim ve içerikte gezinme

Sayfada gezinmede anlamın rolü

Alice Boxhall

Dave Gash

Meggin Kearney

Uygun işlevleri, anlamları ve yardımcı teknolojilerin erişilebilirlik ağacını kullanarak kullanıcılarına alternatif bir kullanıcı deneyimi sunabilirler. Gördüğünüz gibi anlamlı ve anlamsal HTML yazmak, ve erişilebilirlik özellikleri, çoğu standart öğede hem standart hem de ve destekleyici davranışı yerleşik olarak ekleyeceksiniz.

Bu derste, çok önemli bazı anlamlar çağrıştıran özellikle de gezinme konusunda ekran okuyucu kullanıcılarına. Basit bir sayfada çok fazla kontrol ancak çok fazla içerik olmaması nedeniyle, sayfayı tarayarak kolayca ihtiyacınız olacak. Ancak Wikipedia girişi veya haberler gibi yoğun içerik barındıran sayfalarda her şeyi yukarıdan aşağıya doğru okumak pratik değildir; siz verimli bir şekilde gezinmenin bir yolunu bulmanız gerekir.

Geliştiriciler genellikle ekran okuyucuların sıkıcı ve yavaş olduğu yanılgısına sahip ekrana odaklanılabilmesini veya ekrandaki her şeyin yardımcı olabilir. Böyle bir durum genellikle yaşanmaz.

Ekran okuyucu kullanıcıları, bilgileri bulmak için genellikle başlık listesinden yararlanır. En sık Ekran okuyucular, sayfa başlıkları listesini ayırıp taramanın kolay yollarına sahiptir. rotor adı verilen önemli bir özelliktir. Şimdi HTML başlıklarını nasıl kullanabileceğimize bakalım. etkin bir şekilde desteklenmelidir.

Başlıkları etkili bir şekilde kullanma

İlk olarak, daha önceki bir noktayı tekrarlayalım: DOM sırası hem de Odak sırası ancak ekran okuyucu sırası için. Ekran okuyucularla denemeler yaparken VoiceOver, NVDA, JAWS ve ChromeVox gibi olduğunda, başlık listesinin aşağıdaki gibi olduğunu DOM sıralamasına dikkat edin.

Bu durum genel olarak ekran okuyucular için geçerlidir. Çünkü ekran okuyucular erişilebilirlik ağacını, erişilebilirlik ağacını ise DOM ağacını, algılanma sırası doğrudan DOM sırasına bağlıdı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ış sayfaların çoğunda başlık düzeyleri, iç içe yerleştirilmiştir ve içerik blokları arasında üst-alt ilişkisini güçlendirir. WebAIM kontrol listesi, sürekli olarak bu tekniği inceleyelim.

• 1.3.1 "Başlıkları tanımlamak için anlamsal işaretleme kullanılır" yazıyor
• 2.4.1 Başlık yapısının, blokların bloklarını atlamak için bir teknik olarak içerik
• 2.4.6 yararlı başlıklar yazmakla ilgili bazı ayrıntıları açıklıyor
• 2.4.10 "içeriğin her bir bölümünün başlıklar kullanılarak belirlenmesi, uygun olduğunda"

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

<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>

Not: WebAIM sitesinde, ekran dışı içeriklerle ilgili bu makalede bu teknik ayrıntılı olarak açıklanmaktadır.

Karmaşık uygulamalarda bu, gerektiğinde başlıkları yerleştirmek için iyi bir yol olabilir. Görsel tasarımda başlığın görünür olması gerekmez veya buna yer yoktur.

Dikkat: Bu teknikte aşırıya kaçmamak önemlidir. Bunu unutmayın yardımcı teknoloji kullanıcıları da ekranı kendileri görebilir. Böylece "yalnızca ekran okuyucu" oluşturma konusunda çok fazla içerik bazı kullanıcılar için kullanıcı deneyimini olumsuz yönde etkiliyor. Ayrıca, bir e-posta yazacaksınız.

Diğer gezinme seçenekleri

İyi başlıklara sahip sayfalar, ekran okuyucu kullanıcılarının gezinmesine yardımcı olsa da bir sayfada gezinmek için kullanabilecekleri bağlantılar, form ve kontrolleri ve önemli noktaları içerir.

Okuyucular, ekran okuyucunun rotor özelliğini kullanarak bağlantı listesine erişmek için sayfa başlıkları listesini tarayın. Bazen, wiki'de olduğu gibi, birçok bağlantı olduğundan okuyucu, kullanabilirsiniz. Bu, isabetleri yalnızca teriminin sayfada geçtiği tüm yerler yerine

Bu özellik yalnızca ekran okuyucu bağlantıları ve bağlantıyı bulabiliyorsa yararlıdır metinlerin anlamlı olduğunu unutmayın. Örneğin, URL'lerde bağlantı oluşturan bazı yaygın zor bulunur.

• href özellikleri olmayan bağlantı etiketleri. Genellikle tek sayfada kullanılır bu bağlantı hedefleri ekran okuyucular için soruna neden olur. Şunları yapabilirsiniz: tek sayfalık uygulamalarla ilgili bu makalede daha fazla bilgi bulabilirsiniz.
• Bağlantılarla uygulanan düğmeler. Bunlar, ekran okuyucunun içerik bağlantı olarak yorumlanırsa düğme işlevi kaybolur. Örneğin, bu durumlarda, bağlantı etiketini gerçek bir düğmeyle değiştirin ve sağlayabilir.
• Bağlantı içeriği olarak kullanılan resimler. Bazen gerekli, bağlantılı resimler ekran okuyucular tarafından kullanılamaz. Bağlantının diğer kullanıcılara düzgün bir şekilde gösterilmesini yardımcı olmak için resimde alt özellik metninin bulunduğundan emin olun.

Zayıf bağlantı metni başka bir sorundur. "Daha fazla bilgi" gibi tıklanabilir metinler veya burayı" bağlantının nereye gittiği konusunda hiçbir anlamsal bilgi sağlamaz. Bunun yerine "duyarlı tasarım hakkında daha fazla bilgi" gibi açıklayıcı metinler veya "bu tuvale bakın eğiticisi" Bu da ekran okuyucuların bağlantılar hakkında anlamlı bir bağlam sağlamasına yardımcı olur.

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

Ekran okuyucuların yaygın olarak yaptıkları bir hata telaffuzdur. Örneğin, bir ekran okuyucu "Udacity" telaffuz edebilir "oo-dacity" olarak veya bir telefon numarasını büyük bir tam sayı girin veya büyük harfle yazılmış metni bir kısaltmayı içeriyormuş gibi okuyun. İlginçtir ki, ekran okuyucu kullanıcıları bu özelliğe epey alışkındır. üzerinde düşünülmesini sağlar.

Bazı geliştiriciler yalnızca ekran okuyucu kullanarak bu durumu düzeltmeye çalışıyor. fonetik olarak yazılan metindir. Fonetik yazımla ilgili basit bir kural şöyledir: yapmayın; sorunu daha da kötüleştirir. Örneğin bir kullanıcı bir Braille ekran alırsanız, kelime yanlış yazılır ve bu da zihin bulanıklığı. Ekran okuyucular kelimelerin sesli yazılmasına izin verir. Bu nedenle, ve bunun ne zaman gerektiğine karar vermesine yardımcı olur.

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

HTML5, bir sitenin anlamsal yapısını tanımlamaya yardımcı olan header, footer, nav, article, section, main ve dahil olmak üzere sayfa aside. Bu öğeler, sayfada özellikle yapısal ipuçları yerleşik stilleri zorlamadan (yine de CSS ile yapmanız gerekir).

Anlamsal yapısal öğeler, tekrar eden birden çok div bloğunun yerini alır ve sayfa yapısını sezgisel olarak ifade etmek için daha net ve açıklayıcı bir yöntem sağlar okumayı öğretiyor.