Alternatif Teks untuk Gambar

Menggunakan atribut alt guna menyediakan alternatif teks untuk gambar

Alice Boxhall

Dave Gash

Meggin Kearney

Gambar merupakan komponen penting pada sebagian besar halaman web, dan tentu saja menjadi titik melekat khusus bagi pengguna yang mengalami gangguan penglihatan. Kita harus mempertimbangkan peran gambar di halaman untuk mengetahui jenis alternatif teks yang harus dimiliki. 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 itu, kami memiliki gambar kucing, yang mengilustrasikan artikel tentang perilaku menghakimi kucing yang sudah dikenal. Pembaca layar akan membacakan gambar ini menggunakan nama literalnya, "/160204193356-01-cat-500.jpg". Itu akurat, tetapi tidak berguna sama sekali.

Anda dapat menggunakan atribut alt untuk memberikan alternatif teks yang berguna untuk gambar ini — misalnya, "Kucing menatap antariksa 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 secara ringkas ( dilihat di panel VoiceOver berwarna hitam) dan pengguna dapat memilih apakah akan melanjutkan ke artikel atau tidak.

Beberapa komentar tentang alt:

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

Pertimbangkan gambar logo tertaut di masthead halaman seperti yang ditampilkan di atas. Kita dapat mendeskripsikan gambar dengan cukup akurat sebagai "Logo The Funion".

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

Anda mungkin ingin memberikan alternatif teks yang lebih sederhana seperti "beranda" atau "halaman utama", tetapi tidak menguntungkan bagi pengguna yang memiliki gangguan penglihatan dan penglihatan.

Namun, bayangkan pengguna pembaca layar yang ingin menemukan logo masthead di halaman; memberinya nilai alternatif "home" sebenarnya akan menciptakan pengalaman yang lebih membingungkan. Dan pengguna yang berpenglihatan normal juga menghadapi tantangan yang sama — mencari tahu apa yang terjadi dengan mengklik logo situs — sebagai pengguna pembaca layar.

Di sisi lain, mendeskripsikan gambar tidak selalu berguna. Misalnya, lihat gambar kaca pembesar di dalam tombol penelusuran yang menampilkan teks "Telusuri". Jika teks ini tidak ada, Anda pasti akan memberi gambar itu nilai alternatif "search". Namun, karena kita memiliki teks yang terlihat, pembaca layar akan mengambil dan membacakan kata "telusuri"; sehingga nilai alt yang identik pada gambar bersifat redundan.

Namun, kita tahu bahwa jika membiarkan 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 melewati gambar sama sekali.

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

Ringkasnya, semua gambar harus memiliki atribut alt, tetapi tidak semuanya harus memiliki teks. Gambar penting harus memiliki teks alternatif deskriptif yang secara ringkas menjelaskan apa gambar tersebut, sedangkan gambar dekoratif harus memiliki atribut alternatif — yaitu, alt="".