Gambar Lebih Aksesibel Tanpa Merusak Layout Paragraf

Masih dalam kampanye aksesibilitas. Pengguna internet yang menonaktifkan gambar sering kehilangan informasi dari blog yang dikunjunginya. Informasi itu bermacam-macam. Mulai dari masalah visual, sampai masalah layout paragraf.

Kejadian serupa dapat juga terjadi karena gambar yang dihosting di server mengalami kerusakan, atau server hostingnya mengalami kerusakan sehingga menyebabkan gambar gagal terunduh.

Informasi yang hilang ketika gambar gagal terunduh:

Pengunjung tidak tahu bahwa di tulisan yang ia baca ada gambar
Pengunjung tahu ada gambar di tulisan tersebut, tapi bingung itu gambar apa
Pengunjung mengetahui gambar apa, tapi tidak tahu dimensi (lebar dan tinggi) gambar tersebut
Layout paragraf mengalami colaps

Gambar lebih aksesibel tanpa merusak layout paragraf

Solusi dari keempat permasalahan di atas dapat kita atasi dengan menuliskan markah HTML untuk gambar secara benar, serta menambahkan beberapa property di berkas CSS yang kita gunakan.

Teks alternatif harus jelas dan deskriptif

Penulisan markah HTML untuk gambar yang baik dan benar adalah sebagai berikut:
```
<img src="" alt="" width="" height="" />
```
Isilah atribut ALT/alt dengan kata atau kalimat jelas dan deskriptif tentang gambar tersebut. Contohnya:
```
<img src="images/emoticon.gif" alt="Emoticon Smile" width="150" height="150" />
```
Penambahan property CSS untuk tag IMG

Tambahkan property beserta value berikut ke dalam berkas CSS dari theme yang kita gunakan.
```
img	{
	border: 1px solid #ccc;
	display: block;
	margin-left: auto;
	margin-right: auto;
	}

img.wp-smiley {
	display: inline-block;
	border:none;
	padding: 0;
	margin:0;
	width:15px;
	height:15px;
	}
```

Dengan ini, maka saat gambar gagal terunduh, pembaca dapat mengetahui bahwa di situ ada gambar tanpa melihat layout paragraf yang rusak karena colaps-nya gambar. Pembaca pun dapat mengetahui dengan jelas gambar apa dengan melihat teks alternatifnya.

Saat gambar diaktfikan

Saat gambar dinonaktfikan, gambar lebih aksesibel karena diketahui namanya, letaknya, dan ukurannya, serta tidak merusak layout paragraf

http://daniiswara.com/ dani

using Firefox 3.6.6 on Arch Linux
Mas Adi-Rismaka,
selalu ada pengecualian. Jika gambar sekadar dekoratif, atribut alt/ALT tetap dipasang, tapi nilainya dikosongkan saja (alt=""). Misal pada ‘bullet list’.

http://ardianzzz.com ardianzzzz

using Google Chrome 5.0.375.99 on Windows XP
Kalau untuk dekoratif mungkin sebaiknya jika disetel dalam bentuk gambar latar saja. Sekalian hilang jika CSS dimatikan. :P
http://blog.rismaka.net/ rismaka

using Firefox 3.5.3 on Windows XP
dani,
Seperti tanggapan mas ardianzzz, saya juga setuju kalau lebih baik gambar seperti ‘bullet list’ dibuat sebagai gambar CSS, bukan gambar yang dipanggil melalui bentuk HTML.

Untuk gambar hiasan sekalipun (misal: gambar abstrak sebagai hiasan), menurut saya tetap atribut altnya harus diisi, walaupun hanya satu kata saja, agar ketika gambar dinonaktifkan, pengunjung tahu itu gambar sekadar hiasan atau gambar pelengkap informasi.

http://daniiswara.com/ dani

using Firefox 3.6.6 on Arch Linux
Mas Ardian, Mas Adi,
ya, maaf, saya memberi contoh yang salah. Karena bullet list itu sering saya temui.

Yang sering juga terjadi, saat CSS dinonaktifkan, efek poin/bullet-nya hilang.

Mas Adi,
untuk gambar dekoratif, teks alt bisa dibiarkan kosong sehingga pengguna pembaca layar komputer tetap memahami bahwa iu dekorasi saat mendengar kata “graphic…” saja.

Kalaupun diisi, tetap sesuai konteks, tidak duplikatif/pengulangan. Misal beberapa gambar halaman ini, via ekstensi Fangs:

GraphicGambar tidak diketahui letaknya karena hilang di tengah paragraftwo Heading level three Pengunjung tahu ada gambar di tulisan tersebut, tapi bingung itu gambar apaGraphicGambar hanya diketahui berupa ruang kosong diantara dua paragraf

