Lompat ke konten utama
←

UX Writing

Pelajaran 6 dari 14

Pesan galat dan pesan keberhasilan

Letak dan kode pesan galat

Setelah pelajaran ini kamu bisa menempatkan pesan galat di samping kolom dan di ringkasan galat, lalu menghubungkannya ke kolom dengan aria-describedby dan aria-invalid.

±14 menitDiperiksa 28 Sep 2026

Materi

GOV.UK Error message meminta pesan galat ditampilkan di samping kolom, sesudah teks pertanyaan dan petunjuk, dengan garis merah yang menghubungkan pesan dengan kolomnya. Pada saat yang sama, semua galat diringkas di atas halaman dengan komponen Error summary. Apple menulis aturan yang sama dengan kalimat lain: tampilkan galat sedekat mungkin dengan masalahnya. Panduan Dialog Microsoft melarang dialog untuk galat validasi; galat seperti itu tampil langsung di halaman.

Ringkasan galat GOV.UK selalu muncul bila ada galat, walau hanya satu. Judulnya There is a problem (Ada masalah), fokus papan ketik dipindah ke sana, dan setiap galat menjadi tautan ke jawaban yang salah dengan bunyi yang sama persis dengan pesan di samping kolom. Untuk jawaban yang terdiri atas beberapa kolom, seperti tanggal dengan kolom hari, bulan, dan tahun, tautan menuju kolom pertama yang galat; untuk pilihan radio atau kotak centang, tautan menuju pilihan pertama. Satu pertanyaan tetap satu pesan, walau kolomnya tiga. Isian yang sudah diketik jangan dikosongkan, supaya orang bisa melihat dan menyunting jawabannya.

Di kode, tutorial W3C menghubungkan pesan ke kolomnya dengan aria-describedby yang berisi id elemen pesan; MDN menjelaskan bahwa atribut itu menunjuk elemen yang mendeskripsikan kolom, sehingga pembaca layar membacakannya sesudah label. MDN juga meminta aria-invalid="true" dipasang setelah validasi, bukan pada kolom kosong sebelum orang mencoba mengirim. Komponen GOV.UK menambahkan awalan tersembunyi Error: untuk pembaca layar dan mengizinkan awalan itu diganti sesuai bahasa, misalnya Galat:.

<label for="kode-pos">Kode pos</label>
<p id="kode-pos-galat" class="galat"><span class="visually-hidden">Galat:</span> Kode pos harus 5 angka</p>
<input type="text" id="kode-pos" name="kode-pos" value="5521" aria-describedby="kode-pos-galat" aria-invalid="true">

Latihan

0/3 lulus

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

Latihan 2 dari 3

Pernyataan mana yang sesuai komponen Error summary GOV.UK?

Pilih satu jawaban

Latihan 3 dari 3

Formulir pendaftaran vaksinasi hewan dikirim dengan keadaan ini: Nama pemilik kosong; Tanggal lahir hewan (kolom hari, bulan, tahun) berisi hari saja, bulan dan tahun kosong; Jenis hewan (pilihan radio) belum dipilih; Nomor telepon dan Alamat terisi benar. Mengikuti GOV.UK Error message dan Error summary, berapa pesan galat yang tampil di halaman seluruhnya, dihitung dari ringkasan dan dari samping kolom?

Catatanmu

Memuat catatan…

tersimpan otomatis, ikut tercetak · 0/4.000

Luluskan semua latihan dulu untuk menandai pelajaran ini selesai.

Lanjutkan ke