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

Bu Kuralın Anlamı

WCAG 2.4.10 — Bölüm Başlıkları (Seviye AAA) şöyle der: "İçeriği düzenlemek için bölüm başlıkları kullanılır." Bu, bir web sayfası veya belgenin birden fazla ayrı bölüme ayrıldığı durumlarda, her bölümün konu veya amacını tanımlayan, programatik olarak belirlenebilir bir başlığa sahip olması gerektiği anlamına gelir. Amaç yalnızca başlık gibi görünen görsel olarak biçimlendirilmiş metne sahip olmak değil, hem tarayıcılara hem de yardımcı teknolojilere hiyerarşik yapıyı ileten gerçek başlık işaretlemesini kullanmaktır.

HTML'de bu, yerel başlık öğelerinin <h1> ile <h6> arasında uygun şekilde kullanılmasını ifade eder. Ana bir konuya sahip bir sayfa bir <h1> taşımalı, ana bölümler <h2>, bunların alt bölümleri <h3> ve benzeri olmalıdır. Başlık seviyesi, görsel stil gerekçeleriyle rastgele seçilmek yerine içeriğin mantıksal derinliğini yansıtmalıdır. ARIA kullanıldığında, role="heading" ile birlikte aria-level kullanılması da kabul edilebilir, ancak yerel HTML öğeleri her zaman tercih edilir.

Bu ölçüte göre bir başarılı durum, sayfadaki her ayrı içerik bölümünün, ardından geleni doğru şekilde tanımlayan bir başlığa sahip olması, bu başlığın yalnızca görsel olarak kalın veya büyük metinle biçimlendirilmiş değil, semantik olarak işaretlenmiş olması ve başlık hiyerarşisinin belgenin içerik organizasyonunu mantıksal olarak yansıtması anlamına gelir. Bir başarısız durum ise içerik bölümlerinin hiç başlığa sahip olmaması, başlık seviyelerinin mantıksız şekilde atlanması (örneğin <h1>'den <h4>'e mantıklı bir neden olmadan geçilmesi) veya bir bölümü etiketlemek için uygun başlık öğeleri yerine düz biçimlendirilmiş metnin kullanılması durumunda ortaya çıkar.

Resmî WCAG istisnasına dikkat etmek önemlidir: bu ölçüt yalnızca sayfanın kendisi bölümler içerdiğinde geçerlidir. Tek, bütünleşik bir konuya sahip çok kısa sayfalar — örneğin belirgin bölümleri olmayan basit bir giriş formu — birden fazla başlığa sahip olmak zorunda değildir. Gereklilik, etiketlemeden fayda sağlayan birden fazla ayrı içerik alanının varlığıyla tetiklenir. Ayrıca, bu ölçüt mantıksal organizasyonun ötesinde belirli bir başlık hiyerarşisi yapısını zorunlu kılmaz; temel gereklilik, bölümlerin bulunduğu her yerde başlıkların var olması ve anlamlı şekilde kullanılmasıdır.

Bu ölçüt Seviye AAA olarak sınıflandırılır; bu, temel WCAG 2.2 uyumu için zorunlu olmadığı, ancak çok geniş bir kullanıcı yelpazesi için deneyimi önemli ölçüde iyileştiren en iyi erişilebilirlik uygulamasını temsil ettiği anlamına gelir.

Neden Önemlidir

Ekran okuyucu kullanıcıları, uzun belgeler ve web sayfalarında gezinmek için başlıklara birincil araçları olarak güvenirler. WebAIM'in Ekran Okuyucu Kullanıcı Anketi'ne göre, ekran okuyucu kullanıcılarının büyük çoğunluğu düzenli olarak başlıklarla gezinir — bu yöntem, en çok kullanılan gezinme yöntemlerinden biri olarak sürekli üst sıralarda yer alır. Başlıklar yoksa veya yanlış yapılandırılmışsa, ekran okuyucu kullanan bir kişi sayfanın en üstünden itibaren her içeriği sırasıyla dinlemek zorunda kalır; bu, gören bir kullanıcıyı içindekiler veya bölüm başlıkları olmadan tüm bir kitabı okumaya zorlamaya denktir.

