WCAG 2.4.6: Başlıklar ve Etiketler

Bu Kuralın Anlamı

WCAG 2.4.6 şöyle der: "Başlıklar ve etiketler konu veya amacı tanımlar." Özünde bu ölçüt, bir sayfada görünen herhangi bir başlığın (<h1> ile <h6> arasındaki) veya etiketin (<label>, aria-label, aria-labelledby) tanıttığı içeriğin konusunu ya da tanımladığı kontrolün amacını iletecek kadar açıklayıcı olmasını gerektirir.

Bu ölçüt, başlıkların veya etiketlerin mutlaka var olmasını gerektirmez — bu yükümlülük 1.3.1 (Bilgi ve İlişkiler) ve 2.4.2 (Sayfa Başlığı) gibi diğer başarı ölçütleriyle kapsanır. 2.4.6’nın düzenlediği şey, halihazırda var olan başlık ve etiketlerin kalitesidir: bunlar varsa anlamlı olmalıdır. "Bölüm 1" yazan bir başlık veya "Alan" yazan bir etiket, kullanıcıya devamındaki içerik ya da tanımladığı girdi hakkında hiçbir faydalı bilgi vermez. Buna karşılık "Teslimat Adresiniz" veya "Aylık Bütçe Özeti" gibi ifadeler kullanıcıyı anında yönlendirir.

Bu bağlamda etiketler, yalnızca form kontrolleriyle ilişkilendirilmiş HTML <label> öğesini değil, aynı zamanda her türlü programatik etiketleme mekanizmasını da kapsar: aria-label, aria-labelledby, erişilebilir ad olarak kullanıldığında title özniteliği ve fieldset’ler için legend öğesi. Yardımcı teknolojilere sunulan bu mekanizmaların her biri, ilişkili kontrolün amacını açıkça tanımlamalıdır.

Bir başlık veya etiket o kadar genel, belirsiz veya bilgi içermeyen bir haldeyse ve kullanıcı, çevresindeki bağlamı okumadan bölümün veya kontrolün neyle ilgili olduğunu anlayamıyorsa, bir başarısızlık söz konusudur. Örneğin, üç girdinin de "Buraya girin" şeklinde etiketlendiği bir form bu ölçütte başarısız olur; aynı şekilde her alt bölüm için "Daha Fazla Bilgi" gibi tekrar eden başlıklar kullanan bir sayfa da başarısızdır. Benzer biçimde, DOM’da teknik olarak mevcut olan ancak kullanıcıyı tamamen yanıltan bir başlık — örneğin bir iletişim formu bölümünün "Haberler ve Güncellemeler" başlığıyla etiketlenmesi — de bir başarısızlıktır.

Önemli bir resmi istisna vardır: WCAG 2.4.6 yalnızca başlıklar ve etiketler kullanıldığında geçerlidir. Bir sayfada meşru olarak hiç başlık yoksa (örneğin tek konulu çok kısa bir belge) veya görünür ya da programatik etiketi olmayan bir form kontrolü varsa (ki bu durum 1.3.1 tarafından yakalanır), 2.4.6’nın kendisi uygulanmaz. Ölçütün kapsamı, varlık değil, yalnızca açıklayıcılıkla ilgilidir.

Neden Önemlidir

Açıklayıcı başlıklar ve etiketler son derece geniş bir kitleye fayda sağlar, ancak etkisi, gezinmek için yapıya güvenen engelli kişiler için en belirgindir.

Ekran okuyucu kullanıcıları — başta kör veya ciddi derecede az gören kişiler — sayfalarda genellikle kısayol tuşlarıyla başlıktan başlığa atlayarak gezinir (NVDA/JAWS’ta H, VoiceOver’da Rotor). Başlıklar belirsiz veya yanıltıcı olduğunda bu gezinme stratejisi tamamen çöker. Bir kamu hizmetleri portalına giren ve başlık olarak "Bölüm A", "Bölüm B" ve "Bölüm C" kullanılan kör bir kullanıcı, ihtiyaç duyduğunu bulmak için her bölümün her kelimesini sırayla okumak zorunda kalır; bu da başlıkların sağlaması gereken verimlilik avantajını ortadan kaldırır. Dünya Sağlık Örgütü’ne göre dünya genelinde yaklaşık 2,2 milyar kişinin bir tür görme bozukluğu vardır; bu da önemli bir küresel nüfustur.

