Ana içeriğe geç

2.4.6 Başlıklar ve Etiketler

Başlıklar ve form etiketleri, ilişkili oldukları içeriğin veya kontrolün konusunu ya da amacını açıkça tanımlamalıdır.

SC Kodu: 2.4.6 Seviye: AA
URL: https://www.w3.org/TR/WCAG22/#headings-and-labels

Genel Tanım​

WCAG SC 2.4.6, başlıkların ve etiketlerin konuyu veya amacı açık ve özlü bir şekilde tanımlamasını gerektirir. Bu, kullanıcıların, özellikle engelli olanların, içeriği kolayca anlamalarını ve etkili bir şekilde gezinmelerini sağlar. Lütfen, başlıkların ve etiketlerin doğru HTML etiketleri, doğru id ve for öznitelikleri gibi doğru anlamsal bir şekilde uygulanmasını gerektiren 1.3.1 başarı kriterinin aksine, bu başarı kriterinin buna değil, yalnızca başlığın veya etiketlerin içeriğine atıfta bulunduğunu unutmayın. 2.4.6 başarı kriterini karşılarken 1.3.1 başarı kriterini karşılayamamak mümkündür.

Faydalar​

  • Görme Engelli Kullanıcılar İçin Geliştirilmiş Gezinme: Görme engelli kullanıcılar genellikle başlık kısayollarını kullanarak sayfada gezinirler. Net başlıklar ve etiketler, içeriğin yapısını ve düzenini anlamalarına yardımcı olur.
  • Bilişsel Engelliler İçin Daha İyi Anlama: Bilişsel engelli kullanıcılar, net ve özlü başlıklar ve etiketlerden faydalanarak bilgiyi bulmayı ve anlamayı kolaylaştırırlar.

Ana Amaç​

Web içeriğinde yer alan başlıkların ve etiketlerin açıklayıcı ve anlamlı olmasını, içeriğin anlaşılmasını ve gezinmesini kolaylaştırmasını sağlamak.

2.4.6.d En İyi Uygulamalar​

  • Başlıklar ve etiketler için açık ve özlü bir dil kullanın: Başlıklar ve etiketler için açık ve özlü bir dil kullanın.
  • Daha iyi anlaşılabilirlik için ayırt edici bilgileri başlıkların başına yerleştirin.
  • İçeriğin doğru yansıtıldığından emin olun: Başlıkların ve etiketlerin, tanımladıkları içeriği doğru bir şekilde yansıttığından emin olun.
  • Belirsiz veya uzun başlıklar kullanmaktan kaçının: Belirsiz, muğlak veya uzun başlıklar ve etiketler kullanmaktan kaçının.

Örnekler ve Açıklamalar​

Örnek: Örnek Uygulama​

Bir Haber Makalesindeki Açıklayıcı Başlıklar

Nelerden Kaçınılmalı?

HTML/CSS

<!DOCTYPE html >
<html lang = "en" >
  <head>
    <meta charset = "UTF-8" >
    <title> Haber Makalesi </title>​
  </head>​​
  <body>​​
    <h1> Son Dakika Haberleri </h1>
    <h2> Detaylar </h2>​​
    <p> Bugün teknoloji dünyasında önemli bir şey oldu. Birçok insan bu yeni gelişmeden heyecan duyuyor ... </p>
    <h2> Daha Fazla Bilgi </h2>
    Uzmanlar bu değişikliğin sektöre birçok olumlu etki getireceğine inanıyor ...
  </body>​​
</html>​​

Açıklama: "Detaylar" ve "Daha Fazla Bilgi" başlıkları belirsizdir ve içeriği net bir şekilde tanımlamaz. Bu durum, içeriğin yapısını anlamak ve gezinmek için başlıklara güvenen kullanıcılar için kafa karışıklığına neden olabilir.

Ne Yapılmalı?

HTML/CSS

<!DOCTYPE html >
<html lang = "en" >
  <head>
    <meta charset = "UTF-8" >
    <title> Haber Makalesi </title>​
  </head>​​
  <body>​​
    <h1> Son Dakika Haberleri : Teknolojide Büyük Gelişme </h1>
    <h2> Teknolojik Atılımın Ayrıntıları </h2>
    <p>Bugün , sektörü değiştirme potansiyeli taşıyan önemli bir teknolojik atılım duyuruldu ...</p>
    <h2> Gelişim Bilgileri Hakkında Uzman Görüşleri </h2>
    <p>Uzmanlar , bu yeni gelişmenin teknoloji sektörüne birçok olumlu etki getireceğine inanıyor ...</p>
  </body>​​
</html>​​

Açıklama: "Teknolojik Atılım Ayrıntıları" ve "Gelişme Bilgilerine İlişkin Uzman Görüşleri" başlıkları açık ve açıklayıcı olup, kullanıcılara her başlığı takip eden içeriği daha iyi anlama olanağı sunmaktadır.