Gezinmeyi iyileştirmek için HTML5 önemli nokta öğeleri kullanılır

main, nav ve aside gibi HTML5 öğeleri, sayfada ekran okuyucuların ve diğer yardımcı teknolojilerin atlayabileceği özel bölgeler veya önemli noktalar olarak görev yapar. Önemli nokta öğelerini kullanarak, yardımcı teknoloji kullanıcıları için sitenizdeki gezinme deneyimini önemli ölçüde iyileştirebilirsiniz. Daha fazla bilgi için Deque Üniversitesi'nin HTML 5 ve ARIA Yer İşaretleri bölümüne bakın.

Önemli noktaları manuel olarak kontrol etme

Sayfanızın her önemli bölümünün bir önemli nokta öğesi içerip içermediğini kontrol etmek için W3C'nin önemli nokta öğeleri listesini kullanın. Örneğin:

<header>
  <p>Put product name and logo here</p>
</header>
<nav>
  <ul>
    <li>Put navigation here</li>
  </ul>
</nav>
<main>
  <p>Put main content here</p>
</main>
<footer>
  <p>Put copyright info, supplemental links, etc. here</p>
</footer>

Sayfa yapınızı görselleştirmek ve önemli noktalarda yer almayan bölümleri yakalamak için Microsoft'un Erişilebilirlik Analizleri uzantısı gibi araçları da kullanabilirsiniz:

Önemli noktaların Erişilebilirlik Analizleri uzantısıyla vurgulandığı web.dev ekran görüntüsü

Önemli noktalar nasıl etkili şekilde kullanılır?

  • Sayfanızın önemli bölümlerini tanımlamak için <div> veya <span> gibi genel öğelere bağlı kalmak yerine yer işareti öğelerini kullanın.
  • Sayfanızın yapısını yansıtmak için önemli noktalardan yararlanın. Örneğin, <main> öğesi, sayfanın ana fikriyle doğrudan alakalı olan tüm içeriği içermeli ve bu nedenle sayfa başına yalnızca bir tane olmalıdır. Her bir yer işaretinin nasıl kullanılacağını öğrenmek için MDN'nin içerik bölümü öğeleri özetine bakın.
  • Önemli noktaları akıllıca kullanın. Çok fazla önemli noktanın olması, yardımcı teknoloji kullanıcıları için gezinmeyi daha zor hale getirebilir. Zira bu, kullanıcıların istenen içeriğe kolayca atlamalarını engeller.

Daha fazla bilgi için Başlıklar ve önemli noktalar yayınına göz atın.

Kaynaklar