Teks Alternatif untuk Atribut ALT
Posted: May 7, 2009 at 04:21:47 by Dani Iswara. Words count: 569.
Last updated: January 30, 2010 at 11:35:11.
alt ditujukan untuk memberi informasi tambahan yang serupa pada konten non-teks. Jadi, jika suatu konten non-teks tidak ditampilkan/terbaca, pengguna/pengunjung tidak akan kehilangan informasinya. Teks alternatif (teks alt) dapat berupa teks pendek atau bahkan deskripsi yang agak panjang.
Jika konten non-teks (misalnya gambar, logo, animasi, video, dan rekaman suara) dihilangkan/dinonaktifkan (di-'disable'), atau tidak terbaca karena memerlukan 'plugin' tertentu, teks alternatif hendaknya tetap mampu memberi informasi dan fungsi yang serupa. Tapi hindari pengulangan kata-kata yang sama pada alt, title, dan 'anchor text'.
Teks alternatif harus disertakan pada elemen img dan area, tapi bersifat opsional pada input.
Pertimbangan dalam Menentukan Teks Alternatif
Pertimbangan-pertimbangan berikut dapat dipakai dalam menentukan teks alternatif bagi atributalt:
- Mengapa suatu konten non-teks ada di halaman tersebut?
- Informasi apa yang disajikan/disampaikannya?
- Fungsi apa yang diembannya? Dekoratif saja? Bisa diperbesar? Diklik, menuju kemana/apa yang akan terjadi? Membuka jendela baru? Tombol untuk apa?
- Menampilkan informasi serupa seperti yang ditampilkan oleh format gambar.
- Bukan pengulangan. Sebaiknya tidak sama persis dengan teks yang sudah disajikan di sekitar konten non-teks. Misalnya atribut
tagdengantitle,summary, atau tagcaption. - Tidak menggunakan frasa seperti: "gambar...", "logo...", jika ingin mendeskripsikan suatu gambar/logo. Karena dianggap sudah jelas bahwa itu adalah suatu gambar/logo.
- Teks alternatif dapat berupa deskripsi pada atribut
alt(misalnya untuk gambar), dilengkapititle(untuk pranala), dan bisa juga diletakkan sebagai teks biasa di sekitar gambar sesuai konteks. - Setiap gambar harus memiliki atribut
alt. Gambar dekoratif menggunakanalt="". Deskripsinya dibiarkan kosong, tanpa spasi. 'Screen reader'/'aural agent' akan memahaminya sebagai gambar dekoratif. Bagaimana dengan gambar yang memakai 'pseudo-class' CSS ('Cascading Style Sheets')? - WCAG ('Web Content Accessibility Guidelines') menyarankan jumlah huruf pada deskripsi atribut
alt(untuk bahasa Inggris) sebanyak kurang dari 100 karakter, bahasa Jerman 115 karakter, dan bahasa Korea 90 karakter.
Contoh teks alternatif
Kata-kata apa saja yang direkomendasikan untuk dipakai dalam teks alternatif? Contoh-contoh ini mungkin bisa sedikit memberi gambaran:- Gambar produk beserta spesifikasi singkat di suatu situs 'e-commerce' ('shopping cart').
Jika pada gambar terdapat informasi berupa kata-kata (misalnya jenis, harga, merk), maka frasa tersebut harusnya juga ada pada teks alternatif. Beri deskripsi pendek pada
alt="...", lalu tambahkanlongdescjika memang membutuhkan penjelasan/spesifikasi lebih lengkap. Hal ini sempat tertulis di Review Bhinneka.com. - Judul blog "Catatan Harian Dokter" dalam berkas gambar.
Teksnya juga berupa
alt="Catatan Harian Dokter". - Tombol pencarian yang bergambar kaca pembesar.
Gunakan
alt="Search", bukankaca pembesar. Penekanan lebih pada fungsi dan informasi, bukan visual. Begitu juga pada tombol 'Submit' yang memakai gambar, gunakanalt="Submit". Seperti pernah dibahas di 6 hal aksesibilitas blog yang mungkin terlupakan. - Gambar mobil dengan plat nomor. Teksnya dapat berupa identifikasi merk mobil, warna, tampak depan/belakang, beserta nomor platnya.
- Gambar tabel penjualan per bulan. Diinformasikan nilai penjualan tiap bulannya.
- Logo merk di samping tiap spesifikasi produk.
Cukup disebutkan, misalnya
alt="Linux", bukanlogo Linux. - Animasi tentang penyetelan peramban Firefox. Teks alternatifnya berupa menu dan tombol apa saja yang harus diikuti/ditekan.
- Berkas animasi presentasi daring (dalam jaringan; 'online'). Misalnya seperti Slideshare.net. Sediakan teks yang menjelaskan topik yang disajikan per 'slide'.
Aksesibilitas Web dan atribut alt
Jadi, peran atribut alt sangat penting dalam menunjang aksesibilitas web. Agar pengguna/pengunjung tidak kehilangan informasi dan fungsi. Penggunaan berlebihan kadang terjadi demi pengoptimalan mesin pencari Internet (SEO).
Yang ini saya kuotasi saja, agar tidak mengurangi makna:
Adding alternative text to images is one of the easiest accessibility principles to learn and one of the hardest to master.Penulisan 'teks alternatif' dan 'alternatif teks' dalam bahasa Inggris pun ternyata masih sering bolak-balik. Entah bagaimana yang benar. Silakan tambahan dan koreksinya... :) Bacaan: Dani Iswara, mail me: [myfirstnamelastname]@gmail.com.
Comment by nomercy on May 13, 2009 at 17:09:52
using Firefox 3.0.10 on Linux Mint 6
sudah dicoba diterapkan mas ... tetapi kok sewaktu ditest melalui cloak browser ternyata masih tidak terbaca oleh bots ... apa ada yg salah ya di salah satu baris script di blog saya ...
Comment by Dani Iswara on May 13, 2009 at 18:15:28
using IceWeasel 3.0.9 on Debian GNU/Linux
nomercy,
wah, maaf, maksudnya apa ya, pak?
Comment by gdenarayana on May 13, 2009 at 21:29:09
using Firefox 3.0.1 on Windows XP
[OOT]
bli dani, tiyang metakon kedik inggih, klo utk hyperlink apa semua harus dikasihkan title bli? soalnya kok kayanya diignore sama crawler dan sebangsanya (engga tau jg apa semuanya ignore) biarpun masang atribut title di tiap hyperlink.
sebaiknya itu dibagian apa ngasih atribut title bli (terutama di hyperlink) kayanya dulu bli pernah bahas, tapi saya lupa pok di posting yang mana.
suksma bli :)
Comment by jenggo on May 13, 2009 at 22:16:44
using Firefox 3.0.9 on Slackware
Wah, selama ini cuma buat pelengkap syarat xhtml strict doang, jadi rada males ngasih info lengkap tentang gambar tersebut.. Biasanya cuma info singkat ajah.. Ehehehe..
Comment by Dani Iswara on May 13, 2009 at 23:38:09
using IceWeasel 3.0.9 on Debian GNU/Linux
jenggo,
ternyata ribet juga kalo bacaan web guru itu diikutin.. :(
halah slackware..emang slackware ada logo resminya..
udah lah, generik aja.. :D
Comment by Dani Iswara on May 13, 2009 at 23:54:22
using IceWeasel 3.0.9 on Debian GNU/Linux
gdenarayana,
[ketangkep si memet lg] :)
iya, bli wayan, dari yg saya baca, ngga perlu lagi atribut
titlekalo 'anchor text' dah deskriptif..itu utk bahan tulisan selanutnya aja ya..tulisan yg lalu itu ada di atribut TITLE terkait SEO dan aksesibilitas :)
Comment by preaxz on May 14, 2009 at 09:47:42
using Firefox 3.0.10 on Windows XP
atribut alternate itu juga perlu sebagai antisipasi apabila seseorang mematikan tampilan image pada browsernya ..
misalkan pada artikel penulis mereferensikan "Lihat Gambar 1" dan pembaca mematikan image, maka pembaca tidak bingung mencari letak "Gambar 1"
Comment by Dani Iswara on May 14, 2009 at 12:58:20
using Safari 4.0 on Windows XP
preaxz,
saya juga setuju itu, Mas Arie :)
selain teks
alt, gemana kalo dibuat semacam<caption>Gambar 1. [deskripsi di sini]</caption>atau plain text di bawah/samping gambar, sehingga pengguna yg tdk mematikan tampilan gambar tetap dapat mudah menemukan tulisan "Gambar 1".. :)Comment by Cahya on May 14, 2009 at 13:18:18
using Firefox 3.0.10 on Windows Vista
He..., makin dibaca, makin ga ngerti, ga nyambung sih, oke nanti tyang coba baca ulang lagi :D
Comment by rismaka on May 17, 2009 at 04:32:41
using Firefox 3.0.10 on Windows XP
@Dani
Saya setuju dengan pemakaian caption sebagai deskripsi tambahan dari suatu image, hanya saja sepertinya agak kurang rapi jika image tersebut terletak di kiri tulisan (class=left), Hanya pendapat pribadi siy...
Comment by Dani Iswara on May 17, 2009 at 10:41:50
using Firefox 3.0.10 on Gentoo
rismaka,
IMO, kalo alignment-nya sesuai, sptnya ngga masalah, kan :)