Teks Alternatif untuk Atribut ALT

May 7, 2009 – 04:21 by Dani Iswara. Words count: 569.
Last updated: Saturday, January 30, 2010 at 11:35.

Sebagai teks alternatif, atribut (bukan tag) alt ditujukan untuk memberi informasi tambahan yang serupa pada konten non-teks. Jadi, jika suatu konten non-teks tidak ditampilkan/terbaca, pengguna/pengunjung tidak akan kehilangan informasinya. Teks alternatif (teks alt) dapat berupa teks pendek atau bahkan deskripsi yang agak panjang.

Jika konten non-teks (misalnya gambar, logo, animasi, video, dan rekaman suara) dihilangkan/dinonaktifkan (di-’disable’), atau tidak terbaca karena memerlukan ‘plugin’ tertentu, teks alternatif hendaknya tetap mampu memberi informasi dan fungsi yang serupa. Tapi hindari pengulangan kata-kata yang sama pada alt, title, dan ‘anchor text’.

Teks alternatif harus disertakan pada elemen img dan area, tapi bersifat opsional pada input.

Pertimbangan dalam Menentukan Teks Alternatif

Pertimbangan-pertimbangan berikut dapat dipakai dalam menentukan teks alternatif bagi atribut alt:

  • Mengapa suatu konten non-teks ada di halaman tersebut?
  • Informasi apa yang disajikan/disampaikannya?
  • Fungsi apa yang diembannya? Dekoratif saja? Bisa diperbesar? Diklik, menuju kemana/apa yang akan terjadi? Membuka jendela baru? Tombol untuk apa?
  • Menampilkan informasi serupa seperti yang ditampilkan oleh format gambar.
  • Bukan pengulangan. Sebaiknya tidak sama persis dengan teks yang sudah disajikan di sekitar konten non-teks. Misalnya atribut tag dengan title, summary, atau tag caption.
  • Tidak menggunakan frasa seperti: “gambar…”, “logo…”, jika ingin mendeskripsikan suatu gambar/logo. Karena dianggap sudah jelas bahwa itu adalah suatu gambar/logo.
  • Teks alternatif dapat berupa deskripsi pada atribut alt (misalnya untuk gambar), dilengkapi title (untuk pranala), dan bisa juga diletakkan sebagai teks biasa di sekitar gambar sesuai konteks.
  • Setiap gambar harus memiliki atribut alt.
    Gambar dekoratif menggunakan alt="". Deskripsinya dibiarkan kosong, tanpa spasi. ‘Screen reader’/'aural agent’ akan memahaminya sebagai gambar dekoratif. Bagaimana dengan gambar yang memakai ‘pseudo-class’ CSS (‘Cascading Style Sheets’)?
  • WCAG (‘Web Content Accessibility Guidelines’) menyarankan jumlah huruf pada deskripsi atribut alt (untuk bahasa Inggris) sebanyak kurang dari 100 karakter, bahasa Jerman 115 karakter, dan bahasa Korea 90 karakter.

Contoh teks alternatif

Kata-kata apa saja yang direkomendasikan untuk dipakai dalam teks alternatif? Contoh-contoh ini mungkin bisa sedikit memberi gambaran:

  • Gambar produk beserta spesifikasi singkat di suatu situs ‘e-commerce’ (’shopping cart’).
    Jika pada gambar terdapat informasi berupa kata-kata (misalnya jenis, harga, merk), maka frasa tersebut harusnya juga ada pada teks alternatif. Beri deskripsi pendek pada alt="...", lalu tambahkan longdesc jika memang membutuhkan penjelasan/spesifikasi lebih lengkap.
    Hal ini sempat tertulis di Review Bhinneka.com.
  • Judul blog “Catatan Harian Dokter” dalam berkas gambar.
    Teksnya juga berupa alt="Catatan Harian Dokter".
  • Tombol pencarian yang bergambar kaca pembesar.
    Gunakan alt="Search", bukan kaca pembesar. Penekanan lebih pada fungsi dan informasi, bukan visual.
    Begitu juga pada tombol ‘Submit’ yang memakai gambar, gunakan alt="Submit". Seperti pernah dibahas di 6 hal aksesibilitas blog yang mungkin terlupakan.
  • Gambar mobil dengan plat nomor.
    Teksnya dapat berupa identifikasi merk mobil, warna, tampak depan/belakang, beserta nomor platnya.
  • Gambar tabel penjualan per bulan.
    Diinformasikan nilai penjualan tiap bulannya.
  • Logo merk di samping tiap spesifikasi produk.
    Cukup disebutkan, misalnya alt="Linux", bukan logo Linux.
  • Animasi tentang penyetelan peramban Firefox.
    Teks alternatifnya berupa menu dan tombol apa saja yang harus diikuti/ditekan.
  • Berkas animasi presentasi daring (dalam jaringan; ‘online’).
    Misalnya seperti Slideshare.net. Sediakan teks yang menjelaskan topik yang disajikan per ’slide’.