Gerçek bir örneği düşünün: elektronik satan bir Türk e-ticaret sitesinde, ürün özellikleri, müşteri yorumları, kargo bilgileri ve iade politikası bölümlerini içeren bir ürün detay sayfası olabilir. Bu bölümlerin hiçbirinde başlık öğesi yoksa, Firefox üzerinde NVDA kullanan görme engelli bir kullanıcı bu bölümler arasında atlama yapamaz. Tüm içeriği dinlemek zorunda kalır veya deneme-yanılma arama stratejileri kullanır; bu da bilişsel yükü ve görev için harcanan zamanı önemli ölçüde artırır. Her bölüm için uygun <h2> başlıkları olduğunda ise, aynı kullanıcı saniyeler içinde bölümden bölüme atlamak için H tuşuna basabilir.

Bilişsel engeli olan kullanıcılar da büyük ölçüde fayda sağlar. Açık başlıklar, dikkat bozuklukları, okuma güçlükleri veya hafıza sorunları olan kişilerin, odaklarını kaybettikten sonra kendilerini hızla yeniden konumlandırmalarına imkân veren işaretler gibi davranır. Dünya Sağlık Örgütü, dünya genelinde yaklaşık 1,3 milyar insanın bir tür engelle yaşadığını tahmin etmektedir ve bilişsel ve nörolojik durumlar bu nüfusun büyük ve büyüyen bir bölümünü temsil etmektedir.

Sadece klavye ile gezinmeye veya anahtarlama erişim cihazlarına güvenen motor engelli kullanıcılar da fayda sağlar; çünkü başlık yapısı, birçok yardımcı teknoloji tarafından atla gezinme fırsatları oluşturmak için kullanılır ve istenen içerik alanına ulaşmak için gereken fiziksel çabayı azaltır.

Engellilik erişiminin ötesinde, doğru başlık yapısının önemli SEO faydaları vardır. Arama motorları, bir sayfanın konu yapısını anlamak için başlık hiyerarşisini kullanır; bu da sıralamayı ve içeriğin arama sonuçlarında nasıl gösterildiğini etkileyebilir. İyi yapılandırılmış bir başlık taslağı, hem kullanıcılara hem de tarayıcılara içerik kalitesi sinyali verir. Bu da, bu AAA ölçütünün uygulanması için, yasal olarak buna uymak zorunda olmayan kuruluşlar için bile güçlü bir iş gerekçesi oluşturur.

İlgili Axe-core Kuralları

WCAG 2.4.10 manuel test gerektirir ve tamamen otomatikleştirilemez. İşte otomatik araçların neden yetersiz kaldığı ve neleri yakalayıp neleri yakalayamadıkları:

