Anlamsal Bölüm Etiketleri

Önceki konu belgenin iskeletini kurdu: başlıklar, metin, listeler, bağlantılar, tablolar. Bu bildirimlerin hiçbiri belgenin bölümlerini adlandırmıyor. Gezinme nerede bitiyor, ana içerik nerede başlıyor, alt bilgi hangisi?

Bu ders o soruyu yanıtlayan ögeleri ele alır. Ögelerin görünüme etkisi yok denecek kadar azdır; kazandırdıkları şey, belgeye bir üst düzey harita eklemektir.

Bölüm Ögesi Ne Bildirir

Bir belgenin okuyucusu ekranı görüyorsa bölümleri düzenden çıkarır: üstteki şerit başlık, yandaki sütun gezinme, ortadaki alan içeriktir. Bu çıkarım görsel ipuçlarına dayanır ve belgenin kendisinde bildirilmemiştir.

Anlamsal bölüm ögeleri bu çıkarımı bildirime çevirir. Belgeye “burası gezinme” denildiğinde o bilgi görsel olmayan araçlara da açılır: ekran okuyucu kullanıcıları bölümden bölüme atlayabilir, okuma kipleri ana içeriği ayırabilir, dizinleyiciler gezinme bağlantılarını içerik bağlantılarından ayırabilir.

Bu bilginin taşındığı yapıya erişilebilirlik ağacı (accessibility tree) denir. Belge Nesne Modeli dersindeki ağaçtan türetilir ve her ögeyi bir rol, bir ad ve bir durum üçlüsüyle karşılar. Bölüm ögeleri bu ağaçta yer imi (landmark) rolleri üretir.

Yer İmi Rolleri

Karşılıklar tanımlıdır ve bir bölümü koşullar. Aşağıdaki betik kuralları uygular.

// alanlar.mjs — bolum ogelerinin yer imi rollerine karsiligi
const ROL = {
  header: "banner",       // yalnizca belgenin en ust duzeyinde
  nav: "navigation",
  main: "main",
  aside: "complementary",
  footer: "contentinfo",  // yalnizca belgenin en ust duzeyinde
  form: "form",           // yalnizca erisilebilir adi varsa
  section: "region",      // yalnizca erisilebilir adi varsa
  article: "article",
  div: null,
};

const belge = [
  { ad: "header", derinlik: 1 },
  { ad: "nav", derinlik: 2, etiket: "Ana gezinme" },
  { ad: "main", derinlik: 1 },
  { ad: "section", derinlik: 2, etiket: "Günlük ölçümler" },
  { ad: "section", derinlik: 2 },
  { ad: "aside", derinlik: 2, etiket: "İstasyon künyesi" },
  { ad: "div", derinlik: 2 },
  { ad: "footer", derinlik: 1 },
  { ad: "footer", derinlik: 3 },
];

for (const oge of belge) {
  let rol = ROL[oge.ad];
  if ((oge.ad === "header" || oge.ad === "footer") && oge.derinlik > 1) rol = null;
  if ((oge.ad === "section" || oge.ad === "form") && !oge.etiket) rol = null;
  const ad = oge.etiket ? ' ("' + oge.etiket + '")' : "";
  console.log(("  ".repeat(oge.derinlik - 1) + oge.ad + ad).padEnd(34), rol ?? "— yer imi degil");
}

console.log("--- yer imi listesi ---");
const yerImleri = belge
  .map((oge) => {
    let rol = ROL[oge.ad];
    if ((oge.ad === "header" || oge.ad === "footer") && oge.derinlik > 1) rol = null;
    if ((oge.ad === "section" || oge.ad === "form") && !oge.etiket) rol = null;
    return rol ? rol + (oge.etiket ? ": " + oge.etiket : "") : null;
  })
  .filter(Boolean);
console.log(yerImleri.join("\n"));

header                             banner
  nav ("Ana gezinme")              navigation
main                               main
  section ("Günlük ölçümler")      region
  section                          — yer imi degil
  aside ("İstasyon künyesi")       complementary
  div                              — yer imi degil
