Ekran okuyucularda, başlıklar arasında veya belirli önemli bölgelere hızlıca geçiş yapmak için kullanılan 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ına en yakın varsayılan stilleri 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:
"HABERLERDE" bölüm başlığı h2, destekleyici başlıkların ikisi de h3 öğe olabilir.
"HABERLERDE" için kullanılan font-size, başlıktan daha küçük olduğundan ilk haberin başlığını h2, "HABERLERDE" ifadesini 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ıklar düzeyleri atlamıyor denetiminin sonuçlarını inceleyin.
Navigasyona yardımcı olmak için önemli noktalar kullanma
main, nav ve aside gibi HTML5 öğeleri, yer işaretleri veya sayfada ekran okuyucunun atlayabileceği özel bölgeler görevi görür.
div kullanmak yerine, sayfanızın ana bölümlerini tanımlamak için önemli nokta etiketlerini 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 başlıklarında tekrarlanan gezinmeler bulunur. Bu, yardımcı teknolojilerle gezinmek sinir bozucu 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'de ilk odaklanılabilir öğe olan ekran dışı bir sabittir. Genellikle sayfanın ana içeriğine yönlendiren 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.