Pengertian Alt Text
Alt-text adalah teks alternatif yang muncul ketika gambar di website tidak dapat ditampilkan atau dibaca oleh perangkat screen reader.
Ketika gambar gagal dimuat, alt-text akan muncul sebagai pengganti, memberikan konteks kepada audiens tentang gambar apa yang seharusnya ditampilkan. Hal ini sangat penting untuk aksesibilitas web supaya pengguna dengan keterbatasan penglihatan/visual dapat memahami konten visual yang ada di website.
Tak hanya itu, alt-text juga memainkan peran penting dalam Search Engine Optimization (SEO). Mesin pencari seperti Google menggunakan alt-text untuk memahami konten gambar yang pada gilirannya dapat meningkatkan ranking website dalam hasil pencarian.
Namun, tidak semua gambar memerlukan alt-text.
Gambar yang bersifat dekoratif dan tidak menambahkan informasi atau konteks ke halaman biasanya tidak memerlukan alt-text. Sebaliknya, gambar yang menyediakan informasi tambahan atau konteks, seperti ikon keranjang belanja atau grafik data, harus selalu memiliki alt-text yang deskriptif.
Tempat untuk memasukkan alt-text biasanya tergantung pada Content Management System (CMS) atau platform yang digunakan. Misalnya, di WordPress, alt-text bisa ditambahkan melalui Media Library. Sementara di Wix atau Squarespace, opsi untuk alt-text umumnya ada di bagian "Pengaturan" saat mengeklik atau menambahkan gambar.
Namun, Jika menggunakan HTML, alt-text bisa ditambahkan langsung ke dalam tag gambar menggunakan atribut alt.
Mangapa Alt Text Penting?
Berikut beberapa alasan pentingnya menggunakan alt-text:
- Meningkatkan aksesibilitas: alt-text membantu screen reader membacakan deskripsi gambar kepada pengguna dengan keterbatasan visual, sehingga membuat website lebih mudah diakses siapa pun.
- Search Engine Optimization (SEO): mesin pencari menggunakan alt-text untuk memahami konten gambar yang dapat meningkatkan ranking website dalam hasil pencarian dan pencarian gambar.
- Meningkatkan user experience: jika gambar gagal dimuat, alt-text akan muncul sebagai pengganti, memberikan konteks kepada audiens tentang apa yang seharusnya ditampilkan.
- Meningkatkan traffic dari pencarian gambar: gambar yang memiliki alt-text lebih mungkin untuk muncul dalam hasil pencarian gambar (seperti Google Images) yang meningkatkan traffic ke website.
- Membantu memberikan konteks dalam konten: alt-text harus disesuaikan dengan konteks konten sekitarnya. Dengan begitu, teks ini akan memberikan informasi yang lebih rinci atau spesifik tergantung pada kebutuhan konten.
- Meningkatkan reputasi merek: website yang mudah diakses dan SEO-friendly dianggap lebih profesional dan dapat meningkatkan reputasi merek.
Contoh Alt Text
Pada gambar di atas, alt-text yang digunakan sebagai berikut:
alt="cara kerja server dengan menampung data client agar mudah diakses pengguna melalui internet"
Contoh lain adalah penggunaan alt-text untuk menjelaskan perbedaan populasi dan sampel:
alt=”perbedaan populasi dan sampel, di mana lingkaran besar untuk populasi dan lingkaran kecil sebagai sampel”
FAQ (Frequently Asked Question)
Bagaimana cara menulis alt text yang baik?
Ada beberapa hal yang harus diperhatikan saat menulis alt-text:
- Deskriptif tapi ringkas: alt-text harus memberikan deskripsi yang singkat namun tetap informatif tentang gambar. Hal ini dikarenakan beberapa teknologi seperti perangkat screen reader membatasi pembacaan alt-text sekitar 125 karakter.
- Pertimbangkan konteks: selalu mempertimbangkan konteks di mana gambar ditempatkan. Deskripsi alt-text harus sesuai dengan informasi atau pesan yang ingin disampaikan oleh konten sekitarnya.
- Hindari pengulangan: jangan menggunakan frasa berlebihan seperti "gambar dari" atau "foto dari" karena dianggap mengulang makna. Teknologi bantuan dan mesin pencari sudah tahu bahwa itu adalah gambar.
- Gunakan keyword dengan bijak: memasukkan keyword yang relevan dapat membantu dalam SEO, tetapi jangan melakukannya secara berlebihan agar tidak dianggap spam.
- Jangan lewatkan gambar penting: gambar yang menyediakan informasi atau konteks penting harus selalu memiliki alt-text. Gambar ini termasuk grafik data dan ikon yang menunjukkan aksi (seperti keranjang belanja).
- Kosongkan alt-text untuk gambar dekoratif: jika gambar bersifat dekoratif dan tidak menambahkan informasi atau konteks ke halaman, biarkan alt-text kosong. Hal ini memberi tahu screen reader untuk mengabaikan gambar tersebut.
- Uji dengan screen reader: salah satu cara terbaik untuk memastikan alt-text berfungsi adalah mengujinya menggunakan screen reader. Cara ini memberikan perspektif tentang bagaimana pengguna dengan keterbatasan visual akan memahami website.
- Periksa ejaan dan tata bahasa: seperti konten lainnya di website, pastikan alt-text bebas dari kesalahan ejaan atau tata bahasa yang berpengaruh terhadap kualitas dan keefektifannya.
