Myfia On The Web
Beta Version

CSS Diagnostic for Image Alternate Text

Last Updated :: Saturday, 16 May 2009 18:43 by Riesurya@MOTW

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)