Latihan 1: Feedback & States — UI/UX

Latihan 1 dari materi Feedback & States di UI/UX — praktek dengan editor kode interaktif, test case otomatis, dan hint terpandu. Langsung jalan di browser.

Kode awal punya kolom email yang salah isi: <input type="email" id="email" class="input-error"> dengan pesan <span id="email-error" class="error-msg">Email tidak valid.</span> di bawahnya, dan CSS .input-error { border: 1px solid #ccc; }. Biarkan label, id, class, dan teks pesannya. Jadikan error state ini terlihat dan terbaca screen reader:

Di <input>: tambahkan aria-invalid="true" dan aria-describedby="email-error" (nilainya id pesan errornya).
Di <span class="error-msg">: tambahkan role="alert" supaya pesannya langsung dibacakan.
Di CSS: buat garis kolomnya merah dengan border-color: #EF4444 di aturan .input-error, misalnya ganti #ccc jadi #EF4444.

Hint

Error state yang baik terlihat (garis merah) dan terdengar: screen reader harus tahu kolomnya salah, pesan mana yang menjelaskannya, dan membacakan pesan itu saat muncul.
Kolomnya butuh dua atribut: satu yang menyatakan isiannya salah, satu yang menunjuk id pesan errornya. Pesannya butuh peran yang membuatnya langsung dibacakan. Warna garis diatur lewat border-color.
<input type="email" id="email" class="input-error" aria-invalid="true" aria-describedby="email-error" /> <span id="email-error" class="error-msg" role="alert">Email tidak valid.</span> dan .input-error { border: 1px solid #EF4444; }

</> { } .css => #id fn()

Versi baru

HyperSheets

bagian dari BelajarWeb.dev

Membuka gerbang…

Latihan 1: Feedback & States — UI/UX

Hint

Memperbarui Aplikasi