Aksesibilitas Web dan atribut alt

Jadi, peran atribut alt sangat penting dalam menunjang aksesibilitas web. Agar pengguna/pengunjung tidak kehilangan informasi dan fungsi. Penggunaan berlebihan kadang terjadi demi pengoptimalan mesin pencari Internet (SEO).

Yang ini saya kuotasi saja, agar tidak mengurangi makna:

Adding alternative text to images is one of the easiest accessibility principles to learn and one of the hardest to master.

Penulisan ‘teks alternatif’ dan ‘alternatif teks’ dalam bahasa Inggris pun ternyata masih sering bolak-balik. Entah bagaimana yang benar.
Silakan tambahan dan koreksinya… :)

Bacaan:

Just unessential weblog
Dani Iswara, mail me: [myfirstnamelastname]@gmail.com or use contact form.

Posted in category: SEO Tips, Web Accessibility
Tags: , , ,
18 Comments/Trackbacks (Comment closed)

You are free to share (copy, distribute, transmit) & adapt this blog post under the similar license (Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported; CCA-NC-SA 3.0 Unported). Please put these links on your copy:
Taken from: Teks Alternatif untuk Atribut ALT by Dani Iswara.

Unimportant Related/Random Posts

You may also read list of most popular posts and most popular tags of Dani Iswara .Net.

18 Responses to post titled: Teks Alternatif untuk Atribut ALT

  1. Comment by nomercy on May 13, 2009 at 17:09:52
    using Mozilla Firefox 3.0.10 on Linux Mint 6

    sudah dicoba diterapkan mas … tetapi kok sewaktu ditest melalui cloak browser ternyata masih tidak terbaca oleh bots … apa ada yg salah ya di salah satu baris script di blog saya …

  2. Comment by Dani Iswara on May 13, 2009 at 18:15:28
    using IceWeasel 3.0.9 on Debian GNU/Linux

    nomercy,
    wah, maaf, maksudnya apa ya, pak?

  3. Comment by gdenarayana on May 13, 2009 at 21:29:09
    using Mozilla Firefox 3.0.1 on Windows XP

    [OOT]
    bli dani, tiyang metakon kedik inggih, klo utk hyperlink apa semua harus dikasihkan title bli? soalnya kok kayanya diignore sama crawler dan sebangsanya (engga tau jg apa semuanya ignore) biarpun masang atribut title di tiap hyperlink.

    sebaiknya itu dibagian apa ngasih atribut title bli (terutama di hyperlink) kayanya dulu bli pernah bahas, tapi saya lupa pok di posting yang mana.

    suksma bli :)

  4. Comment by jenggo on May 13, 2009 at 22:16:44
    using Mozilla Firefox 3.0.9 on Slackware Linux

    Wah, selama ini cuma buat pelengkap syarat xhtml strict doang, jadi rada males ngasih info lengkap tentang gambar tersebut.. Biasanya cuma info singkat ajah.. Ehehehe..

  5. Comment by Dani Iswara on May 13, 2009 at 23:38:09
    using IceWeasel 3.0.9 on Debian GNU/Linux

    jenggo,
    ternyata ribet juga kalo bacaan web guru itu diikutin.. :(
    halah slackware..emang slackware ada logo resminya..
    udah lah, generik aja.. :D

  6. Comment by Dani Iswara on May 13, 2009 at 23:54:22
    using IceWeasel 3.0.9 on Debian GNU/Linux

    gdenarayana,
    [ketangkep si memet lg] :)
    iya, bli wayan, dari yg saya baca, ngga perlu lagi atribut title kalo ‘anchor text’ dah deskriptif..
    itu utk bahan tulisan selanutnya aja ya..tulisan yg lalu itu ada di atribut TITLE terkait SEO dan aksesibilitas :)

  7. Comment by preaxz on May 14, 2009 at 09:47:42
    using Mozilla Firefox 3.0.10 on Windows XP

    atribut alternate itu juga perlu sebagai antisipasi apabila seseorang mematikan tampilan image pada browsernya ..

    misalkan pada artikel penulis mereferensikan “Lihat Gambar 1″ dan pembaca mematikan image, maka pembaca tidak bingung mencari letak “Gambar 1″

  8. Comment by Dani Iswara on May 14, 2009 at 12:58:20
    using Safari 528.16 on Windows XP

    preaxz,
    saya juga setuju itu, Mas Arie :)
    selain teks alt, gemana kalo dibuat semacam <caption>Gambar 1. [deskripsi di sini]</caption> atau plain text di bawah/samping gambar, sehingga pengguna yg tdk mematikan tampilan gambar tetap dapat mudah menemukan tulisan “Gambar 1″.. :)

  9. Comment by Cahya on May 14, 2009 at 13:18:18
    using Mozilla Firefox 3.0.10 on Windows Vista

    He…, makin dibaca, makin ga ngerti, ga nyambung sih, oke nanti tyang coba baca ulang lagi :D

  10. Comment by rismaka on May 17, 2009 at 04:32:41
    using Mozilla Firefox 3.0.10 on Windows XP

    @Dani
    Saya setuju dengan pemakaian caption sebagai deskripsi tambahan dari suatu image, hanya saja sepertinya agak kurang rapi jika image tersebut terletak di kiri tulisan (class=left), Hanya pendapat pribadi siy…

  11. Comment by Dani Iswara on May 17, 2009 at 10:41:50
    using Mozilla Firefox 3.0.10 on Gentoo Linux

    rismaka,
    IMO, kalo alignment-nya sesuai, sptnya ngga masalah, kan :)