Dikkat eksikliği bozuklukları, hafıza bozuklukları veya öğrenme güçlükleri gibi bilişsel engelleri olan kişiler, bilişsel yükü azaltmak için net ve öngörülebilir etiket ve başlıklara büyük ölçüde güvenir. Hem şirket adı hem de iletişim kişisinin adını toplayan bir sayfada bir form alanı yalnızca "Ad" olarak etiketlenmişse, bilişsel engeli olan bir kullanıcı bağlamdan tek başına bu belirsizliği çözemeyebilir; bu da hatalara ve hayal kırıklığına yol açar.

Switch erişimi, göz takibi yazılımı veya Dragon NaturallySpeaking gibi sesli kontrol kullanan motor engelli kullanıcılar, belirli bir form alanını etiket adını söyleyerek etkinleştirebildikleri için açıklayıcı etiketlerden fayda sağlar. Birden fazla alan aynı etiket metnini paylaşıyorsa, sesli kontrol yazılımı bunları birbirinden ayırt edemez ve kullanıcıyı fiziksel olarak yorucu ek adımlar atmaya zorlar.

Gerçek bir senaryoyu düşünün: Ekran okuyucu kullanan bir kişi bir e-ticaret ödeme sayfasını ziyaret ediyor. Sayfada üç adres bölümü var — fatura, teslimat ve hediye alıcısı adresi — ancak her bölüm aynı genel "Adres" başlığını kullanıyor ve her girdi seti aynı etiketleri kullanıyor: "Sokak", "Şehir", "Posta Kodu". Benzersiz ve açıklayıcı başlıklar ve etiketler olmadan ekran okuyucu kullanıcısı hangi alan grubunu doldurduğunu belirleyemez; bu da sipariş hatası riskini ciddi şekilde artırır ve satın alma işlemini tamamen yarıda bırakma olasılığını yükseltir.

Erişilebilirliğin ötesinde, açıklayıcı başlıklar önemli SEO değeri sağlar. Arama motorları, sayfa içeriğini anlamak ve kullanıcı sorgularıyla eşleştirmek için başlık yapısını güçlü bir sinyal olarak kullanır. Anlamlı başlıklar, arama motorlarının sayfaları daha doğru biçimde dizine eklemesine yardımcı olur ve başlıkların önizleme metni olarak gösterildiği arama sonuçlarında tıklanma oranlarını iyileştirebilir. Bu da iş hedeflerini doğrudan erişilebilirlik gereklilikleriyle hizalar.

İlgili Axe-core Kuralları

WCAG 2.4.6, manuel test gerektirir çünkü hiçbir otomatik araç bir başlık veya etiketin açıklayıcı olup olmadığını güvenilir biçimde belirleyemez. Açıklayıcılık, anlamsal ve bağlamsal bir yargıdır — "Ürünler" yazan bir başlık bir sayfada tamamen açıklayıcı olabilirken başka bir sayfada tamamen belirsiz olabilir. Otomatik tarayıcılar başlık ve etiketlerin varlığını veya yokluğunu tespit edebilir, ancak bu başlık ve etiket metinlerinin insan yorumuna ihtiyaç duymadan anlamlı olup olmadığını değerlendiremez.

