Şekil ve Açıklama

Görsel belgeye girdi ama bağlamı eksik: hangi ölçüm noktasını gösterdiği, ne zaman çekildiği, hangi metne ait olduğu bildirilmemiş durumda. Alternatif metin bu bilgiyi taşımaz — o, görseli göremeyen okuyucu içindir; bağlam bilgisi ise her okuyucu içindir.

figure ögesi bu ayrımı kurar: içeriği ve açıklamasını tek bir birim olarak bağlar.

Şekil Ögesi

figure, ana akıştan kopabilen ama akışta anılan bir içerik birimidir. Ölçüt şudur: bu içerik metnin ortasından alınıp sayfanın kenarına, bir eke ya da bir sonraki sayfaya taşınsa, metin okunmayı sürdürür mü?

Sürdürüyorsa şekildir. Metnin akışını kesen ve yerinden ayrılamayan içerik şekil değildir.

figcaption şeklin açıklamasıdır ve figure ögesinin ilk veya son çocuğu olarak yazılır. Bir şekilde en çok bir açıklama bulunur.

<figure>
  <img src="konum.png" width="1440" height="960"
       alt="İstasyon, kuzeye bakan yamacın orta kesiminde,
            vadi tabanından 400 metre yukarıda.">
  <figcaption>Şekil 1. İstasyonun yamaç üzerindeki konumu ve vadi tabanına
    göre yüksekliği.</figcaption>
</figure>

Açıklama ile Alternatif Metin Ayrımı

İki metin aynı görsele bağlıdır ve farklı işler görür.

alt, görselin yerine geçer. Görseli göremeyen okuyucuya, gören okuyucunun görselden aldığı bilgiyi verir. Gören okuyucuya sunulmaz.

figcaption, görseli çevreleyen bilgidir: adı, numarası, kaynağı, tarihi, yorumu. Her okuyucuya sunulur.

İkisinin aynı metni taşıması bir kusurdur: ekran okuyucu kullanıcısı aynı cümleyi iki kez duyar. Aynı bilgiyi iki kez yazmak yerine, açıklamanın içerdiği bilgi alternatif metinden çıkarılır.

Açıklama görselin bilgisini eksiksiz veriyorsa —bir çizelgenin değerlerini yazan bir açıklama gibi— alternatif metin boş bırakılabilir. Bu, alt="" yazımının süsleyici olmayan bir kullanımıdır: görselin bilgisi belgede zaten metin olarak vardır.

Erişilebilir Ad Hesabı

Önceki derste ögelerin erişilebilirlik ağacında bir rol, bir ad ve bir durum ile karşılandığı belirtilmişti. Adın hangi kaynaktan alınacağı sıralı bir kuralla belirlenir ve figcaption bu sıranın bir halkasıdır.

// ad.mjs — erisilebilir ad hesabinin sirasi
const YEREL_KAYNAK = {
  img: "alt",
  figure: "figcaption",
  table: "caption",
  fieldset: "legend",
};

function erisilebilirAd(oge, belge) {
  if (oge["aria-labelledby"]) {
    const parcalar = oge["aria-labelledby"]
      .split(/\s+/)
      .map((kimlik) => belge[kimlik] ?? "")
      .filter(Boolean);
    if (parcalar.length > 0) return ["aria-labelledby", parcalar.join(" ")];
  }
  if (oge["aria-label"]) return ["aria-label", oge["aria-label"]];
  const alan = YEREL_KAYNAK[oge.ad];
  if (alan && oge[alan] !== undefined && oge[alan] !== "") return [alan, oge[alan]];
  if (oge.title) return ["title", oge.title];
  return ["yok", ""];
}

const belge = { "olcum-basligi": "Kuzey Yamaç", "olcum-tarihi": "12 Mart" };

const ogeler = [
  { ad: "img", alt: "Yamaçtaki ölçüm direği" },
  { ad: "img", alt: "" },
  { ad: "img", title: "Direk" },
  { ad: "figure", figcaption: "Şekil 1: Direğin konumu" },
  { ad: "figure", figcaption: "Şekil 1: Direğin konumu", "aria-label": "Direk konumu" },
  { ad: "figure", "aria-labelledby": "olcum-basligi olcum-tarihi", figcaption: "Şekil 1" },
  { ad: "table", caption: "Günlük ölçümler" },
];

for (const oge of ogeler) {
  const [kaynak, ad] = erisilebilirAd(oge, belge);
  console.log(oge.ad.padEnd(8), kaynak.padEnd(16), JSON.stringify(ad));
}

img      alt              "Yamaçtaki ölçüm direği"
img      yok              ""
img      title            "Direk"
figure   figcaption       "Şekil 1: Direğin konumu"
figure   aria-label       "Direk konumu"
figure   aria-labelledby  "Kuzey Yamaç 12 Mart"
table    caption          "Günlük ölçümler"

Sıra dört basamaklıdır ve üstteki kaynak alttakini bastırır: aria-labelledby, sonra aria-label, sonra ögenin yerel kaynağı, en sonda title.

Üç satır dikkat çekicidir. İkinci satır boş alt değerinin adı silmesini gösterir; bu, görselin duyurulmamasının düzeneğidir. Üçüncü satır title özniteliğinin son çare olduğunu: alt yazılmadığında title ada dönüşür, ancak bu bir çözüm değil bir yedektir. Beşinci ve altıncı satırlar, aria-label ve aria-labelledby özniteliklerinin belgede görünen açıklamayı bastırdığını gösterir — ad ile görünen metin ayrışır ve bu, ayrılmayı gerektiren bir gerekçe yoksa kaçınılması gereken bir durumdur.

