Latihan 1: Aksesibilitas Web Dasar — UI/UX

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

Kode awal punya <div class="header"> berisi <div class="nav">Navigation</div>, lalu <div class="content"> berisi <h3>Welcome</h3>, <img src="hero.jpg" /> tanpa alt, dan <h1>About Us</h1>. Isinya tetap, yang diganti elemennya:

Ganti <div class="header"> jadi <header>, dan <div class="nav"> di dalamnya jadi <nav>. <nav> harus tetap di dalam <header>.
Ganti <div class="content"> jadi <main>.
Beri gambar atribut alt yang menjelaskan isinya, misalnya alt="Tim Homestay Kabut di depan rumah". Alt-nya gak boleh kosong.
Jadikan Welcome <h1> dan About Us <h2>, supaya heading-nya berurutan. Dua-duanya dicek, beserta teksnya: <h1> di <main> berisi Welcome, <h2> berisi About Us.

Hint

Screen reader mengenali bagian halaman dari elemennya: header, nav, dan main jadi landmark, sedangkan div gak berarti apa-apa.
Strukturnya: <header> membungkus <nav>; <main> membungkus judul, gambar, dan subjudul. Gambar informatif butuh alt yang berisi, dan judul halaman adalah <h1>.
<header><nav>Navigation</nav></header> <main><h1>Welcome</h1><img src="hero.jpg" alt="Tim Homestay Kabut di depan rumah"><h2>About Us</h2></main>

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

Versi baru

HyperSheets

bagian dari BelajarWeb.dev

Membuka gerbang…

Latihan 1: Aksesibilitas Web Dasar — UI/UX

Hint

Memperbarui Aplikasi