Alternatif Teks untuk Gambar

Menggunakan atribut alt dalam menyediakan alternatif teks untuk gambar

Alice Boxhall

Dave Gash

Meggin Kearney

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 mencari tahu jenis alternatif teks yang harus dimilikinya. 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>

Studi menunjukkan 9 dari 10 kucing diam-diam menilai pemiliknya saat tidur

Di halaman, kita memiliki gambar seekor kucing, yang mengilustrasikan artikel tentang perilaku kecenderungan menilai yang sudah dikenali pada kucing. Pembaca layar akan mengucapkan 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 gambar yang ringkas ( terlihat di panel VoiceOver warna hitam) dan pengguna dapat memilih apakah akan melanjutkan ke artikel tersebut atau tidak.

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 dengan title, 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 mendeskripsikan gambar tersebut dengan cukup 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 pengguna pembaca layar yang ingin menemukan logo masthead di halaman. Memberinya nilai alt "beranda" justru akan membuat pengalaman yang lebih membingungkan. Dan pengguna yang normal akan menghadapi tantangan yang sama, yaitu mencari tahu fungsi mengklik logo situs, sebagai pengguna pembaca layar.

Di sisi lain, menjelaskan gambar tidak selalu berguna. Misalnya, pertimbangkan gambar kaca pembesar di dalam tombol penelusuran yang memiliki teks "Cari". 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 gambar secara ringkas, sedangkan gambar dekoratif harus memiliki atribut alt kosong — yaitu, alt="".