• Manuel Test Gerekli — Yapısal Tamlık: axe-core gibi otomatik araçlar, bir sayfada başlık öğelerinin varlığını veya yokluğunu tespit edebilir ve atlanan başlık seviyeleri gibi sorunları (örneğin <h1>'den <h3>'e atlama) işaretleyebilir. Ancak, bir sayfanın içeriğinin mantıksal olarak bölümlere ayrılıp ayrılmadığını veya bir başlığın tanıttığı bölümü doğru şekilde tanımlayıp tanımlamadığını belirleyemezler. Bir araç, doğru bir başlık hiyerarşisi görüp denetimi geçer olarak işaretleyebilir; oysa sayfada aslında dört ayrı içerik bölümü vardır ve bunların üçünde hiç başlık yoktur. Başlık yerleşiminin semantik uygunluğu, içeriğin amacını ve yapısını anlayan insan incelemesi gerektirir.
• axe-core kuralı — heading-order: Bu kural, mantıksal belge taslağını bozan şekilde başlık seviyelerinin atlandığı durumları işaretler (örneğin doğrudan <h1>'den <h4>'e geçmek). Bu ilgili bir kalite sinyali olsa da, bu kuralı geçmek 2.4.10 ile tam uyumu garanti etmez; çünkü kural yalnızca var olan başlıkların göreli sırasını kontrol eder — bir bölümde eksik olan bir başlığın gerekip gerekmediğini belirleyemez.
• axe-core kuralı — page-has-heading-one: Bu kural, sayfada en az bir <h1> öğesi olup olmadığını kontrol eder; bu temel bir yapısal gerekliliktir. Yine, bu denetimi geçmek olumlu bir sinyaldir ancak 2.4.10 ile tam uyumu doğrulamaz; çünkü bir sayfada bir <h1> bulunabilir ve yine de altında birden fazla etiketsiz bölüm olabilir.
• Neden tam otomasyon imkânsızdır: Bir içerik bölgesinin, başlık gerektiren bir "bölüm" oluşturup oluşturmadığını belirlemek, içeriğin anlamını ve amacını anlamayı gerektirir — bu da şu anda insan yargısı gerektiren bir görevdir. Bir algoritma, önceki içeriğin doğal bir devamı olan tutarlı bir paragraf ile gerçekten yeni bir konu alanını temsil eden ve kendi etiketli başlığını hak eden bir bölüm arasında güvenilir şekilde ayrım yapamaz. Bu nedenle 2.4.10, kapsamlı herhangi bir denetimde her zaman manuel değerlendirme gerektiren bir ölçüt olarak listelenir.

Nasıl Test Edilir

1. axe DevTools veya Lighthouse ile otomatik tarama: Chrome ve Firefox için mevcut olan axe DevTools tarayıcı uzantısını yükleyin ve tam sayfa taraması çalıştırın. heading-order ve page-has-heading-one ile ilgili sorunları inceleyin. Temiz bir otomatik taramanın WCAG 2.4.10 uyumunu doğrulamadığını, yalnızca otomatikleştirilebilir alt küme denetimlerini geçtiğini unutmayın. Chrome DevTools içindeki Lighthouse da Erişilebilirlik denetimi altında başlıkla ilgili sorunları gösterir; "Heading elements are not in a sequentially-descending order" uyarılarını arayın.
2. Manuel içerik incelemesi — belge taslağı: HeadingsMap gibi bir tarayıcı uzantısı (Chrome ve Firefox için mevcut) kullanarak sayfadaki tüm başlık öğelerinin görsel bir taslağını oluşturun. Bu taslağı eleştirel biçimde inceleyin: sayfanın içerik yapısını doğru şekilde yansıtıyor mu? Her ayrı bölüm bir başlıkla temsil ediliyor mu? Sayfada görünen, ancak taslakta yer almayan içerik bölümleri var mı? Varsa, bu bölümlerde başlık eksiktir ve sayfa 2.4.10'u karşılamaz.
3. NVDA ve Firefox ile ekran okuyucu navigasyonu: Sayfayı Firefox'ta NVDA çalışırken açın. Başlıklar arasında ileri atlamak için H, geri gitmek için Shift+H tuşlarına basın. Her başlığa indiğinizde, duyurulan başlığın ardından gelen içeriği doğru şekilde tanımlayıp tanımlamadığını not edin. Ayrıca, hiçbir zaman bir başlık altında olduğu duyurulmayan önemli içerik bloklarıyla karşılaşıp karşılaşmadığınıza dikkat edin. NVDA'nın Öğe Listesini (NVDA+F7) açın, Başlıklar sekmesini seçin ve eksik veya yanlış etiketlenmiş bölümleri tespit etmek için tam başlık listesini inceleyin.
4. VoiceOver ve Safari (macOS/iOS) ile ekran okuyucu navigasyonu: macOS'te VoiceOver'ı etkinleştirin (Command+F5) ve sayfayı Safari'de açın. Başlıklar arasında gezinmek için VO+Command+H kullanın. iOS'ta rotor'u kullanın (iki parmakla kaydırarak Başlıklar'a ayarlayın) ve ardından başlıklar arasında hareket etmek için aşağı kaydırın. Tüm içerik bölümlerine başlık navigasyonu ile ulaşılabildiğini doğrulayın.
5. JAWS ve Chrome ile ekran okuyucu navigasyonu: JAWS'ta başlıklar arasında dolaşmak için H tuşuna basın ve Başlık Listesini açmak için Insert+F6 kullanın. Listeyi tamlık ve mantıksal hiyerarşi açısından inceleyin. Başlıkların yalnızca stil amaçlı kullanılmadığını — yalnızca gerçek bölüm etiketlerinin başlık olarak göründüğünü — doğrulayın.
6. Yalnızca klavye ile gezinme kontrolü: Yalnızca klavyeyi kullanarak, başlıkları kullanmadan sayfanın tüm ana bölümlerinde gezinmeye çalışın. Her bölüme ulaşmak için etkileşimli öğeler arasında kaç kez sekme yapmanız gerektiğini not edin. Bu, uygun başlık yapısı olmadığında klavye kullanıcılarının maruz kaldığı yük hakkında fikir verir.