• Başlık metninin manuel incelenmesi: Axe-core, (örneğin heading-order gibi kurallarla) eksik başlıkları veya hatalı iç içe geçmeyi işaretler, ancak "Buraya Tıklayın" veya "Başlıksız Bölüm" diyen bir başlığı 2.4.6 ihlali olarak işaretleyemez. Bir insan test uzmanı, her başlığı tek başına — ekran okuyucu kullanıcısının başlıklarda gezinirken karşılaşacağı şekilde — okumalı ve altındaki içeriğin konusunu iletip iletmediğini değerlendirmelidir.
• Form etiket metninin manuel incelenmesi: Axe-core’un label kuralı, her form girdisinin ilişkili bir etikete sahip olduğunu doğrular, ancak bu etiket metninin açıklayıcı olup olmadığını değerlendirmez. Yalnızca bir yer tutucu karakter, bir simge karakteri veya "Girdi" gibi genel bir kelime içeren bir label öğesi, otomatik kontrollerden geçer ancak yine de 2.4.6’da başarısız olur. Manuel inceleme, her etiketi okuyup ilişkili kontrolün amacını doğru şekilde tanımladığını doğrulamayı gerektirir.
• aria-label ve aria-labelledby değerlerinin manuel incelenmesi: Benzer şekilde, axe-core’un aria-label-is-accessible kural ailesi ARIA etiketlerinin sözdizimsel olarak geçerli olduğunu ve referans verilen öğelerin var olduğunu doğrular, ancak etiket metninin anlamsal olarak anlamlı veya kontrolün amacını açıklayıcı olup olmadığını değerlendirmez.
• Yinelenen etiket tespiti: Bazı araçlar bir sayfa genelinde yinelenen etiket metnini işaretleyebilir, ancak bu yinelenmenin kasıtlı ve uygun olup olmadığını (bir tablonun farklı satırlarındaki aynı amaca sahip iki alan gibi) ya da birden fazla farklı kontrolün belirsiz bir etiketi paylaştığı gerçek bir açıklayıcılık hatası olup olmadığını belirleyemez. Bu ayrımı yapmak için manuel inceleme gereklidir.

Nasıl Test Edilir

1. Önce otomatik bir tarama çalıştırın: Axe DevTools (tarayıcı uzantısı) veya Chrome DevTools içindeki Lighthouse’u kullanarak, otomatik araçların yakalayabildiği yapısal başlık veya etiket sorunlarını tespit edin; örneğin eksik etiketler, atlanan başlık seviyeleri veya boş başlık öğeleri. Bunlar doğrudan 2.4.6 ihlali olmasa da, manuel inceleme sırasında daha dikkatli incelenmesi gereken alanlara işaret eder. Raporda işaretlenen veya tanımlanan her başlığı ve etiketli kontrolü not edin.
2. Başlık listesini çıkarın: HeadingsMap (Firefox ve Chrome için mevcut) veya WAVE aracı gibi bir tarayıcı uzantısı kullanarak, sayfadaki tüm başlıkların çevreleyen içerikten arındırılmış düz bir listesini oluşturun. Bu listeyi bir içindekiler tablosuymuş gibi okuyun. Şunu sorun: Bir kullanıcı, gövde metnini okumadan yalnızca başlıklardan bu sayfanın yapısını ve ana konularını anlayabilir mi? Herhangi bir başlık tek başına belirsiz veya bilgi içermiyorsa, bu 2.4.6 ihlalidir.
3. NVDA ve Firefox ile test edin: Sayfayı açın ve başlıktan başlığa gitmek için H tuşuna basın. Her başlık duyurusunu dinleyin ve ardından gelen içeriği tanımlayıp tanımlamadığını değerlendirin. Ardından form alanları arasında dolaşmak için F tuşuna basın ve her girdinin etiketi için yapılan duyuruyu dinleyin. Konusunu veya amacını açıkça tanımlamayan her başlığı veya etiketi kaydedin.
4. VoiceOver ve Safari ile test edin (macOS/iOS): Web Rotor’u (VO+U) kullanarak Başlıklar listesini ve Form Kontrolleri listesini açın. Her listede gezinin ve her öğenin açıklayıcılığını sayfa bağlamından bağımsız olarak değerlendirin. iOS’ta Rotor’da başlıklar arasında gezinmek için üç parmakla kaydırma hareketini kullanın.
5. JAWS ve Chrome ile test edin: Başlıklar arasında gezinmek için H tuşuna basın ve form kontrolleri arasında geçiş yapmak için Forms Mode (F) kullanın. Tüm başlıkları düz bir listede görmek için JAWS Başlık Listesi iletişim kutusunu (Insert+F6) kullanın; bu, ekran okuyucu kullanıcısının sayfa yapısını tarama biçimini taklit eder.
6. Form etiketlerini tek başına değerlendirin: Her form kontrolü için, tüm çevreleyen bağlamı kapatın veya görmezden gelin ve yalnızca programatik etiketi (görünür etiket metni, aria-label veya aria-labelledby hedefi) okuyun. Yalnızca etiketin, hangi bilginin girilmesi gerektiğini veya kontrolün hangi işlemi gerçekleştirdiğini anlamak için yeterli olduğundan emin olun.
7. Yinelenen başlık veya etiket metnini kontrol edin: Sayfada yinelenen başlık metnini arayın (örneğin, birden fazla "Daha Fazla Oku" başlığı veya birden fazla "Daha Fazla Bilgi Edinin" bölümü). Aynı metin, farklı konulara veya kontrollere atıfta bulunan başlıklar veya etiketler için kullanılıyorsa, bu 2.4.6’nın bir başarısızlığıdır.

