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

Sıradaki ders: Özet - Erişilebilir kart

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler