Başlıklar ve önemli noktalar

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:

Başlık, hero resim ve alt bölümler içeren bir haber sitesi.

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

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.