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.
2. Pengunjung tahu ada gambar di tulisan tersebut, tapi bingung itu gambar apa
3. Pengunjung mengetahui gambar apa, tapi tidak tahu dimensi (lebar dan tinggi) gambar tersebut
4. Layout paragraf mengalami colaps
1. Teks alternatif harus jelas dan deskriptif
Penulisan markah HTML untuk gambar yang baik dan benar adalah sebagai berikut:
Tambahkan property beserta value berikut ke dalam berkas CSS dari theme yang kita gunakan.
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:
1. Pengunjung tidak tahu bahwa di tulisan yang ia baca ada gambar
2. Pengunjung tahu ada gambar di tulisan tersebut, tapi bingung itu gambar apa
3. Pengunjung mengetahui gambar apa, tapi tidak tahu dimensi (lebar dan tinggi) gambar tersebut
4. 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.1. 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" />2. 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; }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.
img.wp-smiley { display: inline-block; border:none; padding: 0; margin:0; width:15px; height:15px; }