Alt Text Dasar
Pelajari cara menulis alt text sederhana agar gambar punya makna yang bisa dipahami.
Tujuan belajar
- Memahami fungsi alt text pada gambar
- Membedakan gambar bermakna dan dekoratif secara sederhana
- Menulis alt text berdasarkan makna gambar di halaman
Isi lesson
6 blok- 1.Alt text menjelaskan makna gambarBelum selesaiWajib
- 2.Contoh alt text yang bergunaBelum selesaiWajib
- 3.Hindari alt yang terlalu umumBelum selesaiWajib
- 4.Cek pemahamanBelum selesaiWajib
- 5.Coding practiceBelum selesaiWajib
- 6.RingkasanBelum selesaiWajib
Alt text menjelaskan makna gambar
WajibAlt text adalah teks alternatif untuk gambar. Teks ini membantu saat gambar gagal dimuat dan membantu assistive technology memahami makna gambar. Untuk tahap awal, pakai pertanyaan ini: apa makna gambar ini untuk halaman? Jawabannya biasanya lebih berguna daripada hanya menyebut bentuk visualnya.
Bagian ini memengaruhi progres lesson.
Contoh alt text yang berguna
Wajib<img src="profile.jpg" alt="Foto profil Agastyo" />
<img src="chart.png" alt="Grafik peningkatan progres belajar minggu ini" />Alt pertama menjelaskan siapa yang ada di foto. Alt kedua menjelaskan makna grafik, bukan hanya menulis 'grafik' atau nama file. Alt text yang baik mengikuti konteks halaman.
Bagian ini memengaruhi progres lesson.
Kesalahan umum
WajibHindari alt yang terlalu umum
Alt seperti gambar, foto, atau image biasanya tidak membantu. Jangan juga mengulang teks di sekitar gambar jika gambar tidak menambah informasi baru. Untuk gambar dekoratif, empty alt bisa dipakai nanti, tetapi untuk sekarang fokus dulu pada gambar yang punya makna.
Bagian ini memengaruhi progres lesson.
Cek pemahaman
WajibJawab duluCek pemahaman singkat
Alt text mana yang paling membantu untuk gambar grafik progres belajar?
Progres lesson naik setelah jawaban benar.
Coding practice
WajibDibuka di workspace khususMenulis alt text yang berguna
Latihan memperbaiki alt text agar menjelaskan makna gambar dalam konteks halaman.
Tujuan awal: Tambahkan atau perbaiki alt pada gambar.
Practice ini dibuka di workspace khusus. Buka practice untuk memakai editor, preview, dan cek otomatis.
Tombol selesai aktif setelah semua validasi wajib lolos.
Ringkasan
Wajib- Alt text menjelaskan makna gambar.
- Alt text membantu saat gambar tidak terlihat atau tidak bisa dimuat.
- Alt text yang baik mengikuti konteks halaman.
- Berikutnya, kamu akan mengecek apakah halaman bisa dipakai dengan keyboard.
Bagian ini memengaruhi progres lesson.
Langkah berikutnya
Selesaikan bagian penting lesson ini
Lanjutkan blok wajib berikutnya: Alt text menjelaskan makna gambar.