Menggunakan atribut alt dalam menyediakan alternatif berupa teks untuk gambar
Gambar adalah komponen penting pada sebagian besar halaman web, dan tentu saja menjadi titik-lekat khusus bagi pengguna yang lemah penglihatannya. Kita harus mempertimbangkan peran gambar di halaman untuk menentukan jenis alternatif teks yang harus digunakan. Lihat 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 halaman, kita memiliki gambar seekor kucing, yang mengilustrasikan artikel tentang
perilaku kecenderungan menilai yang sudah dikenali pada kucing. Pembaca layar akan membacakan gambar ini menggunakan
nama literalnya, "/160204193356-01-cat-500.jpg"
. Jawaban Anda akurat, tetapi tidak
berguna sama sekali.
Anda dapat menggunakan atribut alt
untuk memberikan alternatif teks yang berguna bagi gambar ini — misalnya, "Seekor kucing menatap tajam ke luar angkasa".
<img src="/160204193356-01-cat-500.jpg" alt="A cat staring menacingly off into space">
Kemudian, pembaca layar dapat membacakan deskripsi singkat tentang gambar tersebut ( terlihat di panel VoiceOver hitam) dan pengguna dapat memilih apakah akan melanjutkan ke artikel tersebut.
Beberapa komentar tentang alt
:
alt
memungkinkan Anda menentukan string sederhana untuk digunakan setiap kali gambar tidak tersedia, seperti saat gambar gagal dimuat, atau diakses oleh bot perayapan web, atau ditemukan oleh pembaca layar.alt
berbeda dengantitle
, atau jenis teks apa pun, karena hanya digunakan jika gambar tidak tersedia.
Menulis teks alternatif yang berguna ada seninya. Agar string dapat digunakan sebagai alternatif teks, string tersebut harus menyampaikan konsep yang sama dengan gambar, dalam konteks yang sama.
Perhatikan gambar logo yang ditautkan di masthead halaman seperti yang ditampilkan di atas. Kita dapat menjelaskan gambar tersebut dengan sangat akurat sebagai "Logo The Funion".
<img class="logo" src="logo.jpg" alt="The Funion logo">
Mungkin kita tergoda untuk memberikan alternatif berupa teks yang lebih sederhana berupa "beranda" atau "halaman utama", tetapi hal itu tidak menguntungkan bagi pengguna yang penglihatannya lemah maupun tajam.
Namun, bayangkan seorang pengguna pembaca layar yang ingin menemukan logo masthead di halaman. Memberinya nilai alt "beranda" justru akan membuat pengalaman yang lebih membingungkan. Pengguna yang berpenglihatan tajam pun akan menghadapi kendala yang sama — mengetahui apa yang terjadi saat mengklik logo situs — seperti halnya pengguna pembaca layar.
Di sisi lain, menjelaskan gambar tidak selalu berguna. Misalnya,
perhatikan gambar kaca pembesar di dalam tombol penelusuran yang berisi teks
"Telusuri". Jika teks itu tidak ada, Anda pasti akan memberi gambar itu nilai alt
"telusuri". Namun karena kita memiliki teks yang terlihat, pembaca layar akan
mengambil dan membacakan kata "telusuri" dengan lantang; sehingga, nilai alt
yang identik pada
gambar menjadi berlebihan.
Namun, kita tahu bahwa jika membiarkan teks alt
, kita mungkin akan mendengar
nama file gambar sebagai gantinya, yang tidak ada gunanya dan mungkin akan membingungkan. Dalam
hal ini, Anda cukup menggunakan atribut alt
kosong, dan pembaca layar akan
melewati gambar sama sekali.
<img src="magnifying-glass.jpg" alt="">
Singkatnya, semua gambar harus memiliki atribut alt
, tetapi tidak semuanya
harus memiliki teks. Gambar penting harus memiliki teks alternatif deskriptif yang menjelaskan
secara singkat tentang gambar tersebut, sedangkan gambar dekoratif harus memiliki atribut alt
kosong — yaitu, alt=""
.