Alternatif Teks untuk Gambar

Menggunakan atribut alt untuk memberikan alternatif teks untuk gambar

Alice Boxhall
Alice Boxhall
X
Dave Gash
Dave Gash
Meggin Kearney
Meggin Kearney

Gambar adalah komponen penting dari sebagian besar halaman web, dan tentu saja merupakan masalah khusus bagi pengguna dengan gangguan penglihatan. Kita harus mempertimbangkan peran gambar di halaman untuk menentukan 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 bahwa 9 dari 10 kucing diam-diam menilai pemiliknya saat mereka tidur

kucing

Di halaman tersebut, kami memiliki gambar kucing, yang mengilustrasikan artikel tentang perilaku menghakimi kucing yang terkenal. Pembaca layar akan mengumumkan gambar ini menggunakan nama literalnya, "/160204193356-01-cat-500.jpg". Data tersebut akurat, tetapi tidak berguna sama sekali.

Anda dapat menggunakan atribut alt untuk memberikan alternatif teks yang berguna untuk 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 mengumumkan deskripsi singkat gambar ( terlihat di panel VoiceOver hitam) dan pengguna dapat memilih apakah akan melanjutkan ke artikel atau tidak.

gambar dengan teks alternatif yang lebih baik

Beberapa komentar tentang alt:

  • alt memungkinkan Anda menentukan string sederhana yang akan digunakan setiap kali gambar tidak tersedia, seperti saat gambar gagal dimuat, atau diakses oleh bot crawl 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 adalah sebuah seni. Agar string dapat menjadi alternatif teks yang dapat digunakan, string tersebut harus menyampaikan konsep yang sama dengan gambar, dalam konteks yang sama.

Pertimbangkan gambar logo tertaut di header halaman seperti yang ditunjukkan di atas. Kita dapat mendeskripsikan gambar tersebut dengan cukup akurat sebagai "Logo Funion".

<img class="logo" src="logo.jpg" a>lt="The Funion logo"

Anda mungkin tergoda untuk memberikan alternatif teks yang lebih sederhana, yaitu "beranda" atau "halaman utama", tetapi hal itu merugikan pengguna yang memiliki gangguan penglihatan dan pengguna yang tidak memiliki gangguan penglihatan.

Namun, bayangkan pengguna pembaca layar yang ingin menemukan logo header di halaman; memberikan nilai alt "home" sebenarnya akan membuat pengalaman yang lebih membingungkan. Dan pengguna yang dapat melihat menghadapi tantangan yang sama — mencari tahu tindakan yang dilakukan saat mengklik logo situs — seperti pengguna pembaca layar.

Di sisi lain, mendeskripsikan gambar tidak selalu berguna. Misalnya, pertimbangkan gambar kaca pembesar di dalam tombol penelusuran yang memiliki teks "Telusuri". Jika teks tidak ada, Anda pasti akan memberikan nilai alt "penelusuran" pada gambar tersebut. Namun, karena kita memiliki teks yang terlihat, pembaca layar akan mengambil dan membacakan kata "penelusuran" dengan lantang; sehingga, nilai alt yang identik pada gambar menjadi berlebihan.

Namun, kita tahu bahwa jika kita menghapus teks alt, kita mungkin akan mendengar nama file gambar, yang tidak berguna dan berpotensi membingungkan. Dalam hal ini, Anda cukup menggunakan atribut alt kosong, dan pembaca layar akan mengabaikan gambar sepenuhnya.

<img src="magnifying-glass.jpg&qu>ot; alt=""

Singkatnya, semua gambar harus memiliki atribut alt, tetapi tidak semua gambar 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="".