HTML Academy · Pelajaran

Aksesibilitas Tabel: scope summary caption

Tambahkan keterangan dan atribut scope untuk mendukung pembaca layar.

Aksesibilitas Tabel: scope summary caption adalah pelajaran HTML Academy gratis di CoddyKit. Ini adalah pelajaran 4 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar HTML Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus HTML Academy mencakup 4 pelajaran total.

Mengapa Aksesibilitas Tabel Penting

Pengguna pembaca layar menavigasi tabel data sel demi sel — mereka memerlukan konteks tajuk untuk setiap sel data yang dibaca.

Tanpa markup yang tepat, pembaca layar hanya membacakan nilai mentah tanpa konteks kolom atau baris
Tabel yang mudah diakses membuat data dapat dipahami oleh semua orang

Elemen caption

<caption> menyediakan judul yang terlihat untuk tabel:

<table>
  <caption>Q4 2024 Product Sales by Region</caption>
  <thead>...</thead>
  <tbody>...</tbody>
</table>
<!-- caption is the first child of table -->
<!-- Screen readers announce it when entering the table -->
<!-- Helps all users understand the table's purpose at a glance -->

Memberi Gaya pada caption

Berikan gaya dan tentukan posisi caption dengan CSS:

caption {
  caption-side: bottom;  /* or top (default) */
  font-style: italic;
  font-size: 0.875rem;
  color: #666;
  text-align: left;
  padding: 0.5rem 0;
}

Atribut scope pada th

Atribut scope memberi tahu pembaca layar sel mana yang terkait dengan sebuah tajuk:

<thead>
  <tr>
    <th scope="col">Name</th>      <!-- header for a column -->
    <th scope="col">Score</th>
    <th scope="col">Grade</th>
  </tr>
</thead>
<tbody>
  <tr>
    <th scope="row">Alice</th>    <!-- header for a row -->
    <td>95</td>
    <td>A</td>
  </tr>
</tbody>

Nilai scope

Nilai atribut scope:

col — tajuk berlaku untuk sel dalam kolom yang sama
row — tajuk berlaku untuk sel dalam baris yang sama
colgroup — tajuk berlaku untuk sel dalam kelompok kolom
rowgroup — tajuk berlaku untuk sel dalam kelompok baris (tbody/thead)

scope untuk Tajuk Kompleks

Tajuk yang membentang menggunakan scope colgroup atau rowgroup:

<thead>
  <tr>
    <th rowspan="2" scope="col">Name</th>
    <th colspan="2" scope="colgroup">2024</th>   <!-- colgroup -->
  </tr>
  <tr>
    <th scope="col">Q1</th>
    <th scope="col">Q2</th>
  </tr>
</thead>

Atribut headers pada td

Untuk tabel yang sangat kompleks, gunakan headers untuk menghubungkan sel secara eksplisit dengan tajuknya:

<thead>
  <tr>
    <th id="hname">Name</th>
    <th id="hq1">Q1</th>
    <th id="hq2">Q2</th>
  </tr>
</thead>
<tbody>
  <tr>
    <th id="ralice" headers="hname">Alice</th>
    <td headers="hq1 ralice">95</td>
    <td headers="hq2 ralice">88</td>
  </tr>
</tbody>

Kapan Menggunakan scope vs headers

Panduan:

Tabel sederhana dengan tajuk satu baris → gunakan scope="col" dan scope="row"
Tajuk kompleks yang membentang → gunakan atribut headers dengan referensi ID
WCAG 1.3.1 mengharuskan tajuk tabel dikaitkan secara terprogram dengan sel datanya

aria-label pada table

Jika caption tidak diinginkan secara visual, gunakan aria-label:

<!-- caption with visually-hidden class -->
<table aria-label="Q4 2024 Product Sales by Region">
  ...
</table>
<!-- Or use aria-labelledby to reference a heading -->
<h2 id="table-title">Sales Data</h2>
<table aria-labelledby="table-title">...</table>

Menguji Aksesibilitas Tabel

Cara memverifikasi bahwa tabel Anda mudah diakses:

Gunakan panel Tabel di Pembaca Layar (VoiceOver, NVDA)
Pasang ekstensi browser axe DevTools
Jalankan pa11y CLI pada URL halaman Anda
W3C Markup Validator mendeteksi caption yang hilang

Atribut summary (Usang)

Atribut summary digunakan untuk pembaca layar pada tabel kompleks — kini sudah usang dalam HTML5:

<!-- Old HTML 4.01 — do not use: -->
<table summary="This table shows quarterly sales...">

<!-- Modern HTML5 replacement: -->
<table>
  <caption>This table shows quarterly sales...</caption>
</table>
<!-- Or: aria-describedby to a paragraph -->

Daftar Periksa Tabel yang Mudah Diakses

Daftar periksa aksesibilitas untuk tabel data:

Gunakan <caption> untuk memberi label pada tabel
Gunakan <th> untuk semua sel tajuk
Tambahkan scope ke semua elemen <th>
Gunakan <thead>, <tbody>, <tfoot> untuk struktur
Untuk tabel kompleks, gunakan id + headers

Pemeriksaan Singkat

Nilai scope mana yang harus digunakan untuk th yang menjadi tajuk seluruh kolom?

Rangkuman: Aksesibilitas Tabel

Hal penting tentang tabel yang mudah diakses:

<caption> — judul tabel yang terlihat dan dibacakan oleh pembaca layar
scope="col" — tajuk kolom
scope="row" — tajuk baris
scope="colgroup/rowgroup" — tajuk yang membentang
id + headers — untuk tajuk kompleks bertingkat
Uji dengan axe, pa11y, atau VoiceOver

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Aksesibilitas Tabel: scope summary caption” gratis?

Ya — teks lengkap “Aksesibilitas Tabel: scope summary caption” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus HTML Academy, upgrade ke CoddyKit PRO. Kursus HTML Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Aksesibilitas Tabel: scope summary caption”?

Tambahkan keterangan dan atribut scope untuk mendukung pembaca layar. Kamu berlatih HTML Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai HTML Academy?

Tidak diperlukan pengalaman sebelumnya. HTML Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 4 dari 4.

Berapa lama pelajaran “Aksesibilitas Tabel: scope summary caption” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran HTML Academy ini?

Ya. Setiap pelajaran HTML Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

table tr td dan th
Struktur thead tbody tfoot
colspan dan rowspan untuk Rentang Sel
Aksesibilitas Tabel: scope summary caption

← Kembali ke HTML Academy