HTML Table Accessibility Lanjut Scope Caption Aria Grid

Definisi

Tabel data yang aksesibel butuh struktur semantic: <caption> (judul), scope pada <th> (arah header), <thead>/<tbody>/<tfoot>, dan bila sangat kompleks bisa pakai ARIA grid roles. Tujuannya pembaca layar mengaitkan sel ke header dengan benar.

Kapan dipakai

Pakai saat menampilkan data tabular nyata (laporan, harga, jadwal). Jangan pakai <table> untuk layout — itu anti-pattern. Untuk tabel interaktif kompleks (spreadsheet), pertimbangkan ARIA grid.

Cara kerja

Tabel semantic

html

<table>
  <caption>Daftar harga produk Q3</caption>
  <thead>
    <tr>
      <th scope="col">Produk</th>
      <th scope="col">Harga</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Theme Pro</th>
      <td>Rp 299rb</td>
    </tr>
  </tbody>
</table>

ARIA grid (kompleks)

html

<div role="grid" aria-label="Sheet">
  <div role="row">
    <span role="columnheader">A</span>
    <span role="gridcell" tabindex="0">data</span>
  </div>
</div>

Struktur alur

Catatan implementasi

• scope="col" / scope="row" cukup untuk mayoritas tabel; ARIA grid hanya untuk kasus interaktif berat.
• Hindari tabel bersarang dalam untuk header; pakai colspan/rowspan dengan hati-hati (bisa membingungkan reader).
• summary sudah deprecated; ganti <caption> atau teks pengantar.
• Jangan gunakan role="table" di <table> biasa — redundant dan bisa mengacaukan.

Kesalahan umum

• th tanpa scope: reader tidak tahu arah header.
• Pakai table untuk layout:语义 rusak, a11y hancur.
• ARIA grid tanpa keyboard: interaktif tapi tidak accessible.
• Caption dihilangkan: konteks tabel hilang.

Referensi terkait

• HTML Tables, Tabular Data, Accessibility
• HTML Semantics dan Struktur Dokumen
• CSS Responsive Layout: Media Queries, Container Queries