Menulis Teks ALT yang Efektif Untuk Gambar

[ad_1]

Siapa pun yang tahu apa-apa tentang aksesibilitas web tahu bahwa gambar memerlukan alternatif, atau ALT, teks yang ditugaskan kepada mereka. Ini karena pembaca layar tidak dapat memahami gambar, tetapi membaca keras-keras teks alternatif yang diberikan kepada mereka. Di Internet Explorer kita dapat melihat teks ALT ini, cukup dengan mengarahkan mouse ke gambar dan melihat tooltip kuning yang muncul. Browser lain (dengan benar) tidak melakukan ini. HTML untuk memasukkan teks ALT adalah:

img src = "filename.gif" alt = "Penjelasan alternatif dimasukkan di sini"

Tapi tentunya tidak ada keterampilan untuk menulis teks ALT untuk gambar? Anda cukup membuat deskripsi di sana dan Anda siap untuk pergi, bukan? Yah, semacam itu. Tentu, itu bukan ilmu roket, tetapi ada beberapa panduan yang perlu Anda ikuti …

Spacer gambar dan teks ALT yang hilang

Gambar spacer harus selalu diberi teks ALT null, atau alt = "". Dengan cara ini sebagian besar pembaca layar akan sepenuhnya mengabaikan gambar dan bahkan tidak akan mengumumkan kehadirannya. Gambar spacer adalah gambar tak terlihat yang digunakan oleh sebagian besar situs web. Tujuannya adalah, seperti namanya, untuk menciptakan ruang pada halaman. Kadang-kadang tidak mungkin untuk membuat tampilan visual yang Anda butuhkan, sehingga Anda dapat menempelkan gambar di (menentukan tinggi dan lebarnya) dan voliĆ , Anda memiliki ruang ekstra yang Anda butuhkan.

Tidak semua orang menggunakan teks ALT null ini untuk gambar spacer. Beberapa situs web tetap di alt = "spacer image". Bayangkan betapa menyebalkannya hal ini bagi pengguna pembaca layar, terutama ketika Anda memiliki sepuluh di antaranya berturut-turut. Pembaca layar akan mengatakan, "Gambar, spacer image" sepuluh kali berturut-turut (pembaca layar biasanya mengucapkan kata, "Gambar", sebelum membaca teks ALT) – sekarang itu tidak membantu!

Pengembang web lainnya hanya meninggalkan atribut ALT untuk gambar spacer (dan mungkin gambar lainnya). Dalam hal ini, sebagian besar pembaca layar akan membaca nama file, yang dapat berupa 'newsite / images / onepixelspacer.gif'. Pembaca layar akan mengumumkan gambar ini sebagai "Gambar, gambar slash newsite memotong satu piksel spacer dot gif". Bayangkan bagaimana kedengarannya jika ada sepuluh ini berturut-turut!

Peluru dan ikon

Peluru dan ikon harus diperlakukan dengan cara yang sama seperti gambar spacer, jadi harus ditetapkan teks alternatif null, atau alt = "". Pikirkan tentang daftar barang-barang dengan peluru mewah yang memproses setiap barang. Jika teks ALT, 'Peluru' ditugaskan untuk setiap gambar, maka, "Gambar, peluru" akan dibacakan dengan keras oleh pembaca layar sebelum setiap item daftar, sehingga perlu waktu lebih lama untuk menyelesaikan daftar.

Ikon, biasanya digunakan untuk melengkapi tautan, juga harus diberi alt = "". Banyak situs web, yang menempatkan ikon di sebelah teks tautan, menggunakan teks tautan sebagai teks ALT ikon. Pembaca layar pertama-tama akan mengumumkan teks ALT ini, dan kemudian teks tautan, sehingga kemudian akan mengucapkan tautan dua kali, yang jelas tidak diperlukan.

(Idealnya, peluru dan ikon harus dipanggil sebagai gambar latar belakang melalui dokumen CSS – ini akan menghapusnya dari dokumen HTML sepenuhnya dan karena itu menghilangkan kebutuhan untuk deskripsi ALT.)

Gambar dekoratif

Gambar dekoratif juga harus diberi teks alternatif null, atau alt = "". Jika sebuah gambar adalah permen mata murni maka tidak perlu bagi pengguna pembaca layar untuk mengetahui keberadaannya dan diberi tahu keberadaannya hanya menambah polusi suara.

Sebaliknya, Anda dapat membantah bahwa gambar di situs Anda menciptakan identitas merek dan dengan menyembunyikannya dari pengguna pembaca layar, Anda menyangkal kelompok pengguna ini memiliki pengalaman yang sama. Ahli aksesibilitas cenderung mendukung argumen sebelumnya, tetapi tentu saja ada kasus yang valid untuk yang terakhir juga.

Navigasi & teks tertanam dalam gambar

Menu navigasi yang membutuhkan teks mewah tidak memiliki pilihan selain menanamkan teks di dalam gambar. Dalam situasi ini, teks ALT tidak boleh digunakan untuk memperluas gambar. Dalam situasi apa pun teks ALT seharusnya tidak mengatakan, 'Baca semua tentang layanan fantastis kami, yang dirancang untuk membantu Anda dalam segala hal yang Anda lakukan'. Jika item menu mengatakan, 'Layanan' maka teks ALT juga harus mengatakan 'Layanan'. Teks ALT harus selalu menggambarkan isi gambar dan harus mengulang kata demi kata. Jika Anda ingin memperluas navigasi, seperti dalam contoh ini, Anda dapat menggunakan atribut judul.

Hal yang sama berlaku untuk teks lain yang tertanam di dalam gambar. Teks ALT seharusnya hanya mengulang, kata demi kata, teks yang ada di dalam gambar itu.

(Kecuali font yang digunakan sangat unik, seringkali tidak perlu untuk menanamkan teks dalam gambar – navigasi canggih dan efek latar belakang sekarang dapat dicapai dengan CSS.)

Logo perusahaan

Situs web cenderung bervariasi dalam cara mereka mengaplikasikan teks ALT ke logo. Ada yang mengatakan, 'Nama perusahaan', yang lain 'Logo nama perusahaan', dan lainnya menggambarkan fungsi gambar (biasanya tautan balik ke beranda), 'Kembali ke rumah'. Ingat, teks ALT harus selalu menggambarkan konten gambar sehingga contoh pertama, alt = "Nama perusahaan", mungkin yang terbaik. Jika logo adalah tautan kembali ke beranda maka ini dapat dikomunikasikan secara efektif melalui tag judul.

Kesimpulan

Menulis teks ALT yang efektif tidak terlalu sulit. Jika itu gambar dekoratif maka teks alternatif null, atau alt = "" biasanya harus digunakan – tidak pernah, pernah menghilangkan atribut ALT. Jika gambar berisi teks maka teks ALT hanya harus mengulang teks ini, kata demi kata. Ingat, teks ALT harus menggambarkan konten gambar dan tidak lebih.

Pastikan juga untuk menjaga teks ALT sesingkat dan sesingkat mungkin. Mendengarkan halaman web dengan pembaca layar membutuhkan waktu lebih lama daripada metode tradisional, jadi jangan membuat pengalaman berselancar menyakitkan bagi pengguna pembaca layar dengan teks ALT yang kembung dan tidak perlu.

[ad_2]