Have questions about images on the web? Tweet your questions to @ChromiumDev with #AskChrome and we'll answer the top questions in our next #AskChrome episode on YouTube.

Alternatif Berupa Teks untuk Gambar

Gambar adalah komponen penting pada sebagian besar laman web, dan tentu saja menjadi titik-lekat khusus bagi pengguna yang lemah penglihatannya. Kita harus mempertimbangkan peran yang dimainkan gambar di laman untuk merencanakan tipe alternatif berupa teks yang harus digunakan. Perhatikan gambar ini.

<article>
  <h2>Study shows 9 out of 10 cats quietly judging their owners as they sleep</h2>
  <img src="imgs/160204193356-01-cat-500.jpg">
</article>

Study shows 9 out of 10 cats quietly judging their owners as they sleep

Di laman, kita memiliki gambar seekor kucing, yang mengilustrasikan perilaku kecenderungan menilai yang sudah dikenali pada kucing. Pembaca layar akan membacakan gambar ini dengan menggunakan nama literalnya, "/160204193356-01-cat-500.jpg". Itu memang akurat, namun tidak berguna sama sekali.

Anda bisa menggunakan atribut alt untuk menyediakan alternatif berupa teks yang berguna bagi gambar — misalnya, "A cat staring menacingly off into space."

<img src="/160204193356-01-cat-500.jpg" alt="A cat staring menacingly off into space">

Kemudian pembaca layar bisa membacakan keterangan singkat mengenai gambar tersebut ( terlihat di bilah hitam VoiceOver) dan pengguna bisa memilih apakah akan berpindah ke artikel tersebut.

Gambar dengan teks alternatif yang diperbaiki

Sepasang komentar tentang alt:

  • alt memungkinkan Anda menetapkan string sederhana untuk digunakan bila gambar tidak tersedia, misalnya bila gambar gagal dimuat, atau diakses melalui bot perayapan web, atau kebetulan ditemukan oleh pembaca layar.
  • alt berbeda dengan title, atau tipe teks, yang hanya akan digunakan jika gambar tidak tersedia.

Menulis teks alternatif yang berguna ada seninya. Agar string bisa digunakan, alternatif berupa teks perlu menyampaikan konsep yang sama dengan gambarnya, dalam konteks yang sama.

Perhatikan gambar logo yang ditautkan di masthead laman seperti yang ditampilkan di atas. Kita bisa menjelaskan gambar tersebut dengan sangat akurat sebagai "logo The Funion".

<img class="logo" src="logo.jpg" alt="Logo The Funion">

Mungkin kita tergoda untuk memberikan alternatif berupa teks yang lebih sederhana berupa "beranda" atau "laman utama", namun itu tidak menguntungkan bagi pengguna yang penglihatannya lemah maupun tajam.

Namun bayangkan seorang pengguna pembaca layar yang ingin mencari logo masthead di laman; memberinya nilai alt berupa "beranda" sesungguhnya malah akan menambah bingung. Pengguna yang berpenglihatan tajam pun akan menghadapi kendala yang sama — yang mengetahui logo situs dengan mengekliknya — seperti halnya pengguna pembaca layar.

Di lain pihak, menjelaskan gambar tidak selalu berguna. Misalnya, perhatikan gambar kaca pembesar di dalam tombol telusur yang berisi teks "Telusur". Jika teks itu tidak ada, Anda pasti akan memberi gambar itu nilai alternatif berupa "telusur". Namun karena kita memiliki teks yang terlihat, pembaca layar akan mengambil dan membacakan kata "telusur"; sehingga, nilai alt yang identik pada gambar menjadi berlebihan.

Akan tetapi, kita tahu bahwa jika membiarkan teks alt, mungkin kita akan mendengar nama file gambar sebagai gantinya, yang tidak ada gunanya dan mungkin akan membingungkan. Dalam hal ini, Anda bisa menggunakan atribut alt kosong saja, dan pembaca layar akan melewati gambar sama sekali.

<img src="magnifying-glass.jpg" alt="">

Singkatnya, semua gambar harus memiliki atribut alt, namun tidak semuanya harus memiliki teks. Gambar penting harus memiliki teks alternatif penjelas yang menjelaskan secara singkat mengenai gambar itu, sedangkan gambar dekoratif harus memiliki atribut alt yang kosong — yakni, alt="".