Tutorial HTML / Tabel yang aksesibel: caption, scope, dan penggabungan sel

Tabel data yang dapat dibaca mengidentifikasi topiknya dan menunjukkan judul baris dan kolom mana yang berlaku untuk setiap nilai. Gunakan caption dan th, tambahkan scope jika berguna, dan gabungkan sel hanya jika hubungan yang dihasilkan tetap dapat dipahami.

Beri nama tabel dengan caption

caption menjelaskan tabel secara keseluruhan dan harus merupakan elemen anak pertama dari table. Hal ini berbeda dari judul paragraf yang berdekatan karena merupakan bagian dari tabel. Jika periode waktu atau metode pengukuran diperlukan untuk menafsirkan angka, cantumkan ini dalam keterangan tabel atau dalam teks yang berdekatan. Keterangan tabel memperkenalkan tabel; nama-nama individual dari baris dan kolom tetap berada di sel header.

Hubungkan data dengan judul melalui atribut scope

Gunakan scope="col" untuk judul kolom dan scope="row" untuk judul baris. Dalam contoh ini, nilai yang sesuai dengan Senin pagi adalah tiga pengunjung.

<table>
  <caption>Pengunjung per hari dan waktu</caption>
  <thead>
    <tr>
      <th scope="col">Hari</th>
      <th scope="col">Pagi</th>
      <th scope="col">Siang</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Senin</th>
      <td>3 pengunjung</td>
      <td>5 pengunjung</td>
    </tr>
    <tr>
      <th scope="row">Selasa</th>
      <td>4 pengunjung</td>
      <td>6 pengunjung</td>
    </tr>
  </tbody>
</table>

scope menjelaskan orientasi hubungan sel header terhadap data; ini bukan aturan gaya visual. Dalam tabel sederhana, hubungan ini bisa terlihat tanpa hal ini, tetapi penandaan eksplisit memudahkan pengecekan maksud. Tutorial W3C WAI mengenai tabel menjelaskan pola-pola lebih lanjut.

Gabungkan sel hanya jika data mengharuskannya

colspan="2" mencakup dua kolom; rowspan="2" mencakup dua baris. Contoh berikut mengelompokkan pagi dan siang di bawah satu judul bersama. colgroup mendefinisikan kedua kolom ini sehingga scope="colgroup" memiliki tujuan yang jelas. Untuk baris dan sel di bawahnya, lihat Dasar-dasar tabel: table, tr, th, dan td.

<table>
  <colgroup><col></colgroup>
  <colgroup span="2"></colgroup>
  <tr>
    <th scope="col" rowspan="2">Hari</th>
    <th scope="colgroup" colspan="2">Pengunjung</th>
  </tr>
  <tr>
    <th scope="col">Pagi</th>
    <th scope="col">Siang</th>
  </tr>
  <tr>
    <th scope="row">Senin</th>
    <td>3 pengunjung</td>
    <td>5 pengunjung</td>
  </tr>
</table>

Hasilnya mencakup grup kolom untuk Hari dan grup dua kolom untuk Pagi/Siang. Kolom pertama juga berada dalam colgroup eksplisit, sehingga strukturnya dapat dibaca tanpa harus mengandalkan aturan penghilangan tag.

Jangan menambahkan sel yang digabungkan hanya untuk menghias tabel sederhana. Jika pembaca harus menebak sel header mana yang sesuai dengan suatu angka, sederhanakan tabel atau bagi menjadi tabel yang lebih kecil. Panduan W3C-WAI tentang header tabel yang tidak beraturan memberikan contoh yang lebih kompleks.

Uji hubungan

Pilih nilai tabel mana pun dan tanyakan: "Hari dan waktu apa yang ditunjukkan oleh ini?" Periksa jawabannya tanpa hanya mengandalkan warna atau posisi. Uji layar sempit untuk konten yang terpotong dan coba gunakan pembaca layar pada tabel yang kompleks dan digabung. Tabel harus menyajikan data dan tidak digunakan untuk tata letak atau formulir input. Gabungkan pemeriksaan tabel dengan prinsip pengujian manual dalam Dasar-dasar Aksesibilitas: Judul, Tautan, Gambar, dan Keyboard.