footer                             contentinfo
    footer                         — yer imi degil
--- yer imi listesi ---
banner
navigation: Ana gezinme
main
region: Günlük ölçümler
complementary: İstasyon künyesi
contentinfo

Çıktının son bölümü, ekran okuyucu kullanıcısının gördüğü listedir. Belgenin haritasıdır ve kullanıcı buradan doğrudan bir bölüme atlayabilir.

Üç koşul dikkat gerektirir. header ve footer ögeleri yalnızca belgenin en üst düzeyinde yer imi üretir; bir makalenin içindeki alt bilgi bir yer imi değildir, o makalenin alt bilgisidir. section ögesi ancak bir adı olduğunda yer imi üretir; adsız bir bölüm listede görünmez. div hiçbir koşulda yer imi üretmez.

Betikteki aside karşılığı, ögenin belgenin ana akışında durduğu durumu yansıtır. Bir makalenin ya da bölümün içine yuvalanmış aside için eşleme koşulludur: o konumda yer imi sayılması erişilebilir bir ad taşımasına bağlıdır. Kural, section için yukarıda verilen koşulun aynısıdır ve nedeni de aynıdır — adsız bir bölge, listede ayırt edilemeyeceği için listeye alınmaz.

Ögeler

header bir tanıtım bloğudur: başlık, alt başlık, künye. En üst düzeyde belgenin tanıtımıdır; bir makalenin içinde o makalenin tanıtımıdır.

nav gezinme bağlantılarını taşır. Belgedeki her bağlantı grubunun nav olması gerekmez — öge, belgenin birincil gezinme bloklarını işaretler. Bir paragrafın içindeki bağlantılar gezinme değildir.

main belgenin ana içeriğidir ve belgede bir kez bulunur. İçinde gezinme, alt bilgi veya site geneline yayılan tekrar eden içerik bulunmaz; yalnızca o belgeye özgü içerik bulunur.

aside ana akışla dolaylı ilişkili içeriktir: yan not, künye kutusu, ilgili bağlantılar. Ölçüt, çıkarıldığında ana içeriğin anlamını yitirmemesidir.

footer bir bölümün kapanış bilgisidir: yazar, telif, ilgili belgeler. En üst düzeyde belgenin, bir makalenin içinde o makalenin alt bilgisidir.

Bölüme Ad Vermek

Aynı türden birden çok yer imi varsa —iki gezinme bloğu gibi— hangisinin hangisi olduğu adla ayrılır. İki yol vardır.

<nav aria-label="Ana gezinme">
  <ul><li><a href="/">Ağ dizini</a></li></ul>
</nav>

<nav aria-labelledby="istasyon-gezinme">
  <h2 id="istasyon-gezinme">İstasyon bölümleri</h2>
  <ul><li><a href="#olcumler">Ölçümler</a></li></ul>
</nav>

aria-label adı doğrudan yazar; belgede görünmez. aria-labelledby adı belgede zaten bulunan bir ögenin metninden alır ve bu yeğlenir: ad ile görünen başlık ayrışmaz.

Ad yazarken rol adı tekrarlanmaz. aria-label="Ana gezinme menüsü" yazımı ekran okuyucuda “ana gezinme menüsü gezinme” biçiminde duyurulur; rol zaten ögeden gelir.

Atlama Bağlantısı

Klavyeyle gezen bir kullanıcı, her sayfada gezinme bağlantılarının tamamını geçerek ana içeriğe varır. Bunu kısaltan yapı, belgenin ilk odaklanabilir ögesi olarak yazılan bir bağlantıdır.

<body>
  <a href="#ana-icerik" class="atlama">Ana içeriğe atla</a>
  <header>
    <nav aria-label="Ağ genelinde gezinme">
      <ul><li><a href="/istasyonlar/">İstasyonlar</a></li></ul>
    </nav>
  </header>
  <main id="ana-icerik">
    <h1>Kuzey Yamaç Ölçüm İstasyonu</h1>
  </main>