Kata ‘GraphicGambar’ bisa dianggap pengulangan. Apalagi konten teks di sekitar gambar juga menjelaskan hal serupa.

Saya sendiri sering melakukan kesalahan ini. :)

http://daniiswara.com/ dani

using Firefox 3.6.6 on Arch Linux
Pro kontra alternatif teks ini:
gawds dot org/show.php?contentid=28 dan juicystudio dot com/article/requiring-alt-attribute-html5.php.
http://blog.rismaka.net/ rismaka

using Firefox 3.5.3 on Windows XP
dani,
disebut pengulangan, bila kata ‘gambar’ yang ditulis menunjukkan sebuah ‘objek’. Sementara di halaman ini, kata ‘gambar’ di atribut alt itu adalah sebagai ‘subyek’.

Contoh sebagai objek:
GraphicGambar emoticon sedih. (gambar yang ditampilkan berupa gambar emoticon yang sedih).

Contoh sebagai subyek:
GraphicGambar dihapus dengan menggunakan type-X. (gambar yang ditampilkan berupa cara menghapus gambar dengan menggunakan type-X).

Memang susah membuat sesuatu itu sempurna. Seperti yang mas dani maksud, menghindari pengulangan dengan tidak mengisi teks alternatif adalah untuk pengguna screen reader. Namun untuk pengguna normal, hal ini bisa menyulitkan, karena mereka tidak bisa mendengar, tapi hanya melihat. Alhasil, mereka pun kehilangan informasi tentang gambar yang hilang tersebut :).

http://daniiswara.com/ dani

using Firefox 3.6.6 on Arch Linux
Mas Adi-Rismaka,
ya prinsipnya sih setuju. Jika atribut alt tidak diisi teks, sama artinya tanpa mencantumkan atribut itu sendiri. Yang mana, gambar/grafis benar-benar dianggap tidak penting. Hanya dekoratif–yang mestinya cukup disajikan via CSS.

Pejuang SEO umumnya akan tetap mempertahankan untuk mengisi alternatif teks demi paparan di hasil pencarian gambar.

Bagi saya pribadi, saat ‘disable images’, memang berisiko kehilangan sesuatu, kesan sekalipun. Walau itu mungkin hanya grafis dekoratif.

Tapi, saya tetap ‘keukeuh’, jika grafis itu sekadar ilustrasi yang (umumnya) terkait konten, mestinya tetap dideskripsikan dengan jelas. Entah via teks alt atau penjelasan di sekitar konten. Tidak harus di dalam atribut alt. Sering terjadi di grafis berupa tabel hasil penelitian. Hasil baca tabel diuraikan di sekitar tabel. Bukan sebagai alternatif teks.

Saya biasanya pegang aturan: teks di alt tidak berupa pengulangan teks di sekitarnya (1-2 baris sebelum dan sesudahnya). :)

http://www.margasatrya.com/ satrya

using Firefox 3.6.6 on Windows XP
Mas adi, Title dan ALT perbedaanya dmn ? maaf tanya sesuatu yang mestinya sudah saya tahu, tapi kenyataanya saya masih belum paham betul.

http://anawia.com anawia

using Firefox 3.6 on Windows XP
mas satrya. menurut saya Alt itu alternatif. akan keluar jika gambar tidak bisa ditampilkan. sedangkan title adalan nama gambar. akan keluar jika dilewati oleh mouse.

kalau ada yang kurang mohon ditambahkan, salah dibetulkan.
http://blog.rismaka.net/ rismaka

using Firefox 3.5.3 on Windows XP
satrya,
Atribut alt merupakan kependekan dari ALTernatif text. Dalam gambar, atribut ini berfungsi untuk menampilkan teks alternatif (jika alt ini diisi) ketika gambar tidak bisa ditampilkan, baik karena disetel off maupun sumber gambar sudah rusak.

Atribut title berfungsi menampilkan teks ketika mouse dihover di atas gambar. Atribut ini hanya dapat dilihat oleh pengguna yang menggunakan mouse saja, sehingga atribut ini tidak aksesibel bagi semua orang.

Atribut alt WAJIB ada di tiap kode HTML gambar, sementara title tidak wajib, bahkan bisa menjadi pengganggu bagi sebagian pengguna internet, jadi lebih baik dikosongkan saja atribut title ini.

Semoga membantu, bukan malah membuat pusing mas :).

http://jakazulham.blogspot.com jaka zulham

using Firefox 3.6.3 on Windows XP
nice post
:)
Pingback: Blogwalking Report — Wildanr Ok
http://daniiswara.com/ dani

using Firefox 3.6.6 on Arch Linux
Satu lagi. Tiap peramban Web grafis menyajikan hal/teks yang berbeda jika teks alt tidak ada/diisi. Dulu banyak konsultan aksesibilitas Web luar negeri yang sudah membahasnya. Entah saat ini, dengan makin canggihnya peramban Web, saya tidak memerhatikannya lagi.

