Ekran okuyucularda başlıklar arasında veya belirli bir satıra hızlıca geçiş yapmak için kullanılan komutlar vardır. belirgin bölgeleri gösterir. Hatta, ekran okuyucu kullanıcılarıyla ilgili bir anket tanıdık olmayan bir sayfaya göz attıklarını tespit ettik. Bu nedenle, başlıklarına bakabilirsiniz.
Doğru başlık ve önemli nokta öğelerini kullanarak öğelerinize önemli ölçüde yardımcı teknolojileri kullananlar için sitenizde gezinme deneyimini iyileştirebilirsiniz.
Sayfayı ana hatlarıyla belirtmek için başlıkları kullanın
Sayfanız için yapısal bir ana hat oluşturmak amacıyla h1-h6 öğelerini kullanın. Hedef
sayfayı ziyaret eden herkes için sayfa iskeleti veya
zihinsel bir resim oluşturabilirsiniz.
Bir sayfadaki birincil başlık veya logo için tek bir h1 kullanılması yaygın bir uygulamadır.
sayfası, ana bölümleri belirtmek için h2 öğeleri ve destekleyici alt bölümlerdeki h3 öğeleri:
<h1>Company name</h1>
<section>
<h2>Section Heading</h2>
…
<h3>Sub-section Heading</h3>
</section>
Başlık düzeylerini atlama
Geliştiriciler genellikle başlık düzeylerini atlayarak tarayıcının varsayılan stillerini kullanabilir. uyumlu bir tasarıma sahip olabilir. Bozduğu için bu bir anti-pattern olarak kabul edilir anahat modelidir.
Başlıklar için tarayıcının varsayılan yazı tipi boyutlandırmasını kullanmak yerine kendi CSS'nize sahip olun ve seviyeleri atlamayın.
Örneğin, bu sitede "HABERLERDE" adlı bir bölüm ve ardından iki bölüm vardır. başlıklar:
"HABERLERDE" bölüm başlığı bir h2 ve destekleyici
başlıkların ikisi de h3 öğe olabilir.
Çünkü "HABERLERDE" için font-size. başlıktan küçükse
ilk haberin başlığını h2 yapmak ve
"HABERLERDE" h3. Bu, tarayıcının varsayılan stiliyle eşleşebilir ancak
ekran okuyucu kullanıcısına anlatılan ana hatları bozardı.
Sayfanızın herhangi bir başlık düzeyini atlayıp atlamadığını kontrol etmek için Lighthouse'u kullanabilirsiniz. Erişilebilirlik denetimi (Lighthouse > Seçenekler > Erişilebilirlik) ve görünüm Başlıklar seviyeleri atlamıyor denetiminin sonuçları için.
Navigasyona yardımcı olması için önemli noktaları kullanın
main, nav ve aside gibi HTML5 öğeleri önemli yerler görevi görür veya
Sayfada ekran okuyucunun atlayabileceği özel bölgeler.
Anahtar kelimelere güvenmek yerine, sayfanızın önemli bölümlerini tanımlamak için
div sn. Çok fazla önemli nokta olması çok fazla olabileceği için aşırıya kaçmamaya dikkat edin.
bunaltıcı. Örneğin, 3 yerine yalnızca bir main öğesine bağlı kalın.
5.
Lighthouse, "HTML5 belirgin işareti"nin mevcut olduğunu kontrol etmek için sitenizin manuel olarak denetlenmesini önerir. öğeleri gezinmeyi iyileştirmek için kullanılır." Bu önemli nokta listesini kullanabilirsiniz öğeler tıklayın.
Atlama bağlantılarıyla tekrar eden içerikleri atlayın
Birçok sitenin başlıklarında yinelenen gezinmeler bulunuyor. Bu durum can sıkıcı olabilir. yardımcı teknolojilerle nasıl gezineceğinizi söyleyebilirsiniz. Kullanıcıların bu içeriği atlamasını sağlamak için atlama bağlantısı kullanın.
Atlama bağlantısı, her zaman ilk odaklanılabilir öğe olan ekran dışı bir sabittir DOM. Genellikle sayfanın ana içeriğine yönlendiren bir sayfa içi bağlantı içerir. Çünkü arasında yer alıyorsa, yardımcı teknolojiden odaklanmak için yalnızca tek bir işlem yaparak gezinmeyi atlatabilir.
<!-- 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 gibi birçok popüler site
Times ve Wikipedia'nın tümü
atlama bağlantıları içerebilir. Bunları ziyaret edip TAB tuşuna basmayı deneyin.
birkaç kez kontrol edin.
Lighthouse, sayfanızda bir atlama bağlantısı olup olmadığını kontrol etmenize yardımcı olabilir. Erişilebilirlik denetimini tekrar kontrol edin ve Sayfada bir başlık, atlama bağlantısı veya önemli nokta bölgesi denetimini kullanabilirsiniz.