Lompat ke konten utama

Kompetisi Ajak Teman: hadiah total Rp1.000.000 tunai untuk 3 pengajak terbanyak. Berakhir 29 November 2026. Ikut kompetisi

←

Aksesibilitas Web

Pelajaran 10 dari 16

Papan ketik, formulir, dan ARIA

Formulir berkelompok dan tabel data

Setelah pelajaran ini kamu bisa mengelompokkan pilihan dengan fieldset dan legend, memasang autocomplete untuk data pengguna, dan menandai tabel data dengan th, scope, dan caption.

±14 menitDiperiksa 28 Sep 2026

Materi

Label yang terlihat, hubungan label for dan id, petunjuk dengan aria-describedby, serta isi dan letak pesan galat sudah dibahas di kelas UX Writing, jadi tidak diulang. Pelajaran ini menambah dua hal di formulir dan satu hal di tabel.

Tutorial Grouping Controls W3C WAI memakai fieldset dan legend untuk grup tombol radio, kotak centang, dan kelompok kolom yang berhubungan seperti alamat pengiriman dan alamat tagihan. Legend adalah pertanyaan atau judul grupnya. Legend dibuat sesingkat mungkin, karena sebagian pembaca layar membacakannya bersama setiap label di dalam grup.

Kriteria 1.3.5 Identify Input Purpose (tingkat AA) meminta tujuan kolom yang mengumpulkan informasi tentang pengguna itu sendiri bisa ditentukan terprogram. Teknik H98 memakai atribut autocomplete dengan nilai baku, antara lain name untuk nama lengkap, given-name dan family-name, email, tel untuk nomor telepon lengkap, dan postal-code. Peramban lalu bisa mengisi otomatis, yang mengurangi beban ingatan dan mengetik bagi penyandang disabilitas kognitif dan gerak. Kriteria ini hanya berlaku untuk data tentang pengguna sendiri; kolom nama teman yang akan dikirimi hadiah tidak termasuk.

Untuk tabel data, WAI meminta sel judul ditulis th dan sel data td. Atribut scope menyatakan arah judul: col untuk judul kolom dan row untuk judul baris. Elemen caption menyatakan topik tabel. Tabel tidak dipakai untuk menata letak; tata letak diatur CSS.

<table>
  <caption>Harga buku tulis per pak</caption>
  <tr><th scope="col">Merek</th><th scope="col">Isi</th><th scope="col">Harga</th></tr>
  <tr><th scope="row">Cendana</th><td>10 buku</td><td>Rp35.000</td></tr>
</table>

Latihan

0/3 lulus

Jawaban diperiksa di server. Lulus berarti kamu memahami contohnya, bukan penilaian seluruh pekerjaanmu.

Latihan 3 dari 3

Formulir kirim kartu ucapan punya dua kolom: "Email Anda" dan "Nama penerima". Bagaimana kriteria 1.3.5 berlaku?

Pilih satu jawaban

Catatanmu

Memuat catatan…

tersimpan otomatis, ikut tercetak · 0/4.000

Luluskan semua latihan dulu untuk menandai pelajaran ini selesai.

Lanjutkan ke

Tampilkan 1 lagi