Scope ve headers

scope, headers ve id ile karmaşık tablo erişilebilirliği sağlarsın.

scope özniteliği

Başlangıç seviyesinde <th> hücrelerine scope özniteliği eklemiştin. Bu öznitelik ekran okuyucuya hücrenin bir satır mı yoksa sütun başlığı mı olduğunu söyler.

Alabileceği değerler: col (sütun başlığı), row (satır başlığı), colgroup (sütun grubu başlığı) ve rowgroup (satır grubu başlığı). Basit tablolarda col ve row çoğu zaman yeter.

headers ve id ile karmaşık tablo

Bazı tablolar iki boyutlu başlıklar içerir; her hücre hem bir satır hem bir sütun başlığına bağlıdır. Böyle karmaşık tablolarda scope yetmez; headers özniteliği ve id ile hücreyi başlıklarına açıkça bağlarsın.

Yöntem şudur: her <th>'ye bir id ver, ilgili <td>'lere headers="id1 id2" yaz. Ekran okuyucu böylece hücreyi okurken başlıklarını da söyler.

Uygulama Karmaşık tablo yaz: scope, id ve headers

İki sütunlu bir tablo yaz. <table> içine dolu bir <caption> koy. <thead>'de iki <th> olsun; her birine scope="col" ve birer id ver. <tbody>'ye en az iki satır ekle; her satırın ilk hücresi scope="row" özniteliğine sahip <th>, ikinci hücre ise headers özniteliğiyle ilgili th id'lerine işaret eden <td> olsun.

Örnek çözümü göster

<table>
  <caption>Telefon Özellikleri</caption>
  <thead>
    <tr>
      <th scope="col" id="ozellik">Özellik</th>
      <th scope="col" id="deger">Değer</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row" id="agirlik">Ağırlık</th>
      <td headers="agirlik deger">180 g</td>
    </tr>
    <tr>
      <th scope="row" id="ekran">Ekran</th>
      <td headers="ekran deger">6.1 inç</td>
    </tr>
  </tbody>
</table>

Kendini test et

scope="col" özniteliği neyi belirtir?
- Hücrenin bir sütun başlığı olduğunu
- Hücrenin bir satır başlığı olduğunu
- Hücrenin birden çok sütunu kapsadığını
- Hücrenin birden çok satırı kapsadığını
Cevabı göster

Hücrenin bir sütun başlığı olduğunu — Doğru. scope="col", th hücresinin bir sütun başlığı olduğunu söyler.

td hücresini th başlığına bağla

<th id="ad" scope="row">Ağırlık</th>
<td headers="____">320 g</td>

Cevabı göster

<th id="ad" scope="row">Ağırlık</th>
<td headers="ad">320 g</td>

scope değerini anlamıyla eşleştir

scope="col"

Sütun başlığı
scope="row"

Satır başlığı
scope="colgroup"

Sütun grubu başlığı
headers+id

Karmaşık tablo bağlantısı

Sıradaki ders: Tablo erişilebilirliği

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler