Tablo erişilebilirliği
Scope, headers ve caption ile tablo erişilebilirliğini sağlarsın.
caption ve scope
Erişilebilir bir tabloda başlık hücreleri scope özniteliği taşır. scope="col" hücrenin bir sütun başlığı, scope="row" ise bir satır başlığı olduğunu söyler. Böylece ekran okuyucu bir hücreyi okurken hangi başlığa ait olduğunu da duyurur.
Tablonun başlığını <caption> ile verirsin; bu, verinin hemen üzerinde görünür ve sayfa başlığıyla karıştırılmaz.
Karmaşık tablolar ve headers
Basit tablolarda scope yeterlidir. Ama bir hücre birden çok başlığa bağlıysa headers özniteliği kullanılır. Her başlık hücresine bir id verilir; veri hücresi de headers="id1 id2" ile hangilerine ait olduğunu söyler.
Örneğin bir hücre hem 'Ocak' hem 'Kulaklık' başlığına bağlıysa, headers="ocak kulaklik" yazılır. Bu, ekran okuyucunun doğru başlık kombinasyonunu okumasını sağlar.
Uygulama Başlıklı ve scopelu tablo yaz
Body içine bir <table> ekle. İçine bir <caption>Siparişler</caption> koy. Sonra bir <thead> içinde bir <tr> ve içinde iki <th scope="col"> ekle (metinler: Ürün, Adet). Sonra bir <tbody> içinde bir <tr> ve iki <td> ekle (metinler: Kulaklık, 12).
Örnek çözümü göster
<body>
<table>
<caption>Siparişler</caption>
<thead>
<tr>
<th scope="col">Ürün</th>
<th scope="col">Adet</th>
</tr>
</thead>
<tbody>
<tr>
<td>Kulaklık</td>
<td>12</td>
</tr>
</tbody>
</table>
</body>Kendini test et
-
Bir sütun başlığı hücresinde scope değeri ne olmalı?
- row
- col
- column
- header
Cevabı göster
col — Doğru. scope="col" sütun başlığı demektir.
-
Sütun başlığını tamamla
<th ____="col">Ürün</th>Cevabı göster
<th scope="col">Ürün</th> -
Özniteliği amacıyla eşleştir
- scope
- Tek anlamlı başlık
- headers
- Çoklu başlık bağlama
- caption
- Tablo başlığı
- id
- Benzersiz kimlik