Hampir semua developer mengetahui bahwa elemen <img> sebaiknya memiliki atribut alt (alternative text).

Sayangnya, masih banyak yang menganggap fungsi utama ALT Text hanyalah untuk membantu optimasi mesin pencari (SEO).

Akibatnya muncul penulisan seperti berikut.

Bagi pengguna screen reader, ALT Text seperti itu tidak memberikan informasi yang bermanfaat.

Bayangkan Anda sedang mendengarkan artikel melalui pembaca layar, kemudian tiba-tiba terdengar:

"Sepatu murah sepatu lari pria beli sepatu olahraga Jakarta."

Alih-alih membantu memahami isi halaman, pengguna justru mendapatkan rangkaian kata yang sulit dipahami.

Padahal tujuan utama ALT Text bukan untuk mesin pencari, melainkan untuk memberikan informasi kepada pengguna yang tidak dapat melihat gambar.

Pada artikel ini kita akan mempelajari cara menulis ALT Text yang singkat, jelas, dan sesuai dengan standar WCAG.

Apa Itu ALT Text?

ALT Text (alternative text) adalah teks alternatif yang menggambarkan isi atau fungsi sebuah gambar.

ALT Text digunakan ketika:

1. gambar gagal dimuat;
2. pengguna menggunakan screen reader;
3. gambar sengaja dimatikan oleh browser;
4. atau teknologi bantu memerlukan deskripsi gambar.

Tujuan utamanya adalah memastikan informasi yang disampaikan gambar tetap dapat dipahami meskipun gambar tersebut tidak terlihat.

Aturan 1: Jangan Menulis "Gambar" atau "Foto"

Sebagian besar screen reader sudah menginformasikan bahwa elemen tersebut adalah sebuah gambar.

Karena itu, tidak perlu menulis:

atau

Lebih baik langsung menjelaskan isi gambar.

Kurang Tepat

Direkomendasikan

Deskripsi menjadi lebih ringkas dan tidak mengulang informasi yang sudah diketahui pengguna.

Aturan 2: Bedakan Jenis Gambar

Tidak semua gambar memerlukan ALT Text yang panjang.

Secara umum terdapat beberapa jenis gambar.

A. Gambar Informatif

Gambar informatif menyampaikan informasi yang penting bagi isi halaman.

Contohnya:

1. foto produk;
2. grafik;
3. diagram;
4. ilustrasi pembelajaran;
5. foto kegiatan.

Jenis gambar ini harus memiliki ALT Text.

Kurang Tepat

Direkomendasikan

B. Gambar Dekoratif

Gambar dekoratif hanya berfungsi memperindah tampilan dan tidak menambah informasi.

Misalnya:

1. ornamen;
2. garis dekoratif;
3. ilustrasi latar belakang;
4. ikon yang hanya bersifat hiasan.

Untuk gambar seperti ini, gunakan ALT Text kosong.

ALT kosong memberi tahu screen reader bahwa gambar tersebut boleh diabaikan.

Catatan: Jangan menghapus atribut alt. Apabila atribut tersebut dihilangkan, sebagian browser atau screen reader dapat mencoba mencari informasi lain, misalnya nama berkas atau atribut lain, sehingga pengalaman pengguna menjadi kurang baik.

C. Gambar yang Berfungsi sebagai Tombol atau Tautan

Kadang gambar digunakan sebagai bagian dari tombol atau tautan.

Pada kondisi ini, ALT Text harus menjelaskan fungsi gambar, bukan tampilannya.

Sebagai contoh:

Bukan:

Karena yang ingin dilakukan pengguna adalah membuka keranjang belanja, bukan mengetahui bentuk ikonnya.

D. Gambar Kompleks

Beberapa gambar seperti:

1. infografik;
2. diagram alur;
3. peta;
4. grafik statistik yang rumit;

sering kali tidak cukup dijelaskan dalam satu kalimat.

Pada kondisi seperti ini, ALT Text cukup memberikan ringkasan singkat, sedangkan penjelasan lengkap sebaiknya tersedia pada teks di sekitar gambar atau pada bagian yang mudah diakses oleh semua pengguna.

Aturan 3: Konteks adalah Segalanya

ALT Text yang baik bergantung pada konteks halaman.

Misalnya terdapat gambar seekor kucing yang sedang tidur.

Jika gambar tersebut berada pada artikel mengenai ras kucing, ALT Text yang sesuai dapat berupa:

Namun apabila gambar yang sama digunakan pada artikel kesehatan hewan, ALT Text dapat menjadi:

Gambarnya sama.

ALT Text-nya berbeda.

Mengapa?

Karena informasi yang ingin disampaikan oleh halaman juga berbeda.

Hindari Keyword Stuffing

ALT Text bukan tempat untuk memasukkan sebanyak mungkin kata kunci SEO.

Kurang Tepat

Direkomendasikan

ALT Text yang alami jauh lebih bermanfaat bagi pengguna dan juga sesuai dengan rekomendasi mesin pencari modern.

Kesalahan yang Sering Terjadi

Praktik Cepat: Audit ALT Text pada Website Anda

Luangkan beberapa menit untuk memeriksa gambar pada proyek yang sedang Anda kerjakan.

Periksa beberapa hal berikut.

1. Apakah semua gambar informatif telah memiliki atribut alt?
2. Apakah ALT Text benar-benar menjelaskan informasi yang ingin disampaikan?
3. Apakah ada ALT Text yang hanya berisi kumpulan kata kunci SEO?
4. Apakah gambar dekoratif menggunakan alt=""?
5. Apakah gambar yang berfungsi sebagai tombol atau tautan memiliki ALT Text yang menjelaskan fungsinya?

Jika menemukan ALT Text yang kurang informatif, perbaiki sekarang.

Sering kali hanya diperlukan beberapa detik untuk menulis deskripsi yang lebih baik, tetapi manfaatnya sangat besar bagi pengguna screen reader maupun pengguna lain yang tidak dapat melihat gambar.

ALT Text bukan sekadar pelengkap HTML atau alat untuk meningkatkan SEO. Fungsi utamanya adalah menyediakan alternatif yang bermakna ketika gambar tidak dapat dilihat.

Tulislah ALT Text yang singkat, jelas, dan sesuai dengan konteks. Gunakan alt="" untuk gambar dekoratif, jelaskan fungsi gambar yang digunakan sebagai tombol atau tautan, serta hindari menumpuk kata kunci yang tidak memberikan manfaat bagi pengguna.

Dengan menulis ALT Text yang baik, Anda membantu memastikan bahwa informasi visual pada website tetap dapat diakses oleh semua orang, termasuk pengguna teknologi bantu seperti screen reader.