Tag Image sebagai Pranala yang Mudah Diakses
Posted: January 30, 2010 at 11:51:28 by Dani Iswara. Words count: 195.
Last updated: January 30, 2010 at 12:16:58.
img ditampilkan sebagai pranala/tautan, ada beberapa rekomendasi yang dianjurkan untuk memenuhi unsur aksesibilitas menurut WCAG 2.0 level AA:
- Sediakan teks alternatif untuk tiap konten non-teks.
- Untuk tiap elemen (dalam hal ini tag)
imgyang disertai fungsi pranala, maka elemen (dalam hal ini atribut)altdianjurkan menyajikan teks alternatif, jangan dibiarkan kosong. Apalagi jika tidak disertai teks 'anchor'. - Fungsi atribut
altpada kondisi di atas, bisa berupa tujuan pranala dan/atau fungsi gambar.
alt yang menyertai gambar, menjelaskan tujuan pranala:
Kode XHTML-nya:
<a href="http://www.w3.org/TR/WCAG20/"><img src="http://daniiswara.googlepages.com/wcag2-dani.jpg" width="500" height="147" alt="WCAG 2.0 homepage - W3C Recommendation 11 December 2008" /></a>
Contoh atribut alt yang menyertai gambar tapi menjelaskan fungsi pranala bisa dilihat di pelbagai tombol submit, older post, search, dan sejenisnya.
Untuk tambahan fungsi aksesibilitas:
- Elemen gambar sebaiknya memiliki penanda. Misalnya berupa garis tepi/'border', warna latar, atau variasi lainnya. Sehingga mudah dibedakan dengan konten teks di sekitarnya saat gambar tidak tampil/ditampilkan.
- Pembeda saat 'hover', 'active', dan 'tabbing' juga masih disarankan. Misalnya berupa garis tepi putus-putus.
Comment by Cahya on January 30, 2010 at 12:39:33
using Firefox 3.6 on Windows Vista
Padahal saya suka tipe gambar yang tanpa border, karena seolah-oleh menyatu dengan latar :D
Comment by Gravisware on January 30, 2010 at 13:23:17
using Firefox 3.5.2 on Windows Vista
Manteep.. nice info nih,
'alt' emang wajib kok dipasang.. kadang google juga membaca itu sebagai judul gambar.
Comment by Dani Iswara on January 30, 2010 at 13:53:40
using Firefox 3.6 on Gentoo
Cahya,
coba kalo pernah ngerasain yang namanya kehilangan informasi..baru tahu rasanya.. :)
Gravisware,
asal jangan sekadar mengecoh Google (dan akhirnya pengguna) tapi tidak sesuai konteks. :)
Comment by Cahya on January 30, 2010 at 20:36:58
using Firefox 3.6 on SuSE
Nah, jangan pelit bandwidth lah, kan kasihan orang sudah capek desain grafisnya :D
Comment by choen on January 30, 2010 at 20:46:09
using Firefox 3.6 on Windows XP
sip thanks Bli.
Bli, misal untuk judul blog, kan sering diganti pake image. Kalau misalnya imagenya langsung di tanam di HTML dengan tag image kan memang bisa menggunakan atribut
alt.Nah, kalau kasusnya image itu ditanam di CSS untuk meniban text judul blog itu gimana? soalnya kadang pake trik 'text-indent' untuk nyembunyiin text, jadi pas disable image text judul blog nya ngak keliatan, kalau disable CSS sih keliatan.
Comment by dani on January 30, 2010 at 21:03:01
using Google Chrome 5.0.308.0 on GNU/Linux
Cahya,
mau bayarin unlimited yang aksesnya cepet? :P
choen,
saya masih setuju dengan tulisan Douglas Livingstone di SitePoint.com tentang Accessible Header Images With CSS And XHTML. Seperti yang pernah Choen tulis tentang header Accessites.org itu. Terserah pilihan pengguna.
Untuk yang CSS sentris, tentu gambar dianggap dekoratif.
Comment by choen on January 30, 2010 at 21:16:04
using Firefox 3.6 on Windows XP
wah makasih Bli rujukannya, ternyata ada alternatif menarik disana untuk CSS nya.
Comment by Cahya on January 30, 2010 at 21:45:37
using Opera 10.10 on GNU/Linux
Seni grafis itu biar lambat asal selamat, ga ada yang buru-buru kalau jalan-jalan ke museum.
Nenek dan kakek pun masih bisa menikmati karya Picasso :) - walau tidak semua orang paham.
Comment by Dani Iswara on January 30, 2010 at 21:51:12
using Firefox 3.6 on Gentoo
Cahya,
Bukan maksud saya memandang sebelah mata pada seni grafis. Hanya saja estetika dan fungsional harusnya bisa saling mendukung.
Comment by Cahya on January 30, 2010 at 21:56:31
using Konqueror 4.3 on SuSE
Yah,
altoke lah :DBtw, desain grafis blog Bli Dani ga muncul di Konqueror nih ?
Comment by nuansa pena on January 30, 2010 at 22:11:19
using Firefox 3.5.7 on Windows XP
wao....tips yang sip, aku coba benahi!
Comment by Aldy on January 31, 2010 at 01:21:41
using Firefox 3.5.7 on Windows 7
Mas Dhani,
Saya kadang dibingungkan dengan penggunaan Alt="", bukan karena saya ogah mencantumkan pranala, tetapi karena sikap saya yang sedikit masa bodoh dengan mesin pencari. Sangat sering gambar ( terutama gambar latar ) yang tidak saya sertakan alt="".
Advis, apakah ini berpengaruh buruk terhadap SEO,SERP jika saatnya saya mulai peduli dengan hal-hal semacam itu ?
Comment by Dani Iswara on January 31, 2010 at 02:25:29
using Firefox 3.6 on Gentoo
Cahya,
CSS3 memang belum didukung penuh di Konqueror.
Aldy,
untuk gambar latar (fungsi dekoratif) dengan pendekatan X/HTML, cukup alt="". Jika gambar memiliki konteks dengan konten, teks alternatif (alt) sebaiknya disesuaikan. Atau dijelaskan dengan teks biasa, di luar alt, untuk memperjelas konteks gambar. Saya tidak paham SEO-nya. :)
Comment by Aldy on January 31, 2010 at 07:16:49
using Firefox 3.5.7 on Ubuntu 9.10
Bli Dhani,
Terima kasih informasinya. Saya akan mencoba untuk menerapkannya, siapa suatu saat saya bisa mendapatkan recehan dari blog untuk sekedar membayar hostingan.
Comment by iskandaria on February 2, 2010 at 13:30:45
using Firefox 3.6 on Windows XP
Wah, banyak juga ya atribut lain yang bisa ditambahkan pada tag image. Selama ini saya cuma menggunakan alt, di samping width dan height. Thx buat rekomendasinya Mas.
Comment by Dani Iswara on February 2, 2010 at 14:58:31
using Firefox 3.6 on Gentoo
iskandaria,
unsur yang sering terlupakan itu biasanya memang aksesibilitas. Misalnya dotted-border saat focus di link (link+gambar).