Teks Alt Gambar Kapan dan Bagaimana
Tulis teks alt yang menyampaikan makna gambar non-dekoratif.
Teks Alt Gambar Kapan dan Bagaimana adalah pelajaran HTML Academy gratis di CoddyKit. Ini adalah pelajaran 3 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar HTML Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus HTML Academy mencakup 4 pelajaran total.
Apa Itu Teks alt?
Atribut alt menyediakan teks alternatif untuk gambar:
- Dibacakan oleh pembaca layar, bukan gambar
- Ditampilkan saat gambar gagal dimuat
- Diindeks oleh mesin pencari
- Diwajibkan untuk kepatuhan terhadap WCAG
Aturan Emas
Teks alt harus menyampaikan informasi atau fungsi yang sama seperti yang akan diterima pengguna yang dapat melihat dari gambar tersebut:
<!-- The test: if you removed this image,
would the alt text give you the same information? -->
<!-- BAD: not descriptive -->
<img src="chart.png" alt="Chart">
<!-- GOOD: conveys the information -->
<img src="chart.png" alt="Bar chart showing 48% revenue increase from Q1 to Q4 2024">Gambar Informatif
Gambar yang menyampaikan informasi: jelaskan isinya:
<img
src="signup-flow.png"
alt="Five-step signup flow: Email → Profile → Plan → Payment → Confirmation"
>
<!-- Describe what the image shows, not what it is -->
<!-- BAD: 'Image of a graph' -->
<!-- GOOD: 'Line graph showing download growth from 10k to 150k per month' -->Gambar Dekoratif: alt Kosong
Gambar yang sepenuhnya dekoratif harus memiliki alt kosong agar dilewati:
<!-- Decorative separator -->
<img src="divider.png" alt="">
<!-- Icon beside text that already describes it -->
<img src="warning-icon.svg" alt=""> <span>Payment failed</span>
<!-- The icon duplicates the adjacent text — empty alt is correct -->
<!-- Never omit alt entirely — missing alt attribute is an error
Empty alt="" = intentionally decorative
Missing alt = unknown, screen readers may read the filename -->Gambar Fungsional
Gambar yang memiliki fungsi — jelaskan fungsinya, bukan tampilannya:
<!-- Logo that links to home -->
<a href="/">
<img src="logo.svg" alt="CoddyKit — Go to homepage">
</a>
<!-- Describes the destination, not the logo's appearance -->
<!-- Submit button using an image -->
<input type="image" src="submit.png" alt="Submit registration form">
<!-- Describes what happens when activated -->Gambar Kompleks: Figure dan Deskripsi Panjang
Bagan atau diagram kompleks mungkin memerlukan lebih dari sekadar alt singkat:
<figure>
<img
src="complex-diagram.png"
alt="Network architecture diagram — see the description below"
aria-describedby="diagram-desc"
>
<figcaption id="diagram-desc">
<p>The diagram shows three tiers: a client layer with browsers and mobile apps,
a middle tier with load balancers and app servers,
and a data tier with primary and replica databases.</p>
</figcaption>
</figure>Gambar Berisi Teks
Hindari gambar berisi teks — jika harus menggunakannya, alt harus sama persis dengan teks tersebut:
<!-- Logo with text 'CoddyKit' -->
<img src="text-logo.png" alt="CoddyKit">
<!-- Promotional banner with text 'Save 50% this week only' -->
<img src="promo.jpg" alt="Save 50% this week only">
<!-- Better: use real HTML text styled with CSS
Images of text fail at zoom and high contrast modes -->Konteks Mengubah alt
Gambar yang sama mungkin memerlukan teks alt yang berbeda dalam konteks yang berbeda:
<!-- As part of an article about dogs: -->
<img src="golden.jpg" alt="Golden retriever fetching a yellow tennis ball">
<!-- As a product photo for 'Golden Retriever Dog Toy':
<img src="golden.jpg" alt="Golden retriever playing with our premium fetch toy">
<!-- As a decorative header image:
<img src="golden.jpg" alt=""> -->Panjang Teks alt
Panduan untuk panjang teks alt:
- Buat tetap ringkas — tidak perlu memulainya dengan 'Gambar' atau 'Foto'
- Usahakan kurang dari 125 karakter (beberapa pembaca layar memotongnya pada 125 karakter)
- Untuk gambar kompleks, gunakan alt singkat + aria-describedby untuk deskripsi tambahan
- Jangan memenuhi teks dengan kata kunci — tulislah untuk manusia
Menguji Teks alt
Cara menguji teks alt Anda:
- Nonaktifkan gambar di browser (Firefox: Alat → Gaya Halaman → Tanpa Gaya)
- Gunakan alat WAVE untuk melihat semua teks alt sekaligus
- Dengarkan dengan VoiceOver/NVDA untuk mendengar apa yang diumumkan
- Jalankan Lighthouse: Aksesibilitas → Elemen gambar memiliki atribut [alt]
SVG dan Nama Aksesibel
Untuk SVG sebaris, sediakan nama aksesibel dengan cara yang berbeda:
<!-- Standalone SVG with title: -->
<svg role="img" aria-labelledby="icon-title">
<title id="icon-title">Settings</title>
<!-- SVG paths -->
</svg>
<!-- Decorative SVG: -->
<svg aria-hidden="true">
<!-- paths -->
</svg>Pemeriksaan Singkat
Nilai alt apa yang harus dimiliki gambar yang sepenuhnya dekoratif?
Ringkasan: Teks alt
Hal-hal penting tentang teks alt:
- Selalu sertakan atribut alt; gunakan alt="" untuk gambar dekoratif
- Jelaskan informasinya, bukan tampilannya
- Gambar fungsional: jelaskan tindakan/tujuannya
- Gambar kompleks: alt singkat + aria-describedby untuk deskripsi lengkap
- Gambar berisi teks: alt harus sama persis dengan teks tersebut
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Teks Alt Gambar Kapan dan Bagaimana” gratis?
Ya — teks lengkap “Teks Alt Gambar Kapan dan Bagaimana” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus HTML Academy, upgrade ke CoddyKit PRO. Kursus HTML Academy mencakup 4 pelajaran total.
Apa yang akan aku pelajari di “Teks Alt Gambar Kapan dan Bagaimana”?
Tulis teks alt yang menyampaikan makna gambar non-dekoratif. Kamu berlatih HTML Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.
Apakah aku perlu pengalaman untuk memulai HTML Academy?
Tidak diperlukan pengalaman sebelumnya. HTML Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 3 dari 4.
Berapa lama pelajaran “Teks Alt Gambar Kapan dan Bagaimana” memakan waktu?
Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.
Bisakah aku menulis dan menjalankan kode dalam pelajaran HTML Academy ini?
Ya. Setiap pelajaran HTML Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.
Semua pelajaran dalam kursus ini
- Mengapa Aksesibilitas Penting Tingkatan WCAG
- Hierarki Judul untuk Pembaca Layar
- Teks Alt Gambar Kapan dan Bagaimana
- Navigasi Papan Ketik dan Urutan Fokus