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=