Nasıl Düzeltilir

Genel Bölüm Başlıkları — Hatalı

<section>
  <h2>Section 1</h2>
  <p>We offer a range of enterprise software solutions tailored for logistics companies.</p>
</section>
<section>
  <h2>Section 2</h2>
  <p>Our pricing is flexible and based on the number of active users.</p>
</section>

Genel Bölüm Başlıkları — Doğru

<!-- Each heading now describes the actual topic of its section,
     enabling screen reader users to jump directly to what they need -->
<section>
  <h2>Enterprise Logistics Software Solutions</h2>
  <p>We offer a range of enterprise software solutions tailored for logistics companies.</p>
</section>
<section>
  <h2>Flexible User-Based Pricing</h2>
  <p>Our pricing is flexible and based on the number of active users.</p>
</section>

Belirsiz Form Etiketleri — Hatalı

<!-- A checkout form with two address blocks, both using identical labels -->
<fieldset>
  <legend>Address</legend>
  <label for='street1'>Street</label>
  <input type='text' id='street1'>
  <label for='city1'>City</label>
  <input type='text' id='city1'>
</fieldset>
<fieldset>
  <legend>Address</legend>
  <label for='street2'>Street</label>
  <input type='text' id='street2'>
  <label for='city2'>City</label>
  <input type='text' id='city2'>
</fieldset>

Belirsiz Form Etiketleri — Doğru

<!-- Legends now distinguish the two fieldsets; labels remain short because
     the legend provides the distinguishing context programmatically -->
<fieldset>
  <legend>Billing Address</legend>
  <label for='billing-street'>Street</label>
  <input type='text' id='billing-street'>
  <label for='billing-city'>City</label>
  <input type='text' id='billing-city'>
</fieldset>
<fieldset>
  <legend>Shipping Address</legend>
  <label for='shipping-street'>Street</label>
  <input type='text' id='shipping-street'>
  <label for='shipping-city'>City</label>
  <input type='text' id='shipping-city'>
</fieldset>

Simge Düğmede Açıklayıcı Olmayan ARIA Etiketi — Hatalı

<!-- aria-label provides a label but it does not describe the button's purpose -->
<button aria-label='button'>
  <svg aria-hidden='true' focusable='false'><!-- search icon --></svg>
</button>

Simge Düğmede Açıklayıcı Olmayan ARIA Etiketi — Doğru

<!-- aria-label now clearly communicates what activating the button will do -->
<button aria-label='Search products'>
  <svg aria-hidden='true' focusable='false'><!-- search icon --></svg>