Nasıl Düzeltilir

Yalnızca biçimlendirilmiş metinle etiketlenen bölümler — Hatalı

<div class='section'>
  <p class='section-title'>Product Specifications</p>
  <p>Screen size: 15.6 inches</p>
  <p>RAM: 16 GB</p>
</div>

<div class='section'>
  <p class='section-title'>Customer Reviews</p>
  <p>This product exceeded my expectations.</p>
</div>

Yalnızca biçimlendirilmiş metinle etiketlenen bölümler — Doğru

<!-- Using semantic heading elements makes sections navigable by screen readers -->
<section>
  <h2>Product Specifications</h2>
  <p>Screen size: 15.6 inches</p>
  <p>RAM: 16 GB</p>
</section>

<section>
  <h2>Customer Reviews</h2>
  <p>This product exceeded my expectations.</p>
</section>

Stil amaçlı atlanan başlık seviyeleri — Hatalı

<h1>Annual Report 2024</h1>
<!-- h4 used here because it looks smaller visually, skipping h2 and h3 -->
<h4>Financial Overview</h4>
<p>Revenue grew by 12% this year...</p>
<h4>Regional Performance</h4>
<p>The Istanbul region led growth...</p>

Stil amaçlı atlanan başlık seviyeleri — Doğru

<h1>Annual Report 2024</h1>
<!-- h2 used for major sections; CSS controls visual size, not heading level -->
<h2>Financial Overview</h2>
<p>Revenue grew by 12% this year...</p>
<h2>Regional Performance</h2>
<p>The Istanbul region led growth...</p>

Önemli bir sayfa bölümü için başlık olmaması — Hatalı

<main>
  <h1>Contact Us</h1>
  <form>
    <label for='name'>Name</label>
    <input type='text' id='name' name='name'>
    <label for='message'>Message</label>
    <textarea id='message' name='message'></textarea>
    <button type='submit'>Send</button>
  </form>
  <!-- This office locations section has no heading -->
  <div>
    <p>Istanbul Office: Levent Mah. No:5</p>
    <p>Ankara Office: Kızılay Mah. No:12</p>
  </div>
</main>

Önemli bir sayfa bölümü için başlık olmaması — Doğru

<main>
  <h1>Contact Us</h1>
  <section>
    <h2>Send Us a Message</h2>
    <form>
      <label for='name'>Name</label>
      <input type='text' id='name' name='name'>
      <label for='message'>Message</label>
      <textarea id='message' name='message'></textarea>
      <button type='submit'>Send</button>
    </form>
  </section>
  <!-- Office locations section now has a descriptive heading -->
  <section>
    <h2>Our Offices</h2>
    <p>Istanbul Office: Levent Mah. No:5</p>
    <p>Ankara Office: Kızılay Mah. No:12</p>
  </section>
</main>

aria-level olmadan ARIA heading rolünün kullanılması — Hatalı

<!-- role=heading without aria-level defaults to level 2, which may be wrong -->
<div role='heading'>Shipping Policy</div>
<p>Orders are shipped within 2 business days...</p>

aria-level olmadan ARIA heading rolünün kullanılması — Doğru

