Ana içeriğe geç

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

İçerik, gezinmeyi ve anlamayı kolaylaştırmak için bölüm başlıklarıyla düzenlenmelidir.

SC Kodu: 2.4.10 Seviye: AAA
URL: https://www.w3.org/TR/WCAG22/#section-headings

Genel Tanım​

WCAG 2.4.10, içerik bölümlerinin tanımlayıcı ve açıklayıcı başlıklarla organize edilmesini gerektirir. Başlıklar, içeriğin yapısını anlamayı ve bölümler arasında gezinmeyi kolaylaştırmalıdır.

Faydalar​

  • Kolay Gezinme: Kullanıcılar başlıklar arasında hızlı geçiş yapabilir.
  • Anlaşılabilirlik: İçerik yapısı netleşir.
  • Ekran Okuyucu Uyumu: Başlık listesi üzerinden etkili navigasyon sağlanır.

Kapsam

  • Blog yazıları
  • Dokümantasyon sayfaları
  • Uzun formlar
  • Akademik ve teknik içerikler

Ana Amaç​

Bu kriterin temel amacı, özellikle ekran okuyucu kullanıcılarının, bilişsel engelli bireylerin ve uzun içeriklerde gezinen kullanıcıların sayfa yapısını hızlı ve doğru şekilde anlayabilmesini sağlamaktır.

Gereksinimler

  • İçerik bölümleri uygun başlıklarla tanımlanmalıdır
  • Başlıklar içeriği doğru şekilde özetlemelidir
  • Başlık yapısı mantıklı ve hiyerarşik olmalıdır

En İyi Uygulamalar​

  • HTML başlık etiketlerini (h1–h6) doğru sırada kullanın.
  • Her sayfada tek bir ana başlık (h1) kullanın.
  • Başlıkları sadece görsel stil için değil, anlamsal yapı için kullanın.
  • “Başlık 1”, “Bölüm 2” gibi anlamsız ifadelerden kaçının.

Örnekler ve Açıklamalar​

Örnek: Uygun Başlık Yapısı​

HTML/CSS

<h1>WCAG 2.4.10 Bölüm Başlıkları</h1>
<h2>Amaç</h2>
<p>Bu kriterin amacı...</p>
<h2>Gereksinimler</h2>
<p>İçerik bölümleri...</p>
<h3>Başlık Hiyerarşisi</h3>
<p>Başlıklar mantıklı sırada olmalıdır.</p>

Bu yapı hem görsel hem de programatik olarak doğru bir hiyerarşi sağlar.

Nelerden Kaçınılmalı?

HTML/CSS

<div class="big-title">Amaç</div>
<div class="big-title">Gereksinimler</div>

Açıklama:

Bu örnekte başlıklar yalnızca görsel olarak vurgulanmıştır. Anlamsal başlık etiketleri kullanılmadığı için ekran okuyucu kullanıcıları sayfa yapısını anlayamaz. Bu durum WCAG 2.4.10 kriterini karşılamaz.

Ne Yapılmalı?

HTML/CSS

<h2>Amaç</h2>
<h2>Gereksinimler</h2>

Açıklama:

Bu kullanım, içeriği anlamsal olarak yapılandırır ve yardımcı teknolojilerle uyumludur. WCAG 2.4.10 kriterini karşılar.