</button>

Yinelenen "Read More" Başlıkları veya Bağlantıları — Hatalı

<article>
  <h3>Latest News</h3>
  <p>Istanbul metro expands to three new districts...</p>
</article>
<article>
  <h3>Latest News</h3>
  <p>New regulations affect e-commerce platforms...</p>
</article>

Yinelenen "Read More" Başlıkları veya Bağlantıları — Doğru

<!-- Each article has a unique, descriptive heading that identifies its topic -->
<article>
  <h3>Istanbul Metro Expands to Three New Districts</h3>
  <p>Istanbul metro expands to three new districts...</p>
</article>
<article>
  <h3>New Regulations Affect E-Commerce Platforms</h3>
  <p>New regulations affect e-commerce platforms...</p>
</article>

Yaygın Hatalar

• "Adım 1", "Adım 2", "Bölüm A" gibi konumsal veya sıralı başlıklar kullanmak ve bunlara açıklayıcı metin eklememek: Bu başlıklar kullanıcıya yalnızca bir dizide nerede olduğunu söyler, bölümün neyle ilgili olduğunu söylemez. Sıra göstergelerini her zaman açıklayıcı bir isim tamlamasıyla birleştirin; örneğin "Adım 2: E-posta Adresinizi Doğrulayın".
• Listeleme sayfasındaki tüm kart veya makale bileşenlerine aynı başlık metnini vermek (örneğin her ürün kartında yalnızca "Ürün" yazan bir <h3> kullanmak): Her kart başlığı, o belirli ürünü, blog yazısını veya öğeyi benzersiz biçimde tanımlamalıdır.
• Bir form girdisi için erişilebilir etiket olarak yer tutucu metin kullanmak (placeholder özniteliğine güvenip <label> öğesi veya aria-label kullanmamak): Yer tutucular giriş yapıldığında kaybolur ve tüm ekran okuyucular tarafından erişilebilir ad olarak güvenilir biçimde duyurulmaz. Bir yer tutucu olsa bile, ayrı bir açıklayıcı etiket gereklidir.
• Bir aria-label yazarak yalnızca öğe türünü tekrar etmek ve amacını belirtmemek; örneğin bir metin alanında aria-label='input' veya bir düğmede aria-label='button' kullanmak: Etiket, kontrolün ne yaptığını veya hangi değeri topladığını tanımlamalıdır; ne tür bir öğe olduğunu değil.
• Form kontrolü için tek etiket olarak araç ipucu metni veya title özniteliğini kullanmak ve bunun 2.4.6’yı karşıladığını varsaymak: title tabanlı etiketler genellikle yalnızca klavye kullanan kullanıcılar için erişilebilir değildir ve ekran okuyucular tarafından tutarlı biçimde duyurulmaz. Bunun yerine görünür <label> öğelerine veya aria-label’a güvenin.
• Bir sayfada birden fazla arama kapsamı varken arama girdilerini yalnızca "Ara" olarak etiketlemek (örneğin site genelinde arama ve bir veri tablosu içinde arama): İki kontrol farklı aramalar gerçekleştiriyorsa, her etiket kapsamı belirtmelidir; örneğin "Tüm ürünlerde ara" ve "Sipariş geçmişinde ara".
• Bir modal iletişim kutusunun başlığına, sayfanın ana başlığıyla aynı metni uygulamak: Modal başlıkları, sayfa başlığını devralmak yerine, iletişim kutusunun belirli görevini veya içeriğini tanımlamalıdır (örneğin "İptalinizi Onaylayın"); aksi halde, iletişim kutusunda gezinirken ekran okuyucu kullanıcıları için kafa karıştırıcı olur.
• Radyo düğmesi veya onay kutusu grupları için açıklayıcı bir <legend> atlamak ve yalnızca bireysel seçenek etiketleri sağlamak: <legend>, her bir etiketi anlamlı kılan temel bağlamı sağlar. "Evet" ve "Hayır" gibi seçenek etiketleri, "Şartlar ve koşulları kabul ediyor musunuz?" gibi bir legend olmadan tek başına bilgi vermez.
• Görsel tasarım gerekçesiyle DOM’daki başlık metnini kısaltmak (örneğin, tam metnin bitişik görsel öğelerde yer aldığı, yalnızca bir simge veya tek kelime içeren bir başlık kullanmak): Programatik başlık tamamen açıklayıcı olmalıdır; çünkü ekran okuyucu kullanıcıları, çevredeki görsel yerleşimi görmeden yalnızca bu metni duyar.
• Bir etiketin gören kullanıcılar için görünür olmasının, bu etiketin tüm kullanıcılar için yeterince açıklayıcı olduğu anlamına geldiğini varsaymak: Konumsal konuma dayanan bir etiket (örneğin, anlamı çevresindeki hücrelerle ilişkisini görmeye bağlı olan özel bir ızgaradaki sütun başlığı) görsel olarak açık olabilir, ancak aynı bilgiyi programatik olarak aktaramayabilir. Erişilebilir adın tek başına yeterli olduğundan her zaman emin olun.

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 çok çeşitli kamu ve özel sektör kuruluşları için zorunlu dijital erişilebilirlik yükümlülükleri getirir. Genelge, uyum için teknik standart olarak WCAG 2.1 Seviye AA’ya açıkça atıfta bulunur ve WCAG 2.2 kapsamındaki Seviye AA gereklilikleri — Seviye AA düzeyinde WCAG 2.1 ile geriye dönük uyumludur — Aile ve Sosyal Hizmetler Bakanlığı tarafından verilen resmi Erişilebilirlik Logosunu almak isteyen kuruluşlar için güçlü biçimde teşvik edilir ve zorunlu tutulur.

