0Pricing
Web Accessibility Academy · Pelajaran

Cadangan Tabel Data

Sediakan angka yang mendasarinya dalam tabel aksesibel.

Cadangan Tabel Data adalah pelajaran Web Accessibility Academy gratis di CoddyKit. Ini adalah pelajaran 2 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 Web Accessibility Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Web Accessibility Academy mencakup 4 pelajaran total.

Saat Kata-Kata Belum Cukup

Ringkasan satu baris menyampaikan ceritanya, tetapi sebagian pengguna menginginkan angkanya. Tabel data memberikan nilai mentah di balik bagan.

Tabel Adalah Sumber Kebenaran

Anggap bagan sebagai visualisasi dari sebuah tabel. Sediakan tabel yang sama dalam markup yang sebenarnya, dan semua teknologi bantu dapat membacanya dengan sempurna.

Gunakan Elemen table yang Sebenarnya

Pembaca layar memahami elemen table bawaan secara mendalam: baris, kolom, dan header semuanya diumumkan dengan benar tanpa ARIA tambahan.

<table>
  <tr><th>Month</th><th>Sales</th></tr>
  <tr><td>Jan</td><td>120</td></tr>
</table>

Beri Tabel sebuah caption

Caption memberi nama pada tabel agar pendengar mengetahui data apa yang mereka masuki. Caption dibacakan saat fokus pertama kali berada pada tabel.

<table><caption>Monthly sales in 2024</caption> ... </table>

Sel Header dengan th dan scope

Tandai label sebagai th dengan scope agar setiap nilai diumumkan bersama kolom dan barisnya. Konteks itu sangat penting dalam tabel.

<th scope="col">Sales</th>
<th scope="row">January</th>

Letakkan Tepat di Samping Bagan

Letakkan tabel cadangan di samping bagan, bukan di halaman terpisah. Pengguna harus dapat mencapai data tanpa mencarinya ke mana-mana.

Sembunyikan Secara Visual jika Perlu

Jika tabel mengganggu desain, sembunyikan secara visual tetapi tetap pertahankan untuk pembaca layar menggunakan kelas visually-hidden, jangan pernah menggunakan display none.

.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; }

Jangan Pernah Menggunakan display none untuk Data

Perhatikan: display: none menghapus konten sepenuhnya dari hierarki aksesibilitas. Jika disembunyikan dengan cara itu, tabel cadangan Anda tidak membantu siapa pun.

Toggle details Juga Dapat Digunakan

Bungkus tabel dalam elemen details agar pengguna yang dapat melihat dapat menampilkan angka sesuai kebutuhan, sementara tabel tetap sepenuhnya dapat diakses.

<details><summary>View data table</summary>
  <table>...</table>
</details>

Selaraskan Tabel dan Bagan

Jika bagan diperbarui, tabel juga harus diperbarui. Angka usang di balik bagan baru secara diam-diam menyesatkan orang yang mengandalkannya.

Satu Sumber, Dua Tampilan

Idealnya, bagan dan tabel dirender dari data yang sama. Dengan begitu keduanya tetap akurat dan Anda tidak perlu memelihara dua sumber kebenaran. 🔗

Pemeriksaan Singkat

Bagaimana cara menyembunyikan tabel data yang tetap ingin Anda bacakan oleh pembaca layar?

Rangkuman: Angka di Balik Gambar

Anda telah mempelajari cara melengkapi setiap bagan dengan tabel yang sebenarnya: memiliki keterangan, header dengan scope, selalu selaras, dan disembunyikan dengan aman jika diperlukan, tetapi tidak pernah menggunakan display none. 📋

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Cadangan Tabel Data” gratis?

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

Apa yang akan aku pelajari di “Cadangan Tabel Data”?

Sediakan angka yang mendasarinya dalam tabel aksesibel. Kamu berlatih Web Accessibility 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 Web Accessibility Academy?

Tidak diperlukan pengalaman sebelumnya. Web Accessibility 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 2 dari 4.

Berapa lama pelajaran “Cadangan Tabel Data” 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 Web Accessibility Academy ini?

Ya. Setiap pelajaran Web Accessibility 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

  1. Setiap Grafik Membutuhkan Alternatif Teks
  2. Cadangan Tabel Data
  3. Warna, Pola, dan Label Langsung
  4. Grafik Interaktif yang Dapat Dinavigasi dengan Papan Ketik
← Kembali ke Web Accessibility Academy