Trackbacks/Pingbacks

  1. Pingback by Atribut TITLE yang Berlebihan - Dani Iswara .Net on May 15, 2009 at 04:54:20
    using WordPress abc

    [...] Harus disertakan dalam tiap tag img mendampingi atribut alt. Lihat kembali anjuran di atas. Baca juga Teks Alternatif untuk Atribut ALT. [...]

  2. Pingback by Web Standards, Semantic, Accessibility, and Usability Checklist - Dani Iswara .Net on May 20, 2009 at 18:14:12
    using WordPress abc

    [...] accessible on disable images and javascript. Use alt attribute properly (in bahasa [...]

  3. Pingback by Special Text on SEO, Semantic, and Usability-Accessibility - Dani Iswara .Net on June 4, 2009 at 16:25:03
    using WordPress abc

    [...] tag must have alt attribute (see on text alternative for alt attribute; bahasa [...]

  4. Pingback by 6 Tips Optimasi Gambar Untuk Web | RISOFTE on June 12, 2009 at 04:23:30
    using WordPress 2.7.1

    [...] Hal-hal yang perlu diperhatikan dalam penggunaan atribut ALT dan TITLE pada gambar: [Dikutip beberapa diantaranya dari daniiswara.Net] [...]

  5. Pingback by Cara Difabel Mengakses Web - Dani Iswara .Net on October 21, 2009 at 17:02:25
    using WordPress abc

    [...] Lihat juga Atribut title terkait Aksesibilitas dan SEO. Silakan juga menelusuri cara membuat Teks Alternatif untuk Atribut alt di Dani Iswara [...]

  6. Pingback by Tag Image sebagai Pranala yang Mudah Diakses — Dani Iswara .Net on January 30, 2010 at 11:51:37
    using WordPress abc

    [...] ini menyambung tulisan lama berjudul Teks Alternatif untuk Atribut alt di Dani Iswara .Net. Jika tag img ditampilkan sebagai pranala/tautan, ada beberapa rekomendasi yang [...]

  7. Pingback by Disable Images, Masalahmu Deritamu — Dani Iswara .Net on March 15, 2010 at 07:10:50
    using WordPress abc

    [...] penunjang sering tidak memiliki atribut alt yang deskriptif. Padahal gambar tersebut penting untuk menambah pemahaman pengguna sesuai konteks. Bukan sekadar [...]

Sorry, for some reasons (sometimes due to sp*ms attack), the comment form is closed at this time. If You have any suggestions, please contact me. Thank you.

Dani Iswara .Net

Return to TOP
›› Older entries: Konten Web sebaiknya tidak Memakai Justified Text
‹‹ Newer entries: Browser Sniff Plugin Detects more Browsers and Operating Systems