Latihan 1: Creating & Using Icons — UI/UX

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

Kode awal punya dua tombol. Yang pertama, <button class="btn-with-text">, berisi ikon <svg> dan teks "Simpan": ikonnya cuma hiasan, karena teksnya sudah menyebut aksinya. Yang kedua, <button class="btn-icon-only">, cuma berisi ikon <svg> silang, jadi belum punya nama.

Di <svg> tombol pertama, tambahkan aria-hidden="true", supaya pembaca layar cuma membacakan "Simpan". Teks "Simpan"-nya tetap.
Di tombol kedua, tambahkan aria-label yang gak kosong, misalnya aria-label="Tutup galeri foto".
<svg> di tombol kedua tetap ada.

Kamu juga boleh menambah aria-hidden="true" di <svg> tombol kedua; itu gak dinilai.

Hint

Setiap tombol butuh satu nama yang bisa dibacakan. Tombol pertama sudah punya teks "Simpan", jadi ikonnya disembunyikan; tombol kedua gak punya teks sama sekali, jadi dia butuh nama.
Ikon hiasan disembunyikan lewat satu atribut di <svg>-nya. Nama untuk tombol tanpa teks ditulis lewat satu atribut di tag <button> itu sendiri, bukan di <svg>.
<svg aria-hidden="true" ...> di tombol pertama, dan <button class="btn-icon-only" aria-label="Tutup galeri foto"> ...svg yang sama... </button>

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

Versi baru

HyperSheets

bagian dari BelajarWeb.dev

Membuka gerbang…

Latihan 1: Creating & Using Icons — UI/UX

Hint

Memperbarui Aplikasi