<!-- Native HTML is strongly preferred; if ARIA is used, aria-level must be explicit -->
<!-- Preferred: -->
<h2>Shipping Policy</h2>
<p>Orders are shipped within 2 business days...</p>

<!-- Acceptable when native heading cannot be used: -->
<div role='heading' aria-level='2'>Shipping Policy</div>
<p>Orders are shipped within 2 business days...</p>

Yaygın Hatalar

• <p> veya <div> öğeleri üzerinde .title veya .section-header gibi CSS sınıflarını gerçek <h1>–<h6> öğeleri yerine kullanmak: Yalnızca görsel biçimlendirme, yardımcı teknolojilere yapı iletmez. Başlık, gerçek bir başlık öğesi olmalı veya açık bir seviye ile geçerli bir ARIA heading rolü taşımalıdır.
• Başlık seviyelerini belge hiyerarşisi yerine yazı tipi boyutuna göre seçmek: Mantıksal olarak bir <h2> olması gerekirken, istenen görsel boyutta göründüğü için <h4> seçmek, belge taslağını bozar ve ekran okuyucu kullanıcılarını, öncesinde hiçbir 2 veya 3 seviye başlık olmadan "başlık seviyesi 4" duyduklarında şaşırtır.
• Görsel olarak küçültmek için <h1> üzerinde font-size veya font-weight geçersiz kılmaları uygulamak yerine daha alt seviye bir başlık öğesi kullanmamak: Bu, görsel hiyerarşi ile semantik hiyerarşi arasında uyumsuzluk yaratır; boyutu kontrol etmek için CSS, yapıyı iletmek için yerel başlık seviyeleri kullanılmalıdır.
• Dinamik olarak yüklenen içerik bölümlerinden (örneğin sekme panelleri, modal diyaloglar veya AJAX ile yüklenen sonuçlar) başlıkları çıkarmak: Sayfaya yeni içerik enjekte edildiğinde, çoğu zaman başlık yapısından yoksun olur. Dinamik olarak oluşturulan her bölüm, başlıklarla gezinmeyi kullanan kullanıcıların etiketlenmemiş bir içerik adasında mahsur kalmaması için uygun bir başlık içermelidir.
• Sayfa başlığı için yalnızca bir <h1> kullanmak ve beş veya daha fazla ayrı içerik bölümüne sahip bir sayfada başka başlık kullanmamak: Bir <h1>'in varlığı otomatik denetimleri geçse de, sonraki ana bölümler etiketsizse 2.4.10'u karşılamaz.
• Başlıkları <button> veya <a> öğelerinin içine yerleştirmek: Bir başlığı etkileşimli bir öğenin içine yerleştirmek, yardımcı teknolojiler için çakışan roller oluşturur ve geçersiz HTML'dir. Başlıklar, etkileşimli kontrolleri değil, içerik bölümlerini etiketlemelidir.
• aria-level belirtmeden role='heading' kullanmak: Varsayılan ARIA örtük seviyesi 2'dir; bu, amaçlanan belge yapısıyla eşleşmeyebilir ve bölüm farklı bir seviyede ise fark edilmeden yanlış bir taslak oluşturur.
• Yalnızca dekoratif veya tekrar eden başlıklar eklemek — örneğin sayfa başlığını her içerik kartının içinde bir <h2> olarak tekrar etmek — ve anlamlı gezinme değeri olmadan başlık gürültüsü yaratmak: Başlıklar, tanıttıkları bölümü benzersiz ve doğru şekilde tanımlamalıdır; gereksiz başlıklar, ekran okuyucu kullanıcıları için başlık navigasyonunun faydasını azaltır.
• Ekran okuyucuya özel yapı sağlamak amacıyla başlıkları display:none veya visibility:hidden ile görsel olarak gizlemek: Bu CSS özellikleri, öğeyi yardımcı teknolojilerden de gizler. Bir başlığın erişilebilirlik ağacında bulunması, ancak ekranda görünmemesi gerekiyorsa, standart görsel olarak gizli tekniği kullanın (position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0);).
• Sayfa içeriği bir yeniden tasarım sırasında yeniden düzenlendiğinde başlık yapısını güncellememek: İlk geliştirme sırasında eklenen başlıklar, içerik bölümleri yeniden sıralandığında, birleştirildiğinde veya değiştirildiğinde çoğu zaman güncel tutulmaz. Başlık denetimleri, tek seferlik bir erişilebilirlik düzeltmesi değil, her içerik veya tasarım inceleme döngüsünün parçası olmalıdır.