http://blog.rismaka.net/ rismaka

using Firefox 3.5.3 on Windows XP
dani,
Saat ini pun tiap peramban kurang kompak/sepakat dalam menampilkannya dok. Mungkin memang lebih baik menentukan tampilan sendiri agar dapat seragam di semua peramban.

http://dudiblog.freehostia.com belejar seo wordpress

using Firefox 3.6.3 on Windows XP
salam knal mas

http://ardianzzz.com ardianzzz

using Google Chrome 5.0.375.70 on Windows XP
Mas Ris, ada yang mau kenalan tuh :P

http://haritsmugni.wordpress.com Harits

using Firefox 3.6.8 on Windows XP
Itu kok post terbaru di protect, memangnya ada apa ?

http://blog.rismaka.net/ rismaka

using Firefox 3.6.8 on Windows 7
Harits,
Tidak ada apa-apa kok mas. Saya hanya ingin memproteksinya saja :).

http://kafegue.com/ iskandaria

using Firefox 3.6.8 on Ubuntu 10.04
Tanpa bermaksud mengurangi kegunaan atribut alt, apakah keterangan sebelum atau di bawah gambar belum cukup untuk mendeskripsikan gambar? Misalnya saya menambahkan keterangan berupa : “untuk lebih jelasnya, silakan simak/lihat gambar/screenshoot di bawah ini tentang statistik blog anu dot com di sepanjang Mei 2010.

Atau di bawah gambar saya kasih keterangan berupa : “data statistik anu dot com Mei 2010.

http://daniiswara.com/ dani

using Firefox 3.6.8 on Arch Linux
Mas Iskandaria,
grafis statistik, apalagi yang rumit, biasanya sulit diwakilkan oleh atribut alt. Alternatifnya, bisa memakai longdesc atau naratif di konten & dekat grafis bersangkutan.

Jika gambaran statistik sudah dinarasikan, gambar grafik/tabel hanya pelengkap atau bahkan bisa jadi dekoratif. Tapi bagi pengguna mata normal, wujud grafis tabel/grafik tetap lebih ‘usable’.

http://kafegue.com/ iskandaria

using Google Chrome 5.0.375.99 on GNU/Linux
Saya tetap berpegang pada prinsip, bagaimanapun juga, sebuah grafik/tabel bisa berbicara lebih banyak daripada kata-kata. Masukan yang bagus bli (mengenai jika statistik sudah dinarasikan, maka gambar grafik/tabel hanya pelengkap atau bahkan bisa ajdi dekoratif).

Jadi kesimpulannya, tidak perlu pakai narasi jika sudah ada gambar/tabel? Atau narasi tetap diperlukan guna mengantisipasi pengguna yang mematikan gambar?

http://daniiswara.com/ dani

using Firefox 3.6.8 on Arch Linux
Mas Is,
kesimpulannya tentu saja bukan tidak perlu pakai narasi jika sudah ada gambar/tabel! Tapi, konten nonteks–jika bukan dekoratif–tetap mudah diakses pengguna. Dengan atau tanpa fungsi mata normal, dengan atau tanpa tampilan visual.

http://www.bang-kong.co.cc febriy

using Firefox 3.6.8 on Windows XP
mentep tipsnya…. tapi kadang suka lupa menambahkan alt……. :D
Pingback: Belajar dari Sahabat | blog Rudy Azhar

rismaka .NET

Me, Netizen, & Blogosphere

Gambar Lebih Aksesibel Tanpa Merusak Layout Paragraf

Informasi yang hilang ketika gambar gagal terunduh:

Pengunjung tidak tahu bahwa di tulisan yang ia baca ada gambar

Pengunjung tahu ada gambar di tulisan tersebut, tapi bingung itu gambar apa

Pengunjung mengetahui gambar apa, tapi tidak tahu dimensi (lebar dan tinggi) gambar tersebut

Layout paragraf mengalami colaps

Gambar lebih aksesibel tanpa merusak layout paragraf

Teks alternatif harus jelas dan deskriptif

Penambahan property CSS untuk tag IMG

Informasi yang hilang ketika gambar gagal terunduh:

Pengunjung tidak tahu bahwa di tulisan yang ia baca ada gambar

Pengunjung tahu ada gambar di tulisan tersebut, tapi bingung itu gambar apa

Pengunjung mengetahui gambar apa, tapi tidak tahu dimensi (lebar dan tinggi) gambar tersebut

Layout paragraf mengalami colaps

Gambar lebih aksesibel tanpa merusak layout paragraf

Teks alternatif harus jelas dan deskriptif

Penambahan property CSS untuk tag IMG

Tulisan yang Terkait

Bagikan Ke: