Bu kural ne anlama geliyor

WCAG 2.4.10, içeriğin bölüm başlıkları kullanılarak duzenlenmesini gerektirir. Web içeriği bölümlere ayrıldığında her bölüm, o bölümün içeriğini tanımlayan uygun bir başlık öğesiyle (h1-h6) baslamalidir. Bu, başlıkların açıklayıcı olmasını gerektiren 2.4.6 (Başlıklar ve Etiketler) üzerine insaedir — bu kriter tüm bölümler için başlıkların mevcut olmasını gerektirir.

Bu, tüm içerik boyunca kapsamlı başlık yapısı için baskilan bir AAA düzey kriterdir. Amaç, içeriğin her farklı bolumunun bir başlıkla tanitilmasini, sayfaların yardımcı teknoloji kullanıcıları için başlıkla tam olarak gezilebilir olmasını sağlamaktır.

Neden önemlidir

Ekran okuyucu kullanıcıları öncelikle başlık üzerinden gezinir. Başlık yapısı sayfa için bir içerik tablosu görevi görür — kullanıcılar başlıktan başlığa atlayarak sayfayı hızla tarayabilir ve ilgili bölümleri bulabilir. Kapsamlı başlıklar olmadan kullanıcıların sayfa yapısını anlamak için içeriği doğrusal olarak okuması gerekir ki bu son derece yavaş ve yorucudur.

Başlıklar ayrıca içeriği yönetilebilir parçalara bölerek bilişsel engelli kullanıcılara, yönelim noktaları sağlayarak ekran büyüteçleri kullanan az gören kullanıcılara ve sayfaları görsel olarak tarayan tüm kullanıcılara fayda sağlar.

İlgili axe-core kuralları

Tüm bolumlerde bölüm başlıklarını zorunlu kilan otomatik axe-core kuralı yoktur. Bu kriter manuel içerik incelemesi gerektirir.

Nasıl test edilir

Sayfanın başlık anahatini oluşturmak için bir tarayıcı eklentisi kullanın (örneğin HeadingsMap, WAVE).
Her farklı içerik bolumunun bir başlık öğesiyle başladığını doğrulayın.
Başlık hiyerarşisinin mantıklı olduğunu ve seviyeleri atlamadigini (h1 > h2 > h3) kontrol edin.
Başlık gezinmesini (H tuşu) kullanarak bir ekran okuyucu ile gezinin ve sayfa yapisinin açık olduğunu onaylayın.

Basliklarin aslinda bölüm başlıkları olmayan ogelerde kullanilmadigini (örneğin görsel stil için h3 kullanmak) kontrol edin.
Ana sayfa başlığı olarak hizmet eden sayfa başına tam olarak bir h1 olduğunu kontrol edin.

Nasıl düzeltilir

Her içerik bolumunun başına mantıklı bir hiyerarşiyi koruyarak başlık öğeleri ekleyin.

Doğru başlık yapısı

<main>
  <h1>Erişilebilirlik Bilgi Bankası</h1>

  <section>
    <h2>Algilanabilir</h2>
    <p>İçerik kullanıcılara algilayabilecekleri şekilde sunulmalıdır...</p>

    <section>
      <h3>Metin Alternatifleri</h3>
      <p>Metin dışı içerikler için metin alternatifleri sağlayın...</p>
    </section>

    <section>
      <h3>Uyarlanabilir</h3>
      <p>Farklı sekillerde sunulabilen içerik oluşturun...</p>
    </section>
  </section>

  <section>
    <h2>Islenebilir</h2>
    <p>Kullanıcı arayüzü bileşenleri işlenebilir olmalıdır...</p>
  </section>
</main>

Örtük bölümler için ARIA kullanımı

<!-- Bölüm başlıkları görsel olarak gizli ama YT için gerekli olduğunda -->
<section aria-labelledby="kenar-çubuğu-başlığı">
  <h2 id="kenar-çubuğu-başlığı" class="sr-only">İlgili Makaleler</h2>
  <ul>
    <li><a href="/bb/2-4-7">Görünür Odak</a></li>
    <li><a href="/bb/2-4-11">Odak Gizlenmemiş</a></li>
  </ul>
</section>

<style>
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}
</style>

Sık yapılan hatalar

Başlığı olmayan içerik bölümleri — kullanıcılar bu bölümlere gezinemez veya bunları tanimlayamaz.
Başlık seviyelerini atlamak (örneğin h1'den doğrudan h3'e geçmek), bu da mantıklı belge anahatini bozar.
Başlık öğelerini yapısal organizasyon yerine görsel stil için kullanmak.
Tek bir sayfada birden fazla h1 öğesi, birincil konuyu belirsiz kılar.
Başlık öğeleri yerine kalın veya büyük metin kullanmak — görsel olarak benzer ancak yardımcı teknoloji için görünmez.
Başlık yapısını sayfalar arasında tutarsız bırakmak, geri donen kullanıcıların kafasını karıştırmak.

2.4.10 Bölüm Başlıkları