Mengatasi Image elements do not have [alt] attributes

Munculnya pesan Image elements do not have [alt] attributes akan mengurangi skor SEO pada audit website yang dilakukan dengan menggunakan Lighthouse pada Google Chrome DevTools. Tulisan ini memberi petunjuk tentang bagaimana cara mengatasinya untuk meningkatkan skor SEO website.

Bagusnya Lighthouse memberi informasi tentang elemen <img> mana yang tidak punya atribut alt di laman yang diperiksan dan harus diperbaiki, sehingga tidak perlu repot untuk mencarinya. Pada sebagian besar kasus, kalau tidak semuanya, Lighthouse memang memberi informasi tentang bagian mana yang gagal audit.

Saat menulis teks alt pada blog, perlu diingat bahwa salah satu tujuannya adalah untuk memberi informasi kepada pengunjung minim penglihatan tentang isi dan tujuan gambar. Orang yang tak bisa melihat harus bisa mendapatkan sebanyak mungkin informasi dari teks alt seperti pengguna yang matanya normal. Teks alt harus memberikan informasi tentang maksud, tujuan, dan makna gambar.

Sebuah teks alt baiknya berisikan kata-kata yang bisa digunakan untuk menyampaikan informasi atau fungsi yang sama dengan gambarnya.

Setiap foto atau gambar, baik yang ada di dalam tulisan maupun yang ada di dalam template Blogger maupun WordPress, hendaknya menggunakan teks alt yang deskriptif dan pendek, seperti:

<img alt="Audit Website dengan Chrome DevTools" src="...">

Jika di dalam template blog ada gambar atau foto yang dipakai sebagai background dan tidak punya konten yang berarti, Anda bisa memberikan atribut kosong, atau alt = "", agar lolos dari audit Lighthouse.

<img src="background.jpg" alt="">

Ketika teks alt yang deskriptif tersedia pada sebuah image, maka screen reader bisa mengubahnya menjadi suara atau huruf braille agar orang-orang dengan penglihatan rendah atau buta warna bisa mendapat informasi tentang image dan memahaminya.

Beberapa tips untuk menulis teks alt yang baik

Teks alt harus bisa memberi info tentang maksud, tujuan, dan makna gambar.
Pengguna buta harus mendapatkan sebanyak mungkin informasi dari teks alt seperti yang dilihat oleh pengguna normal.
Hindari kata-kata yang tidak spesifik seperti "bagan", "gambar", atau "diagram".

Tips: Cara Memperbaiki Kinerja Website dengan Lighthouse || Video

Setelah mengisi setiap image di tulisan dan template dengan teks alt, Anda bisa melakukan audit ulang dengan Lighthouse pada Chrome DevTools untuk melihat apakah masih ada yang terlewat dan harus diperbaiki lagi.
Label: Blogger, Inspirasi, Lighthouse, SEO, Tutorial, WordPress
Bagikan ke: WhatsApp, Email. Print!.

Penulis: Bambang Aroengbinang, seorang penyusur jalan.
Traktir BA secangkir kopi? Scan via 'Bayar' GoPay.