Tabel Aksesibel: scope dan caption

Masalahnya: Tabel Itu Membingungkan Kalau Hanya Didengar

Kamu bisa memindai tabel dengan mata dalam sedetik: judul kolom di atas, datanya di bawah. Tapi bayangkan kamu tidak bisa melihat, dan tabel itu dibacakan kepadamu sel per sel oleh screen reader (perangkat lunak pembaca layar untuk tunanetra): "Kopi Tubruk... Rp15.000... Es Teh... Rp8.000..." Tanpa tahu kolomnya apa, deretan angka dan kata itu tidak ada artinya. Rp15.000 itu harga? Stok? Diskon? Itulah yang dialami pengguna screen reader setiap hari pada tabel yang dibuat asal jadi.

Masalah ini nyata dan besar: website pemerintah, sekolah, dan perusahaan wajib bisa diakses semua orang, termasuk penyandang disabilitas. Kabar baiknya, solusinya murah: cukup beri tahu browser relasi tiap sel header dengan atribut scope, dan beri judul tabel dengan <caption>. Tidak perlu JavaScript, tidak perlu library, hanya HTML yang benar.

Contoh 1: scope Memberi Tahu Arah Header

Atribut scope dipasang pada <th> untuk menjelaskan header ini milik kolom atau baris mana:

<table border="1">
  <tr>
    <th scope="col">Nama</th>
    <th scope="col">Harga</th>
  </tr>
  <tr>
    <th scope="row">Kopi Tubruk</th>
    <td>Rp15.000</td>
  </tr>
  <tr>
    <th scope="row">Es Teh</th>
    <td>Rp8.000</td>
  </tr>
</table>

• scope="col": header untuk kolom di bawahnya. Screen reader akan memasangkan setiap sel data dengan judul kolomnya.
• scope="row": header untuk baris di sebelahnya. Berguna saat kolom pertama berisi label, seperti nama produk atau nama siswa.

Dengan scope, screen reader mengumumkan "Nama: Kopi Tubruk, Harga: Rp15.000", bukan sekadar "Kopi Tubruk, Rp15.000". Bedanya seperti mendengar orang menyebut "nilaimu 85" versus cuma "85": konteksnya yang membuat informasi bermakna.

Contoh 2: Tabel Lengkap yang Aksesibel

Gabungkan semua praktik baiknya dalam satu tabel realistis:

<table border="1">
  <caption>Harga menu per kategori, dalam Rupiah</caption>
  <thead>
    <tr>
      <th scope="col">Menu</th>
      <th scope="col">Panas</th>
      <th scope="col">Dingin</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Kopi Tubruk</th>
      <td>Rp15.000</td>
      <td>Rp18.000</td>
    </tr>
    <tr>
      <th scope="row">Teh</th>
      <td>Rp5.000</td>
      <td>Rp8.000</td>
    </tr>
  </tbody>
</table>

<caption> adalah judul resmi tabel: screen reader membacakannya sebelum masuk ke isi tabel, jadi pendengar langsung tahu tabel ini tentang apa. Jangan menggantinya dengan <h2> di luar tabel kalau teks itu memang judul tabelnya, karena heading di luar tidak terikat dengan tabel dan bisa terlewat saat pengguna melompat antar tabel.

Checklist Tabel Aksesibel

1. Pakai <th> untuk semua header, bukan <td> yang ditebalkan.
2. Tambahkan scope="col" atau scope="row" pada setiap <th>.
3. Beri <caption> yang menjelaskan isi tabel dengan jelas.
4. Jangan pernah pakai tabel untuk layout halaman.

Kesalahan Umum Pemula

SALAH: header dibuat dari <td> yang ditebalkan.

<tr>
  <td><b>Nama</b></td>
  <td><b>Harga</b></td>
</tr>

Bagi mata manusia ini terlihat seperti header, tapi bagi screen reader ini tetap sel data biasa. Ia tidak akan mengumumkan relasi apa pun, dan pengguna tunanetra kehilangan konteks kolomnya.

BENAR: selalu pakai <th scope="col"> untuk judul kolom dan <th scope="row"> untuk label baris.

SALAH: caption diganti heading biasa di luar tabel.

<h2>Daftar Harga</h2>
<table border="1">
  ...
</table>

Kelihatannya sama bagi yang bisa melihat, tapi heading ini tidak terikat dengan tabel. Saat pengguna screen reader melompat langsung ke tabel (melewati heading), ia tidak tahu tabel ini tentang apa. <caption> di dalam tabel selalu ikut terbaca sebagai judulnya.

Catatan teknis: Untuk tabel super kompleks dengan header bertingkat, ada pasangan atribut headers dan id yang memasangkan tiap sel data dengan header spesifiknya. Tapi kalau tabelmu sampai butuh itu, biasanya itu tanda tabelnya terlalu kompleks dan layak disederhanakan menjadi dua tabel kecil.