Tabel Tata Letak Adalah Perangkap
Pahami mengapa tabel untuk tata letak membingungkan pembaca layar.
Tabel Tata Letak Adalah Perangkap adalah pelajaran Web Accessibility 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 Web Accessibility Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Web Accessibility Academy mencakup 4 pelajaran total.
Dahulu Tabel Digunakan untuk Tata Letak
Bertahun-tahun lalu, pengembang membuat tata letak halaman menggunakan elemen table. Kebiasaan itu masih tersisa dalam kode lama dan hingga kini menimbulkan masalah aksesibilitas yang nyata.
Mengapa Tabel Tata Letak Menyulitkan
Pembaca layar memperlakukan setiap tabel sebagai data. Pembaca layar mengumumkan baris, kolom, dan jumlah sel untuk tata letak Anda, sehingga pengguna dibanjiri struktur yang tidak bermakna.
Urutan Pembacaan Menjadi Keliru
Tabel tata letak sering menyebarkan isi ke dalam sel dengan urutan yang membingungkan. Urutan visual dan urutan pembacaan menjadi tidak selaras, sehingga pengguna tersesat.
Gunakan CSS untuk Tata Letak
Tata letak modern seharusnya menggunakan CSS. Gunakan flexbox atau grid untuk menyusun halaman, dan gunakan elemen table hanya untuk data tabular yang sebenarnya.
.cards { display: grid; grid-template-columns: 1fr 1fr; }Flexbox untuk Satu Dimensi
Saat Anda menyusun item dalam baris atau kolom, flexbox adalah alat yang tepat. Flexbox menyesuaikan diri dengan isi tanpa mengganggu semantik tabel.
.row { display: flex; gap: 1rem; }Grid untuk Dua Dimensi
Untuk baris dan kolom secara bersamaan, grid CSS memberi Anda sistem tata letak yang sesungguhnya. Sistem ini memisahkan tampilan halaman dari makna markup-nya.
Semantik Tetap Bersih
Dengan tata letak CSS, HTML Anda dapat menggunakan landmark yang sebenarnya seperti header, nav, dan main. Pengguna pembaca layar mendapatkan peta yang bermakna, bukan sekadar jumlah sel.
Pilihan Terakhir: role=presentation
Jika Anda benar-benar tidak dapat menghapus tabel tata letak lama, tambahkan role=presentation. Ini menghapus semantik tabel sehingga teknologi bantu mengabaikan kisi tersebut.
<table role="presentation"> ... </table>Presentation Adalah Tambalan, Bukan Rencana
Perlakukan role=presentation sebagai perban sementara. Perbaikan sebenarnya adalah memindahkannya ke CSS, yang menghapus masalah alih-alih sekadar menyembunyikannya.
Cara Mengenali Tabel Tata Letak
Tidak ada caption, tidak ada th, dan sel yang memuat seluruh bagian alih-alih nilai merupakan tanda bahaya. Pola tersebut hampir selalu menunjukkan tabel tata letak yang perlu diperbaiki.
Satu Tabel, Satu Tujuan
Ajukan satu pengujian sederhana untuk setiap tabel: apakah tabel tersebut menyajikan data dengan baris dan kolom berisi nilai yang saling berkaitan? Jika tidak, itu adalah tabel tata letak dan CSS seharusnya menggantikannya.
Pemeriksaan Singkat
Anda mewarisi halaman yang menggunakan tabel semata-mata untuk menempatkan kolom-kolom isi.
Ringkasan: Tabel untuk Data, CSS untuk Tata Letak
Jangan pernah menata halaman menggunakan table. Gunakan flexbox atau grid, sisakan table untuk data yang sebenarnya, dan perlakukan role=presentation hanya sebagai solusi sementara pada kode lama.
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Tabel Tata Letak Adalah Perangkap” gratis?
Ya — teks lengkap “Tabel Tata Letak Adalah Perangkap” 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 “Tabel Tata Letak Adalah Perangkap”?
Pahami mengapa tabel untuk tata letak membingungkan pembaca layar. 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 4 dari 4.
Berapa lama pelajaran “Tabel Tata Letak Adalah Perangkap” 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
- th, scope, dan Elemen caption
- Tajuk Baris dan Kolom yang Tepat
- Tabel Rumit: Memasangkan headers dan id
- Tabel Tata Letak Adalah Perangkap