Atribut scope

Menandai sel sebagai th baru separuh pekerjaan. Pertanyaan berikutnya dari pembaca layar: judul ini untuk sel yang mana — sel-sel di bawahnya, atau sel-sel di sampingnya? Atribut scope menjawab arah relasi itu secara eksplisit, dan inilah atribut aksesibilitas terpenting pada tabel.

Chapter ini membahas nilai-nilainya, penerapannya pada tabel dua arah, dan teknik lanjutan untuk tabel yang lebih kompleks.

Fungsi scope #

Mekanismenya begini: saat pengguna pembaca layar berpindah dari sel ke sel, alat itu umumnya mengumumkan judul sel sebelum isinya — pengguna mendengar “Harga, Rp18.000”, bukan “Rp18.000” yang menggantung tanpa konteks. Untuk mengumumkan judul yang tepat, pembaca layar perlu tahu relasi antara sel data dan judulnya.

Pada tabel sederhana dengan satu baris judul di atas, tebakan alat bantu hampir selalu benar. Masalah muncul saat judul berada di dua sisi — header kolom di atas dan header baris di kiri — atau saat tabel berlapis. Pada situasi itu relasi menjadi ambigu; scope menghapus ruang tebak.

Nilai-Nilai scope #

Empat nilai yang sah pada scope, masing-masing menunjuk sasaran relasi:

Contoh: Tabel Dua Arah #

Stok bahan dengan judul kolom dan judul baris sekaligus:

<table>
  <caption>Stok bahan Kedai Kopi Siti, akhir pekan</caption>
  <tr>
    <th scope="col">Bahan</th>
    <th scope="col">Stok awal</th>
    <th scope="col">Terpakai</th>
  </tr>
  <tr>
    <th scope="row">Biji arabika</th>
    <td>5 kg</td>
    <td>3 kg</td>
  </tr>
  <tr>
    <th scope="row">Susu UHT</th>
    <td>12 liter</td>
    <td>9 liter</td>
  </tr>
  <tr>
    <th scope="row">Gula aren</th>
    <td>4 kg</td>
    <td>1 kg</td>
  </tr>
</table>

Hasil Render:

Mari kita telaah kode di atas:

1. scope="col" pada baris judul: tiga judul di atas — tiap judul dikaitkan ke sel-sel di bawahnya pada kolom yang sama.
2. scope="row" pada kolom pertama: judul kiri untuk tiap baris data — “Biji arabika” menaungi sel-sel pada barisnya.
3. Sel data seperti 3 kg: kini mempunyai dua judul — “Terpakai” dari kolomnya dan “Biji arabika” dari barisnya; pembaca layar dapat mengumumkan kombinasi yang tepat saat pengguna menekukannya.

Tabel Kompleks: id dan headers #

Untuk tabel yang lebih rumit — judul bertingkat, judul yang menaungi hanya sebagian kolom — HTML menyediakan pasangan atribut id dan headers sebagai teknik lanjutan.

Bentuk ringkasnya:

<table>
  <tr>
    <th id="hari">Hari</th>
    <th id="gelas">Gelas terjual</th>
  </tr>
  <tr>
    <td headers="hari">Senin</td>
    <td headers="gelas">24</td>
  </tr>
</table>

Sel “Senin” mengaku berjudul “Hari”; sel “24” mengaku berjudul “Gelas terjual”. Relasi dinyatakan satu per satu, sehingga struktur judul bertingkat sekalipun tetap terpetakan.

Ringkasan #

• scope menegaskan arah relasi judul-sel: col dan row untuk satu kolom/baris, colgroup dan rowgroup untuk kelompok.
• Tabel sederhana masih bisa ditebak pembaca layar; tabel dua arah dan berlapis butuh scope agar tidak ambigu.
• Tabel kompleks memakai pasangan id-headers sebagai teknik lanjutan.

Semua komponen kini lengkap — saatnya merakit satu tabel data yang utuh.