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ı