</body>

Bağlantı çoğunlukla sunum katmanında gizlenir ve yalnızca odaklandığında görünür duruma gelir. Hedefin kimliği, main ögesinin kendisinde bulunur.

Anlamsız Kapsayıcı Ne Zaman

div ve span ögeleri hiçbir anlam bildirmez. Varlıklarının gerekçesi, her gruplamanın anlamlı olmamasıdır: bir kutuyu ortalamak, bir arka plan vermek, bir sunum grubu kurmak için ögeye ihtiyaç vardır ve bu ögenin belgeye yanlış bir bildirim eklememesi gerekir.

Seçim ölçütü şudur: bu grup, belgenin yapısı hakkında bir şey söylüyor mu? Söylüyorsa anlamsal öge, söylemiyorsa div kullanılır. Yalnızca sunum için section yazmak, yer imi listesine anlamsız bir giriş ekler — ya da adsız olduğu için hiçbir şey eklemez ve öge gereksiz kalır.

div blok düzeyinde, span metin akışı içinde gruplar. İkisi de sunum katmanının tutamağıdır.

İstasyon Belgesinde

<body>
  <a href="#ana-icerik">Ana içeriğe atla</a>

  <header>
    <p>Ölçüm Ağı</p>
    <nav aria-label="Ağ genelinde gezinme">
      <ul>
        <li><a href="/istasyonlar/">İstasyonlar</a></li>
        <li><a href="/yontem.html">Ölçüm yöntemi</a></li>
      </ul>
    </nav>
  </header>

  <main id="ana-icerik">
    <h1>Kuzey Yamaç Ölçüm İstasyonu</h1>
    <p>Deniz seviyesinden 1840 metre yükseklikte kurulu otomatik ölçüm istasyonu.</p>

    <section aria-labelledby="olculen">
      <h2 id="olculen">Ölçülen Büyüklükler</h2>
      <ul>
        <li>Sıcaklık</li>
        <li>Bağıl nem</li>
      </ul>
    </section>

    <aside aria-labelledby="kunye">
      <h2 id="kunye">İstasyon Künyesi</h2>
      <dl>
        <dt>Kuruluş yüksekliği</dt><dd>1840 m</dd>
        <dt>Ölçüm aralığı</dt><dd>10 dakika</dd>
      </dl>
    </aside>
  </main>

  <footer>
    <p>Ölçüm Ağı Çalışma Grubu</p>
  </footer>
</body>

Belgenin yer imi listesi bu noktada beş girişlidir ve bu liste, önceki konuda kurulan başlık ana hattından ayrı bir gezinme düzlemidir. İkisi birbirini tamamlar: yer imleri belgenin kaba bölümlerini, başlıklar bölümlerin içindeki hiyerarşiyi verir.

Özet

• Anlamsal bölüm ögeleri, görsel düzenden çıkarılan bölüm bilgisini belgede bildirime çevirir ve erişilebilirlik ağacında yer imi rolleri üretir.
• header ve footer yalnızca belgenin en üst düzeyinde yer imi üretir; section ancak adı varsa üretir; div hiçbir koşulda üretmez.
• main belgede bir kez bulunur ve yalnızca o belgeye özgü içeriği taşır.
• Aynı türden birden çok yer imi adla ayrılır; adın belgede görünen bir başlıktan alınması yeğlenir ve ada rol adı yazılmaz.
• Anlam bildirmeyen gruplamalar için div ve span kullanılır; sunum amacıyla anlamsal öge yazmak belgeye yanlış bildirim ekler.

Sonraki Adım

Bu ders section ögesini adlandırılmış bir bölüm olarak kullandı ve article ögesini yer imi tablosunda gösterdi ama ayrımı açmadı. İkisi arasındaki seçim en sık yanlış yapılan anlamsal karardır. Sonraki ders bu ayrımı tanımlar ve bir bölümün kendi başına anlamlı olup olmadığını sınayan ölçütü verir.