Bu kural ne anlama geliyor

WCAG 2.4.6, başlıklar ve etiketler kullanıldığında bunların açıklayıcı olması — bölümün konusunu veya form denetiminin amacını açıkça belirtmesi — gerektiğini soyler. Bu kriter başlıkların veya etiketlerin varlığını gerektirmez (bu diğer kriterlerle kapsanır), ancak var olduklarinda anlamlı olmalidilar.

"Bölüm 1" gibi bir başlık veya "Alan" gibi bir etiket konu veya amacı tanimlamaz. Başlıklar kendilerini izleyen içeriği ozetlemeli ve etiketler kullanıcılara form alanında tam olarak hangi bilginin bekledigini soylemlidir.

Neden önemlidir

Ekran okuyucu kullanıcıları sayfa yapısını hızla taramak ve ilgili bölümleri bulmak için başlıklar üzerinden gezinir. Başlıklar belirsiz veya genel olduğunda kullanıcılar ihtiyaç duydukları içeriği verimli bir şekilde bulamaz. Benzer şekilde, belirsiz form etiketleri kullanıcıları hangi bilginin gerektiği konusunda tahminde bulunmaya zorlayarak hatalara ve hayal kırıklığına yol açar.

Açıklayıcı başlıklar ve etiketler ayrıca bilişsel engelli kullanıcıların sayfa organizasyonunu anlamasına yardımcı olur, ekran büyüteçleri kullanan ve sayfanın bir seferde yalnızca küçük bir bölümünü gören az gören kullanıcıları destekler ve herkes için genel kullanılabilirliği arttırır.

İlgili axe-core kuralları

page-has-heading-öne — Sayfanın veya en az bir çerçevesinin birinci düzey başlık içermesini doğrular.

Nasıl test edilir

Bir ekran okuyucu başlık gezinmesi (örneğin NVDA: H tuşu) kullanarak tüm başlıkları gözden geçirin. Her başlığın bölüm içeriğini tanımladığını doğrulayın.
Tüm form etiketlerini inceleyerek beklenen girdiyi açıkça tanımladıklarını onaylayın.
axe-core çalıştırarak page-has-heading-öne ve boş başlık ihlallerini kontrol edin.
Başlık düzeylerinin seviye atlamadan (h1 > h2 > h3) mantıklı bir hiyerarşi oluşturduğunu kontrol edin.

Basliklarin yalnızca görsel stil için kullanilmadigini doğrulayın — yapısal olmayan vurgu için başlık öğeleri yerine CSS kullanın.

Nasıl düzeltilir

Bölüm içeriğini ozetleyen başlıklar ve beklenen girdiyi açıkça tanımlayan etiketler yazın.

Açıklayıcı başlıklar

<!-- Yanlış: Genel veya belirsiz başlıklar -->
<h1>Hoş Geldiniz</h1>
<h2>Bölüm 1</h2>
<h2>Bölüm 2</h2>
<h2>Daha Fazla Bilgi</h2>

<!-- Doğru: Açıklayıcı, konuya özel başlıklar -->
<h1>WCAG 2.4.6 Başlıklar ve Etiketler</h1>
<h2>Bu Kural Ne Anlama Geliyor</h2>
<h2>Etkili Başlıklar Nasıl Yazilir</h2>
<h2>Form Etiketi En İyi Uygulamaları</h2>

Açıklayıcı form etiketleri

<!-- Yanlış: Belirsiz etiketler -->
<label for="alan1">Girdi</label>
<input id="alan1" type="text">

<label for="alan2">Değer girin</label>
<input id="alan2" type="text">

<!-- Doğru: Açıklayıcı etiketler -->
<label for="eposta">E-posta adresi</label>
<input id="eposta" type="email" autocomplete="email">

<label for="telefon">Telefon numarası (isteğe bağlı)</label>
<input id="telefon" type="tel" autocomplete="tel">

Fieldset ve legend ile grup etiketleri

<fieldset>
  <legend>Bildirim tercihleri</legend>
  <label>
    <input type="checkbox" name="bildirim" value="eposta">
    E-posta bildirimleri
  </label>
  <label>
    <input type="checkbox" name="bildirim" value="sms">
    SMS bildirimleri
  </label>
</fieldset>

Sık yapılan hatalar

"Giriş", "Bölüm 1" veya "Ayrintilar" gibi gerçek konuyu tanimlamayan başlıklar kullanmak.
Aynı sayfada farklı bölümler için aynı başlıkları kullanmak.
Hangi verinin beklendigi belirtilmeden "Girdi", "Alan" veya "Veri girin" diyen form etiketleri.
Tek etiket olarak yer tutucu metin kullanmak — yer tutucular girişte kaybolur ve tüm ekran okuyucular tarafından güvenilir şekilde okunmaz.
Başlık düzeylerini atlamak (örneğin h1'den h3'e geçmek), bu da mantıklı belge anahatini bozar.
Başlık öğelerini yapısal organizasyon yerine yalnızca görsel stil için kullanmak.