WCAG 2.4.6, Seviye AA ölçütüdür; bu da kapsamdaki kuruluşların tam uyum sağlamak için ele alması gereken konuların tam merkezinde yer aldığı anlamına gelir. Cumhurbaşkanlığı Genelgesi kapsamında olan kuruluş türleri şunlardır: kamu kurumları ve devlet daireleri; 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 işletmecileri; seyahat acenteleri; özel ulaşım şirketleri ve Millî Eğitim Bakanlığı tarafından yetkilendirilmiş özel okullar.

Bu kuruluşlar için açıklayıcı başlıklar ve etiketler sağlamamak somut bir düzenleyici risk taşır. Belirsiz bölüm başlıklarına sahip bir kamu portalı, engelli vatandaşların kamu hizmetlerine erişimini engeller ve bu durum, Genelge’nin eşit erişimi sağlama yönündeki açık hedefiyle doğrudan çelişir. Ödeme akışında belirsiz form etiketleri bulunan bir e-ticaret sitesi, görme veya bilişsel engeli olan kullanıcıların alışverişlerini tamamlamasını engelleyebilir; bu da Genelge’nin ortadan kaldırmayı amaçladığı ekonomik katılım önünde bir engel oluşturur.

Erişilebilirlik Logosu almak isteyen kuruluşlar, bir erişilebilirlik denetimi yoluyla uyumu göstermek zorundadır ve 2.4.6, denetçilerin manuel olarak değerlendireceği ölçütler arasındadır. Bu ölçüt insan yargısı gerektirdiğinden — otomatik araçlar açıklayıcılığı değerlendiremez — kuruluşlar, tüm başlık ve form etiketlerinin yapılandırılmış manuel incelemesini erişilebilirlik denetim süreçlerinin standart bir parçası haline getirmelidir. Bu incelemeyi, içerik değiştikçe sürekli uyumu sürdürmenin en etkili yolu olarak, tek seferlik bir denetim görevi olarak görmek yerine içerik yönetim iş akışlarına ve tasarım sistemlerine yerleştirmek gerekir.