# Cek Teks Alt Gambar Masukkan alamat halaman untuk melihat setiap gambar di dalamnya beserta teks alt-nya, dibaca di browser sungguhan setelah skrip selesai berjalan. Lihat gambar mana yang tidak punya teks alt, mana yang ditandai dekoratif, dan mana yang teks alt-nya tidak mendeskripsikan apa pun. ## Yang dicek alat ini - Gambar tanpa teks alt: Setiap elemen img dan tombol gambar yang tidak memiliki atribut alt maupun nama aksesibel lain, seperti aria-label. - Gambar bertautan yang membuat link tidak punya nama: Logo dan ikon di dalam link atau tombol yang tidak punya teks alt maupun teks lain, sehingga pembaca layar hanya bisa mengumumkan “link”. - Teks alt yang terlihat seperti nama file: Nilai seperti IMG_2041.jpg, DSC0042, atau deretan angka panjang, yang diisi otomatis oleh banyak sistem saat gambar diunggah. - Kata-kata umum: Teks alt yang hanya berisi “gambar”, “foto”, “logo”, atau “banner” tidak memberi tahu siapa pun apa yang ditampilkan gambar. - Teks yang berlebihan dan berulang: Deskripsi yang diawali “gambar dari”, mengulang teks link di sebelahnya, atau dipakai ulang di tiga gambar berbeda atau lebih. - Gambar dekoratif dan tersembunyi: Gambar yang ditandai alt="" atau role="presentation", serta gambar yang disembunyikan dengan aria-hidden atau CSS, dicantumkan terpisah agar Anda bisa memastikan masing-masing memang dekoratif. - Pratinjau setiap gambar: Thumbnail di samping teks alt-nya, sehingga Anda bisa menilai setiap deskripsi dalam hitungan detik. Filter hanya menampilkan masalah atau hanya yang perlu dicek. ## Yang tidak dapat dicek - Menentukan apakah teks alt akurat. Hanya orang yang bisa melihat gambar dan tahu mengapa gambar itu ada di halaman yang dapat menilainya. - Memeriksa gambar yang dipasang sebagai latar belakang CSS, atau alternatif teks untuk grafik SVG dan canvas. Alat ini mencantumkan elemen img dan tombol gambar. - Memeriksa gambar di dalam frame, seperti video sematan, peta, dan iklan. - Mencantumkan lebih dari 150 gambar. Pada halaman yang sangat panjang, alat ini menampilkan 150 gambar pertama dan menyebutkan jumlah totalnya. - Menguji halaman lain. Pemindaian gratis lengkap memeriksa teks alt bersama aturan WCAG lainnya di hingga lima halaman penting. ## Mengapa ini penting Teks alt adalah apa yang dibacakan pembaca layar sebagai pengganti gambar, dan apa yang ditampilkan browser saat gambar gagal dimuat. Kriteria keberhasilan 1.1.1 WCAG 2.2, pada Level A, mensyaratkan alternatif teks untuk setiap gambar yang membawa informasi, dan alternatif kosong untuk gambar yang tidak membawa informasi. Teks alt yang hilang adalah kegagalan aksesibilitas kedua yang paling umum di web: analisis WebAIM tahun 2026 menemukannya di 53,1% halaman beranda satu juta situs teratas, dan 16,2% dari semua gambar yang diperiksa tidak memiliki teks alt. Mesin pencari juga membacanya. Google menyatakan bahwa mereka menggunakan teks alt bersama computer vision dan konten halaman untuk memahami gambar, dan bahwa teks alt gambar bertautan berfungsi seperti anchor text link tersebut. ## Cara membaca hasilnya - Tanpa teks alt: Gambar tidak memiliki atribut alt maupun nama lain. Tergantung software-nya, pembaca layar mungkin membacakan nama file atau melewati gambar. - Dekoratif: alt="" atau role="presentation": pembaca layar melewati gambar. Tepat untuk dekorasi; keliru untuk gambar yang membawa informasi atau menjadi satu-satunya konten sebuah link. - Ada teks alt: Gambar memiliki deskripsi. Kami menandai yang terlihat keliru; sisanya tetap perlu dicek manusia untuk memastikan keakuratannya. - Diberi nama lewat ARIA atau title: Tidak ada atribut alt, tetapi ada nama dari aria-label, aria-labelledby, atau title. Ini lolos pengujian otomatis; alt tetap pilihan yang lebih andal. - Tersembunyi: Tidak ditampilkan, atau disembunyikan dari teknologi bantu dengan aria-hidden. Tidak ada yang perlu diperbaiki kecuali gambar itu seharusnya terlihat. - Tautan tanpa nama: Link atau tombol yang satu-satunya kontennya adalah gambar tanpa alternatif teks. Ini tetap gagal meskipun gambarnya sendiri dekoratif. - Periksa: Teks alt yang terlihat seperti nama file atau kata umum, diawali “gambar dari”, mengulang teks link, sangat panjang, atau dipakai ulang di beberapa gambar. ## Cara memperbaiki masalah yang paling umum - Foto produk dan konten: Jelaskan apa yang akan terlewat oleh seseorang tanpa gambar itu, dalam konteks halaman. Untuk produk: barangnya, warnanya, dan sudut pandang yang ditampilkan. Untuk foto artikel: apa yang ditunjukkan foto itu yang tidak disampaikan teks. - Logo yang menautkan ke beranda: Gambar bertautan harus menyebutkan ke mana link mengarah. Untuk logo yang menautkan ke beranda, gunakan nama perusahaan, misalnya alt="Beranda Acme", bukan “logo”. - Ikon di dalam link dan tombol: Beri ikon teks alt yang menyebutkan tindakannya, seperti “Cari” atau “Keranjang”, atau beri link aria-label dan tandai ikon sebagai dekoratif dengan alt="". - Gambar dekoratif: Gunakan alt="" (nilai kosong, bukan atribut yang tidak ada) untuk garis pemisah, ornamen latar, dan gambar yang mengulang teks tepat di sebelahnya. - Nama file yang diisi platform Anda: Banyak platform menyalin nama file ke kolom alt saat gambar diunggah. Ubah di tempat gambar dikelola: di Shopify, pada media produk; di WordPress, pada kolom Teks Alternatif di Pustaka Media. - Grafik dan infografik: Beri alt singkat yang menyebutkan apa yang ditunjukkan grafik, lalu sajikan datanya atau ringkasannya di teks atau tabel di sebelahnya. ## Pertanyaan yang sering diajukan ### Apa itu teks alt? Atribut alt pada gambar berisi alternatif teksnya. Pembaca layar membacakannya, dan browser menampilkannya ketika gambar tidak dapat ditampilkan. ### Apakah setiap gambar harus punya teks alt? Setiap elemen img harus memiliki atribut alt. Untuk gambar yang membawa informasi, atribut ini mendeskripsikan gambar; untuk gambar dekoratif, atribut ini harus kosong (alt="") agar dilewati pembaca layar. ### Seberapa panjang teks alt sebaiknya? WCAG tidak menetapkan batas. Teks alt yang baik biasanya berupa frasa atau kalimat pendek. Jika gambar perlu penjelasan lebih, jelaskan di teks halaman atau keterangan gambar dan buat alt tetap singkat. Kami menandai teks alt lebih dari 150 karakter untuk ditinjau ulang. ### Apakah teks alt membantu SEO? Google menyatakan bahwa mereka menggunakan teks alt, bersama computer vision dan konten halaman, untuk memahami gambar, dan bahwa teks alt gambar bertautan berfungsi seperti anchor text. Google juga memperingatkan bahwa menjejali atribut alt dengan kata kunci dapat dianggap spam. ### Apakah atribut title sama dengan alt? Tidak. title muncul sebagai tooltip saat kursor diarahkan ke elemen, tidak diumumkan secara andal oleh pembaca layar, dan tidak tersedia di layar sentuh. Pengujian otomatis menerimanya sebagai nama jika alt tidak ada, tetapi alt adalah pilihan yang andal. ### Bisakah AI menulis teks alt saya? AI bisa membuat draf deskripsi, tetapi tidak tahu mengapa gambar itu ada di halaman Anda. Tinjau setiap draf: teks alt yang tepat bergantung pada konteks yang hanya Anda ketahui. ## Sumber - [W3C: Memahami kriteria keberhasilan 1.1.1 Non-text Content WCAG 2.2](https://www.w3.org/WAI/WCAG22/Understanding/non-text-content) - [W3C Images Tutorial: Pohon keputusan alt (An alt decision tree)](https://www.w3.org/WAI/tutorials/images/decision-tree/) - [W3C Images Tutorial: Gambar fungsional (Functional images)](https://www.w3.org/WAI/tutorials/images/functional/) - [Google Search Central: Praktik terbaik SEO untuk gambar](https://developers.google.com/search/docs/appearance/google-images) - [Deque: Aturan image-alt axe-core](https://dequeuniversity.com/rules/axe/4.13/image-alt) - [WebAIM: The WebAIM Million (2026)](https://webaim.org/projects/million/)