Ekran okuyucularda, başlıklar veya belirli yer işareti bölgeleri arasında hızlıca atlama komutları bulunur. Ekran okuyucu kullanıcıları arasında yapılan bir ankette, kullanıcıların yabancı bir sayfaya giderken en sık başlıkları keşfederek gezindiği ortaya çıkmıştır.
Doğru başlık ve yer işareti öğelerini kullanarak, yardımcı teknolojileri kullanan kullanıcılar için sitenizdeki gezinme deneyimini önemli ölçüde iyileştirebilirsiniz.
Sayfanın ana hatlarını belirtmek için başlıkları kullanın
Sayfanız için yapısal bir ana hat oluşturmak üzere h1-h6 öğelerini kullanın. Amaç, başlıklar aracılığıyla gezinen herkesin zihninde bir resim oluşturabileceği şekilde sayfanın iskeletini veya iskeletini oluşturmaktır.
Sayfadaki birincil başlık veya logo için tek bir h1, önemli bölümleri belirtmek için h2 öğeleri ve destekleyici alt bölümlerde h3 öğeleri kullanmak yaygın bir uygulamadır:
<h1>Company name</h1>
<section>
<h2>Section Heading</h2>
…
<h3>Sub-section Heading</h3>
</section>
Başlık seviyelerini atlamayın
Geliştiriciler, tarayıcının tasarımlarıyla yakından eşleşen varsayılan stillerini kullanmak için genellikle başlık düzeylerini atlar. Bu, ana hat modelini bozduğu için anti-pattern olarak kabul edilir.
Başlıklar için tarayıcının varsayılan yazı tipi boyutunu kullanmak yerine kendi CSS'nizi kullanın ve seviyeleri atlamayın.
Örneğin, bu sitede "HABERLER" adlı bir bölüm ve ardından iki başlık yer alıyor:
"HABERLER" bölüm başlığı bir h2 olabilir ve destekleyici başlıklar h3 öğeleri olabilir.
"HABERLER" için kullanılan font-size, başlıktan daha küçük olduğundan ilk haberin başlığını h2, "HABERLER"i ise h3 olarak ayarlamak cazip gelebilir. Bu, tarayıcının varsayılan stiliyle eşleşse de ekran okuyucu kullanıcısına iletilen ana hattı bozar.
Sayfanızın herhangi bir başlık düzeyini atlayıp atlamadığını kontrol etmek için Lighthouse'u kullanabilirsiniz. Erişilebilirlik denetimini (Lighthouse > Seçenekler > Erişilebilirlik) çalıştırın ve Başlıklarda düzey atlama yok denetiminin sonuçlarını inceleyin.
Gezinmeye yardımcı olmak için yer işaretlerini kullanma
main, nav ve aside gibi HTML5 öğeleri, yer işareti veya ekran okuyucunun sayfadaki özel bölgelere atlayabileceği özel bölgeler olarak işlev görür.
Sayfanızın önemli bölümlerini tanımlamak için div etiketlerine güvenmek yerine yer işareti etiketleri kullanın. Çok fazla yer işareti kullanmak kullanıcıları bunaltabileceğinden, yer işareti sayısını aşırı artırmamaya dikkat edin. Örneğin, 3 veya 4 yerine yalnızca bir main öğesi kullanın.
Lighthouse, "HTML5 yer işareti öğelerinin gezinmeyi iyileştirmek için kullanılıp kullanılmadığını" kontrol etmek üzere sitenizi manuel olarak denetlemeniz önerir. Sayfanızı kontrol etmek için bu önemli öğelerin listesini kullanabilirsiniz.
Atlama bağlantılarıyla tekrar eden içerikleri atlama
Birçok sitenin üstbilgilerinde tekrarlanan gezinme öğeleri bulunur. Bu, yardımcı teknolojilerle gezinirken can sıkıcı olabilir. Kullanıcıların bu içeriği atlamasına izin vermek için bir atlama bağlantısı kullanın.
Atlama bağlantısı, her zaman DOM'daki ilk odaklanılabilir öğe olan ekran dışı bir ankrajdır. Genellikle sayfanın ana içeriğine giden bir sayfa içi bağlantı içerir. DOM'daki ilk öğe olduğundan, yardımcı teknolojinin bu öğeye odaklanmak ve tekrarlanan gezinmeyi atlamak için tek bir işlem yapması yeterlidir.
<!-- index.html -->
<a class="skip-link" href="#main">Skip to main</a>
…
<main id="main">
[Main content]
</main>
/* style.css */
.skip-link {
position: absolute;
top: -40px;
left: 0;
background: #000000;
color: white;
padding: 8px;
z-index: 100;
}
.skip-link:focus {
top: 0;
}
GitHub, The NY Times ve Wikipedia gibi birçok popüler sitede atlama bağlantıları bulunur. Bu sayfaları ziyaret edip klavyenizdeki TAB tuşuna birkaç kez basmayı deneyin.
Lighthouse, sayfanızın atlama bağlantısı içerip içermediğini kontrol etmenize yardımcı olabilir. Erişilebilirlik denetimini tekrar çalıştırın ve Sayfa bir başlık, atlama bağlantısı veya önemli nokta bölgesi içeriyor denetiminin sonuçlarını arayın.