Accesibility

Myfia On The Web
Beta Version

Intro for Tips and tricks

In-Tips artinya introduksi Tips, bukan ngintip :P
Kalo suka silakan baca, kalo gak tak perlu komplain lah.
Dah bagus gw mau posting :D

16
May
2009

CSS Diagnostic for Image Alternate Text

Tulisan beikut ini terinspirasi oleh artikel yang ditulis oleh Mas Dani Iswara pada Teks Alternatif untuk Atribut ALT. So, saya tidak akan bercerita lebih lanjut tentang mengapa dan bagaimana memasang alternate text pada image. Ringkasnya tulisan ini akan berkisah (baca:dongeng dewasa) tentang bagaimana cara (cepat)nya supaya bisa mengetahui image-image mana saja yang belum dipasang alternate text
Beberapa waktu yang lalu dalam acara reality web show (emang ada?), saya kembali mengunjungi situs salah seorang guru gaib saya (baca: cyber web master), Eric Meyer. Kerena di siana banyak bercerita tentang css (dari situ juga saya tergila-gila pada CSS), maka tips ini akan menggunakan css sebagai alat bantu dalam hal validasi entah dalam hal XHTML ataupun lainnya.
Kali ini saya mengutip bagian tulisan yang ditulis oleh EricMeyer untuk pemeriksaan terhadap alternate text.

Berikut tipsnya (kebanyakan intro ya...)

Pemeriksaan attribut ALT text dan Title pada image

img {outline: 5px solid red;}

img[alt][title] {outline-width: 0;}

img[alt] {outline-color: fuchsia;}

img[alt], img[title] {outline-style: double;}

img[alt=""][title], img[alt][title=""] {outline-width: 3px;}

img[alt=""][title=""] {outline-style: dotted;}Tampilkan semua image untuk dipasang outline (garis) merah besar - lantaran lumayan mencolok mata dan biar gampang ngeceknya.

Kondisi:

  1. Bila pada image sudah ada attribut alt dan title, maka kita set outline width adalah nol.
  2. Bila pada image sudah ada attribut alt, set warna outline color menjadi fuchsia. Hal ini dimaksudkan bahwa semua image yang tidak memiliki attribut alt akan tetap ber-outlined merah (5px).
  3. Bila ternyata masih ada image yang tidak memiliki baik attribut alt dan juga title, maka kita pasang outline-nya double (biar tambah ngejreng gitu) .
  4. Bila pada image memiliki attribut title tapi tidak attribut alt, atau sebaliknya, maka kita pasang lebar outline sebesar 3px.
  5. Bila ada image yang attribut alt dan title -nya kosong (beda dengan tanpa sama sekali ya), maka kita pasang outlinenya dotted (berupa titik-titik).
Nah sampai sini kiranya sudah jelas (mudah-mudahan). Saya harap akan lebih mempermudah pencarian attribut alt dan title iamge yang hilang, dan kalo mau iseng di cek (validasi) paling tidak lebih cepat tahu dimana letak kekurangannya.

Jakarta, 16Mei2009
(tidak jadi berangkat recharging lantaran bangun kesiangan)
Related news items:
Older news items:


Comments 

 
#1 dani 2009-05-17 03:19
tips yg menarik pak :)
arsip di tulisan lama blm sempat saya edit lg aturan mainnya..jd di tulisan jadul sama sekali masi perawan..
dan saya masi make fitur web developer-nya fx buat ngecek itu semua (images » display alt attributes) :)
Quote
 

Add comment


Security code
Refresh

Bacaan Lainnya (Click 2Open)


Wednesday, 24 February 2010
Nah ini judulnya dijamin norak abis :P. Sementara teman-teman sudah pada punya adsense dan menikmati hasilnya, saya malahan baru mulai. Gak percaya? Y...

Wednesday, 24 February 2010
Halooo ketemu lagi :) (tepuk tangan diatas meja...buk buk buk :D)kali ini saya mau cerita sedikit tentang bagaimana menginstal template Joomla tanpa m...

Saturday, 13 February 2010
Pertamina Blog Contest pun usai sudah. Usai? buat yang merasa ikutan Pertamina Blog Contest aka PBC bertanya-tanya, lho bukannya sudah usai sejak ditu...

Wednesday, 10 February 2010
What's up? Too much head will make your visitor headache? What's head? Dah ah, lagi mau posting pakai bahasa Inggris, tapi kok masih cadel juga nih :...

Wednesday, 10 February 2010
Alhamdulillah, akhirnya jadi juga misi redesain web Myfia On The Web ini. Ternyata benar adanya, dalam krisis kita dipaksa untuk berpikir kritis dan a...
Scroll to top
Copyleft © 2010 http://www.riesurya.com;
Custom Design Tableless Template by riesurya - Using Grid 960Css Framework, plus Notepad++ plus JQuery plus CSS and off course Joomla!
Other Customized Templates : Needpharmacyjobs- Oil and gas Jobs Career


Page generated in 0.010009 seconds to load.