Tablo satırı, önceki konudaki caption ögesinin aynı düzeneğin parçası olduğunu gösterir: farklı ögelerin yerel kaynakları farklıdır, hesabın sırası ortaktır.

Şekil Yalnızca Görsel İçin Değildir

figure ögesi içeriğin türünü kısıtlamaz. Bir kod listesi, bir tablo, bir alıntı, bir ses kaydı da şekil olabilir; ölçüt yine akıştan kopabilirliktir.

<figure>
  <figcaption>Şekil 2. Ham veri dosyasının ilk satırları.</figcaption>
  <pre><code>saat,sicaklik,nem
07:00,-4.2,72
07:10,-4.1,71</code></pre>
</figure>

Bir tablonun caption ögesi zaten vardır; tabloyu figure içine almak, ona akıştan kopabilirlik bildirimi eklemek istendiğinde anlamlıdır. İkisi birlikte kullanılıyorsa açıklamalardan birinin yinelenmemesine dikkat edilir.

Uzun Açıklama

Karmaşık bir çizelgenin ya da haritanın bilgisi bir alternatif metne sığmaz. Böyle durumlarda alt özniteliği görselin ne olduğunu kısaca söyler, ayrıntılı karşılık ise belgede metin olarak bulunur ve şekle bağlanır.

<figure>
  <img src="haftalik.png" width="1200" height="700"
       alt="Haftalık sıcaklık çizelgesi; değerler aşağıdaki tabloda.">
  <figcaption>Şekil 3. Haftalık sıcaklık seyri.</figcaption>
  <details>
    <summary>Çizelgenin sayısal karşılığı</summary>
    <table>
      <caption>Günlük en düşük ve en yüksek sıcaklıklar</caption>
      <tr><th scope="col">Gün</th><th scope="col">En düşük</th></tr>
      <tr><th scope="row">Pazartesi</th><td>-4</td></tr>
    </table>
  </details>
</figure>

details ögesi kapalı başlayan bir açılır bölüm kurar; summary ögesi onun görünen başlığıdır. Açma ve kapama davranışı ögenin kendisinde tanımlıdır ve betik gerektirmez. Buradaki işlevi, ayrıntılı karşılığı belgede tutup akışı meşgul etmemektir.

Bu yaklaşımın alternatif metin uzatmaktan üstünlüğü, karşılığın herkese açık olmasıdır: sayısal değerleri okumak isteyen gören bir okuyucu da aynı tabloya erişir.

Şekil Numaraları

Açıklamada yazılan “Şekil 1”, “Şekil 2” numaraları belgenin metnidir; ögeden gelmez. Bu numaraların değeri, metnin şekle uzaktan başvurabilmesindedir: “Şekil 2’deki dosya biçiminde…” cümlesi, şekil sayfanın başka bir yerine taşınsa da anlamını korur.

Numaralar elle yazıldığında araya bir şekil eklendiğinde tümü kayar. Sunum katmanı bu numaraları kendiliğinden üretebilir; bu durumda numara belgede bulunmaz ve metinden başvurulamaz. Seçim, şekle metinden başvurulup başvurulmayacağına göre yapılır.

İstasyon Belgesinde

<section aria-labelledby="konum">
  <h2 id="konum">Konum ve Kuruluş</h2>
  <p>İstasyon, kuzeye bakan yamacın orta kesiminde yer alır. Yamacın bu yüzü gün
     boyunca doğrudan ışık almadığı için sıcaklık ölçümünde sapma düşüktür.</p>

  <figure>
    <img src="konum-960.png"
         srcset="konum-480.png 480w, konum-960.png 960w, konum-1440.png 1440w"
         sizes="(max-width: 600px) 100vw, 640px"
         width="1440" height="960"
         alt="Yamaç kesiti: istasyon, vadi tabanından 400 metre yukarıda ve
              zirveden 260 metre aşağıda işaretli.">
    <figcaption>Şekil 1. İstasyonun yamaç üzerindeki konumu.</figcaption>
  </figure>
</section>

Alternatif metin kesitin taşıdığı sayısal bilgiyi verir; açıklama şekli adlandırır ve numaralandırır. İkisi arasında yineleme yoktur.

Özet

• figure, ana akıştan kopabilen ama akışta anılan içerik birimidir; ölçüt, taşındığında metnin okunmayı sürdürmesidir.
• alt görselin yerine geçer ve yalnızca göremeyen okuyucuya sunulur; figcaption görseli çevreleyen bilgidir ve herkese sunulur.
• İkisinin aynı metni taşıması yinelemedir; açıklamanın verdiği bilgi alternatif metinden çıkarılır.
• Erişilebilir ad hesabı sıralıdır: aria-labelledby, aria-label, ögenin yerel kaynağı, title. Üstteki alttakini bastırır.
• Şekil içeriğin türünü kısıtlamaz; kod listeleri, tablolar ve alıntılar da şekil olabilir.

Sonraki Adım

Görsel içerik yerleştirildi. Zamanda akan içerik —ses ve video— ayrı sorunlar getirir: denetimlerin kimin elinde olduğu, konuşulanın metin karşılığının nasıl taşınacağı ve kullanıcının istemediği bir sesin kendiliğinden çalmasının neden kısıtlandığı. Sonraki ders bu ögeleri ve kaynak seçim kurallarını ele alır.