Ekran okuyucuların başlıklar arasında veya belirli önemli bölgelere hızlı geçiş yapması için komutlar vardır. Öyle ki, ekran okuyucu kullanıcılarının katıldığı bir ankette, genellikle başlıkları keşfederek bilmedikleri bir sayfada gezindikleri tespit edildi.
Doğru başlık ve önemli nokta öğelerini kullanarak, yardımcı teknolojilerin kullanıcıları için sitenizde gezinme deneyimini önemli ölçüde iyileştirebilirsiniz.
Sayfanın ana hatlarını belirlemek için başlıklar kullanın
Sayfanız için yapısal bir anahat oluşturmak üzere h1-h6 öğelerini kullanın. Amaç, sayfanın başlıklarından geçen herkesin zihinsel bir resim oluşturabileceği bir iskelet veya yapı oluşturmaktır.
Yaygın uygulama, bir sayfadaki birincil başlık veya logo için tek bir h1, ana bölümleri belirtmek için h2 öğeleri ve destekleyici alt bölümlerde h3 öğeleri kullanmaktı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 seviyelerini atlar. Bu, anahat modelini bozduğu için bir anti kalıp 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 düzeyleri atlamayın.
Örneğin, bu sitede "HABERLER" adlı bir bölüm ve devamında iki başlık yer almaktadır:
"HABERLERDE" bölüm başlığı bir h2 olabilir ve destekleyici başlıkların her ikisi de h3 öğeleri olabilir.
"HABERLERDE" ifadesinin font-size alanı başlıktan daha küçük olduğundan, ilk haberin başlığını h2, "HABERLERDE" ifadesini de h3 yapmak cazip gelebilir. Bu, tarayıcının varsayılan stiliyle eşleşse de
ekran okuyucu kullanıcısına aktarılan ana hatları 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 çalıştırın (Lighthouse > Seçenekler > Erişilebilirlik) ve Başlıklar, düzeyleri atlamaz denetiminin sonuçlarını bulun.
Navigasyona yardımcı olması için yer işaretlerinden yararlanma
main, nav ve aside gibi HTML5 öğeleri önemli noktalar veya sayfada ekran okuyucunun atlayabileceği özel bölgeler olarak işlev görür.
div'den yararlanmak yerine, sayfanızın önemli bölümlerini tanımlamak için önemli nokta etiketlerini kullanın. Önemli noktaların çok fazla olması yorucu olabileceğinden aşırıya kaçmamaya dikkat edin. Örneğin, 3 veya 4 yerine yalnızca bir main öğesine odaklanın.
Lighthouse, "gezinmeyi iyileştirmek için HTML5 belirgin nokta öğelerinin kullanılıp kullanılmadığını" kontrol etmek için sitenizi manuel olarak denetlemenizi önerir. Sayfanızı kontrol etmek için bu önemli nokta öğeleri listesini kullanabilirsiniz.
Atlama bağlantılarıyla yinelenen içerikleri atlayın
Birçok sitenin başlıklarında, yardımcı teknolojilerle gezinmek rahatsız edici olabilecek tekrarlanan gezinme bulunur. Kullanıcıların bu içeriği atlamasına izin vermek için bir atla bağlantısı kullanın.
Atlama bağlantısı, her zaman DOM'de odaklanılabilir ilk öğe olan ekran dışı bir bağlayıcıdır. Genellikle, sayfanın ana içeriğine sayfa içi bir bağlantı içerir. DOM'deki ilk öğe olduğundan, buna odaklanmak ve tekrarlanan gezinmeyi atlamak için yardımcı teknolojiden yalnızca tek bir işlem yapar.
<!-- 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 popüler sitelerin hepsinde atlama bağlantıları bulunur. Bunları ziyaret edip klavyenizdeki TAB tuşuna birkaç kez basmayı deneyin.
Lighthouse, sayfanızda bir atlama bağlantısı olup olmadığını 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ı bulun.