Tabel yang rapi di mata belum tentu terbaca oleh semua pengunjung. Pengguna pembaca layar tidak memindai kisi tabel secara visual — mereka mendengar isi sel demi sel sambil mencari benang merahnya. Chapter ini merangkum praktik agar tabel kita masuk akal ketika didengar, bukan hanya ketika dilihat.

Kita mulai dari prinsip besar, lalu satu contoh tabel yang menerapkan seluruhnya, dan ditutup daftar periksa.

Prinsip: Sederhana Itu Terbaik #

Semakin sederhana struktur tabel, semakin andal tabel itu diterjemahkan alat bantu. Dua arah judul — header kolom dan header baris — adalah batas yang nyaman. Tabel berlapis dengan penggabungan sel di mana-mana bisa dibuat, tetapi tiap lapisan menambah beban bagi pembaca layar. Bila tabel rumit dapat dipecah menjadi dua tabel sederhana tanpa kehilangan makna — pecah.

Praktik intinya empat: caption wajib sebagai konteks pembuka; semua judul memakai th dengan scope; kolom pertama yang berperan sebagai judul baris ditulis th scope="row"; dan tidak ada sel kosong.

Masalah Sel Kosong #

Pembaca layar umumnya tidak mengumumkan apa pun pada sel kosong — tidak ada kata “kosong”, tidak ada keterangan “tidak ada data”. Pengguna tidak bisa membedakan data yang memang tidak ada dari tabel yang terpotong. Solusinya murah: isi sel dengan “—” untuk data yang tidak tersedia, atau kata-kata nyata seperti “belum ada pesanan” bila konteksnya perlu dijelaskan.

Contoh Tabel yang Accessible #

Pesanan langganan tiga pelanggan pada tiga hari operasional:

html 
<table>
  <caption>Pesanan langganan Kedai Kopi Siti, Senin, Rabu, dan Jumat</caption>
  <thead>
    <tr>
      <th scope="col">Pelanggan</th>
      <th scope="col">Senin</th>
      <th scope="col">Rabu</th>
      <th scope="col">Jumat</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Budi</th>
      <td>Kopi tubruk</td>
      <td>—</td>
      <td>Kopi susu</td>
    </tr>
    <tr>
      <th scope="row">Dewi</th>
      <td>Teh tarik</td>
      <td>Teh tarik</td>
      <td>—</td>
    </tr>
    <tr>
      <th scope="row">Rani</th>
      <td>—</td>
      <td>Roti bakar</td>
      <td>Kopi tubruk</td>
    </tr>
  </tbody>
</table>

Hasil Render:

Mari kita telaah kode di atas:

  1. <caption> lengkap: pengguna pembaca layar mendengar konteks — siapa pelanggannya, hari apa saja — sebelum sel pertama.
  2. th scope="col" × 4: empat judul kolom atas diberi arah relasi eksplisit.
  3. th scope="row" pada kolom pertama: nama pelanggan menjadi judul baris — sel “Kopi tubruk” milik Budi dinyatakan relasinya ke pemiliknya.
  4. Tanda “—” pada sel kosong: hari tanpa pesanan tetap diumumkan — pengguna tahu datanya “tidak ada”, bukan terpotong.
  5. Tanpa colspan/rowspan: struktur polos paling mudah dipindai semua alat bantu.

Tabel di Layar Sempit #

Tabel lebar pasti bertemu layar ponsel: kolom terdorong sempit, teks melipat, tidak nyaman dibaca. Solusi umumnya bukan menyembunyikan kolom, melainkan membungkus tabel dalam container yang dapat digulir ke samping — tata letak scroll horizontal itu urusan CSS, bukan markup. HTML kita tidak berubah; yang berubah hanya pembungkus presentasinya.

Daftar Periksa Tabel Accessible #

Sebelum menerbitkan tabel, lewati enam pemeriksaan berikut:

  1. caption deskriptif menempel pada tabel (anak pertama table).
  2. Semua sel judul memakai th, bukan td yang ditebalkan.
  3. Tiap th memakai scope — col untuk judul atas, row untuk judul kiri.
  4. Tidak ada sel kosong; gunakan “—” atau keterangan nyata.
  5. Struktur sederhana; pertimbangkan memecah tabel berlapis menjadi dua.
  6. Tabel lebar punya rencana responsif (scroll horizontal via CSS).

Ringkasan #

  • Tabel sederhana dengan dua arah judul adalah struktur yang paling andal untuk semua pengguna.
  • caption, th + scope, dan isi sel kosong adalah tanggung jawab markup — bukan CSS.
  • Tabel rumit sebaiknya dipecah; tabel lebar ditangani scroll CSS.

Pertanyaan terakhir section ini: kapan sebaiknya tabel dipakai sama sekali?