Türkiye'nin Erişilebilirlik Mevzuatıyla İlişkisi

Türkiye'nin 21 Haziran 2025 tarihli ve 32933 sayılı Resmî Gazete'de yayımlanan 2025/10 sayılı Cumhurbaşkanlığı Genelgesi, Türkiye'de faaliyet gösteren geniş bir yelpazedeki kuruluş için kapsamlı dijital erişilebilirlik yükümlülükleri getirmektedir. Genelge, dijital erişilebilirlik uyumu için teknik standart olarak WCAG 2.2 ile uyumlu olup kamu kurumları, e-ticaret platformları, bankalar ve finans kuruluşları, hastaneler ve sağlık hizmeti sağlayıcıları, 200.000 veya daha fazla abonesi olan telekomünikasyon şirketleri, seyahat acenteleri, özel ulaşım şirketleri ve Millî Eğitim Bakanlığı (MEB) tarafından yetkilendirilmiş özel okullara uygulanır.

WCAG 2.4.10 — Bölüm Başlıkları bir Seviye AAA ölçütüdür. Bu, genelge kapsamında yer alan kuruluşlar için zorunlu asgari kriterler arasında yer almadığı, çünkü genelgenin A ve AA seviyelerinde uyumu zorunlu kıldığı anlamına gelir. Ancak genelgenin daha geniş amacı, tüm kullanıcılar için anlamlı dijital erişim sağlamaktır ve 2.4.10 gibi AAA seviyesindeki ölçütler, en iyi erişilebilirlik uygulamasını temsil eden kriterler olarak açıkça tanınmaktadır.

Kapsam dâhilindeki kuruluşlar — özellikle kamu kurumları, bankalar, hastaneler ve büyük telekom sağlayıcıları — için WCAG 2.4.10'un uygulanması, düzenleyici asgari gerekliliklerin ötesine geçen bir erişilebilirlik taahhüdünü gösterir. Uygulamada, iyi yapılandırılmış başlık hiyerarşileri, birkaç AA seviyesi başarı ölçütü (örneğin 1.3.1 Bilgi ve İlişkiler ve 2.4.6 Başlıklar ve Etiketler) için de ön koşuldur; bu da, tam AA uyumunu hedefleyen kuruluşların, bu çabanın doğal bir parçası olarak 2.4.10 uyumuna da yaklaşacakları anlamına gelir.

Engelli kullanıcılara yönelik uzmanlaşmış hizmetler veya yaşlı kullanıcılar, bilişsel engeli olan kullanıcılar ya da yardımcı teknoloji kullanıcıları gibi çeşitli vatandaş gruplarına hizmet veren kamu kurumlarının sunduğu dijital hizmetler, 2.4.10'un tam uygulanmasından özellikle fayda sağlayacaktır. Türkiye'nin dijital devlet hizmetlerine (e-devlet) artan vurgusu ve e-ticaretin genişlemesi, sağlam içerik yapısını yalnızca bir erişilebilirlik gerekliliği değil, aynı zamanda bir kullanılabilirlik ve hukuki risk yönetimi önceliği hâline getirmektedir.

Türkiye'de WCAG 2.2 Seviye AAA — 2.4.10 dâhil — sertifikasyonunu gönüllü olarak alan kuruluşlar, kendilerini erişilebilirlik liderleri olarak konumlandırır; bu da marka güvenini destekler, dava riskini azaltır ve Türkiye İstatistik Kurumu (TÜİK) tarafından bildirilen yaklaşık 8,5 milyon engelli bireyi içeren hedeflenebilir kitlelerini genişletir.