Komponen Tab dengan Trik :checked vs JS

Komponen tab memerlukan: indikator visual untuk tab aktif, panel terkait yang ditampilkan atau disembunyikan saat dipilih, navigasi keyboard antartab, dan atribut ARIA yang aksesibel. Semua ini dapat dicapai dengan CSS murni menggunakan trik :checked atau dengan JavaScript untuk aksesibilitas yang lebih baik.

Input radio tersembunyi berfungsi sebagai keadaan: setiap tab berupa <label> yang ditautkan ke input radio. Saat radio dipilih, penggabung saudara CSS menampilkan panel yang sesuai dan menata label tab aktif. JavaScript sama sekali tidak diperlukan.

Letakkan input radio, lalu semua label (tab), kemudian semua panel dalam wadah yang sama. Gunakan penggabung saudara umum (~) untuk menghubungkan radio yang dipilih dengan panel yang sesuai. Panel secara bawaan menggunakan display: none; panel yang cocok mendapatkan display: block.

Trik :checked tidak dapat memperbarui atribut ARIA (aria-selected, aria-controls), tidak dapat mengaktifkan navigasi tombol panah antartab, dan batasan urutan DOM (input harus berada sebelum panel) dapat bertentangan dengan persyaratan desain visual. Kekurangan ini membatasi aksesibilitas yang sesungguhnya.

Komponen tab JS mendengarkan peristiwa klik pada tombol tab, menetapkan aria-selected pada tab aktif, memperbarui aria-hidden pada panel, dan mengelola fokus. Pendekatan ini memungkinkan kepatuhan ARIA penuh serta pola interaksi keyboard sesuai Praktik Penulisan ARIA.

Gunakan role="tablist" pada wadah, role="tab" pada setiap tombol tab bersama aria-selected dan aria-controls, serta role="tabpanel" pada setiap panel bersama aria-labelledby. Pembaca layar mengumumkan jumlah tab, posisi, dan keadaan yang dipilih.

Praktik Penulisan ARIA untuk tab: tombol Tab memasuki daftar tab dan memfokuskan tab aktif. Panah Kiri/Kanan berpindah antartab. Home/End melompat ke tab pertama/terakhir. Setiap perpindahan dengan tombol panah mengaktifkan tab yang mendapat fokus (pola aktivasi otomatis).

Tata tab aktif dengan garis tepi bawah atau perubahan latar belakang menggunakan pemilih [aria-selected="true"]—cara ini berfungsi pada pendekatan JS maupun :checked. Dengan demikian, CSS tetap selaras dengan atribut keadaan ARIA dan tidak memerlukan pengelolaan dua keadaan yang terpisah.

Indikator tab animasi bergeser di antara tab: posisikan elemen indikator dengan posisi absolut, gunakan JavaScript untuk mengatur posisi kiri dan lebarnya agar sesuai dengan dimensi tab aktif, lalu animasikan dengan transition: left 200ms ease, width 200ms ease.

Ketika tab meluap dari wadahnya pada layar kecil, gunakan pengguliran horizontal (overflow-x: auto; scrollbar-width: none) atau ubah tab menjadi menu tarik-turun pada perangkat seluler. Pendekatan menu tarik-turun memerlukan JS untuk menyinkronkan elemen pilihan bawaan dengan visibilitas panel tab.

Gunakan trik :checked untuk antarmuka pengguna sederhana dan tidak kritis, ketika aksesibilitas bukan persyaratan prioritas. Gunakan tab JavaScript untuk antarmuka produksi yang melayani pengguna papan ketik, pengguna pembaca layar, atau aplikasi yang memerlukan kepatuhan terhadap ARIA dalam audit atau persyaratan hukum.

Apa keterbatasan aksesibilitas utama dari trik :checked CSS untuk tab?

Trik :checked memungkinkan peralihan tab hanya dengan CSS menggunakan input radio dan kombinator saudara, tetapi tidak memiliki aksesibilitas ARIA dan papan ketik. Tab JavaScript dengan peran ARIA (tablist, tab, tabpanel), pengelolaan aria-selected, dan penanganan tombol Panah memberikan pengalaman lengkap dan aksesibel yang diperlukan untuk komponen produksi.