Responsif, formulir, dan aksesibilitas · Pelajaran 10

Misi: formulir pendaftaran yang rapi di HP

Tujuan: Pengguna dapat membuat formulir bertumpuk dengan label yang terhubung ke isiannya.

±12 menitDiperiksa 2026-09-22

Toko Nusantara membuka pelatihan kasir dan butuh formulir pendaftaran yang terbaca di layar 360 piksel. Tiga hal diperiksa dalam misi ini: struktur formulir, hubungan label dengan isian, dan kontras teks.

Label yang terhubung

W3C WAI menjelaskan atribut for pada label harus berisi nilai id milik isiannya. Hubungan itu membuat pembaca layar menyebutkan labelnya saat isian difokuskan, dan menekan teks label memindahkan fokus ke isian, yang memperbesar sasaran sentuh di layar kecil.

<label for="nama">Nama lengkap</label>
<input type="text" id="nama">

Teks alternatif gambar

Atribut alt berisi teks yang menggantikan gambar. W3C WAI menetapkan gambar yang membawa informasi diberi alt berisi keterangan singkat informasinya, sedangkan gambar yang hanya hiasan diberi alt kosong (alt="") supaya dilewati pembaca layar.

Kontras

WCAG 2.2 kriteria 1.4.3 menetapkan rasio kontras minimum 4.5:1 antara teks dan latarnya untuk teks berukuran biasa, dan 3:1 untuk teks besar (mulai 18 pt, atau 14 pt tebal).

Misi akhir modul. Selesaikan minimal 4 dari 4 tugas untuk menuntaskan modul ini.

Praktik

Ganti kedua paragraf menjadi label yang terhubung: label for="nama" dengan input id="nama", dan label for="surel" dengan input id="surel" type="email". Lalu susun isi .formulir bertumpuk dengan display: flex, flex-direction: column, dan gap: 12px.

Editor HTML & CSS

Hasil

Kode tersimpan otomatis saat kamu mengetik.

Pemeriksaan ini mencocokkan kodemu dengan instruksi latihan. Belum ada penilaian kualitas kode secara menyeluruh. Preview menjalankan HTML dan CSS saja, tanpa JavaScript.

Latihan 2 dari 4

Apa yang menghubungkan sebuah label dengan kotak isian yang dijelaskannya?

Jawaban diperiksa di server. Latihan ini memastikan kamu memahami contohnya — bukan bukti seluruh pekerjaanmu sudah benar.

Latihan 3 dari 4

Logo Toko Nusantara dipasang sebagai gambar di kepala formulir dan hanya berfungsi sebagai hiasan. Bagaimana atribut alt-nya ditulis?

Jawaban diperiksa di server. Latihan ini memastikan kamu memahami contohnya — bukan bukti seluruh pekerjaanmu sudah benar.

Latihan 4 dari 4

WCAG 2.2 kriteria 1.4.3 menetapkan rasio kontras minimum antara teks berukuran biasa dan latarnya. Berapa angka pembandingnya? Tulis angkanya saja, misalnya 3 untuk 3:1.

Jawaban diperiksa di server. Latihan ini memastikan kamu memahami contohnya — bukan bukti seluruh pekerjaanmu sudah benar.

Selesaikan latihannya dulu untuk menandai pelajaran ini selesai.

Lanjutkan ke

Sumber

MDN — Elemen label (situs lain)
MDN — Elemen input (situs lain)
MDN — Elemen img dan atribut alt (situs lain)
W3C WAI — Tutorial formulir: label (situs lain)
W3C WAI — Pohon keputusan teks alternatif (situs lain)
W3C — Memahami WCAG 2.2 kriteria 1.4.3 Contrast (Minimum) (situs lain)
web.dev — Learn Forms: Form fields (situs lain)
web.dev — Learn Accessibility: Forms (situs lain)

Materi kelas ini diadaptasi dari Microsoft Web Dev for Beginners — 3-terrarium (CSS layout) (MIT), web.dev — Learn CSS, Learn Forms, Learn Accessibility (CC-BY-3.0). Rincian perubahan ada di halaman kelas.