---
title: 'Şekil ve Açıklama'
source: 'https://academia.sh/tr/kurslar/web-temelleri-ve-html/sekil-ve-aciklama'
course: "Web'in Temelleri ve HTML"
language: tr
updated: '2026-08-17T18:09:32+00:00'
license: 'CC BY-SA 4.0'
---

# Şekil ve Açıklama

Şekil ögesinin akıştan kopabilir içerik birimi olarak işlevi, açıklama ile alternatif metnin farkı ve erişilebilir ad hesabının sırası.

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.

```html
<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.

```js
// 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.

```html
<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.

```html
<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

```html
<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.