6 Hal Aksesibilitas Blog yang Mungkin Terlupakan

Posted: March 22, 2009 at 03:57:30 by Dani Iswara. Words count: 569.
Last updated: July 9, 2010 at 16:02:08.

Aksesibilitas web/blog sudah beberapa kali tertulis di situs Dani Iswara .Net. Catatan ini hanya memuat 6 hal yang mungkin terlupakan. Umumnya, sudah cukup sering diulas seputar penyajian alternatif teks/transkrip untuk konten multimedia (audio, video, animasi) & flash, teks 'anchor' yang deskriptif--bukan sekadar 'read more', 'here', 'click here', atribut alt="..." yang deskriptif untuk gambar non-dekoratif, pemakaian atribut title="..." pada taut/'link', dan konsistensi menu navigasi. Masih ada beberapa hal lainnya. Keenam hal tersebut:

  1. Menyajikan skip to main content

    Dianjurkan menyediakan taut semacam skip navigation (istilah ini terasa rancu jika muncul di layar desktop) atau skip to main content yang mudah diakses di tiap bagian--paling atas--halaman web/blog. Pemakaian skip to main content lebih disarankan, karena lebih jelas dimengerti oleh screen reader. Sangat disarankan bagi halaman web yang memiliki lebih dari 5 tautan sebelum menuju konten utama. Akan bermanfaat juga, terutama bagi pengakses blog via perangkat genggam atau berlayar kecil, 'speech reader', dan peramban berbasis teks. Inginnya langsung membaca/menggunakan konten, kan? Sebagian orang mungkin menganggap taut tersebut cukup mengganggu dari sisi desain. Debat ini sepertinya masih berlanjut.

  2. Mudah membedakan teks konten dan taut/pranala/'link'

    Untuk membedakan taut (a:link, a:visited, a:hover, a:focus, a:active; dianjurkan berurutan agar efektif) dan teks biasa, tidak cukup hanya dengan warna. Kadang perlu tambahan--via CSS--garis bawah (text-decoration:underline), warna latar (background-color), atau pembatas/batas bawah (mis. border-bottom:1px solid #ccc).

    Saat menggunakan tombol tab untuk berpindah antar taut ('tabbing'), dukungan peramban Internet Explorer terhadap a:focus nampaknya masih kurang.

    Untuk tabindex ('taborder'), sepertinya tidak semua halaman web memerlukannya. Terutama jika urutan struktur halaman sudah logis. Pun tidak semua peramban memahaminya. Jangan terlalu mengandalkan mesin pengecek aksesibilitas dan memaksakan pemakaian tabindex. Jika ingin memakainya, usahakan penomorannya otomatis agar tidak membingungkan pengguna. Lihat Membuat tabindex otomatis di WordPress dengan PHP.

  3. Kontrol konten multimedia/animasi, flash, dan 'auto refresh'

    Saat menampilkan konten otomatis berupa multimedia/animasi bergerak, berkedip ('blinking'), teks berjalan ('scrolling text'), 'auto refresh'/'auto loading' (mis. 'inbox alert', 'auto refresh chat/shout box', 'auto refresh pages', 'news ticker', dll.) di blog, akan lebih nyaman jika tersedia tombol kontrol. Misalnya untuk 'stop', 'play', 'pause', 'mute', 'volume', 'download', 'share', 'hide', 'close', 'disable'.

    Terutama jika berdurasi lebih dari 3 detik. Untuk flash, disarankan menggunakan 3 'frames' per detik. Hal ini karena beberapa konten web dapat memicu bangkitan epilepsi.

  4. Pembesaran huruf tanpa merusak desain

    Teks dan desain halaman blog dianjurkan masih terbaca dengan baik jika ukuran huruf diperbesar ('zoom') hingga 2 kali. Misalnya dengan ctrl+++.

    Desain likuid/fleksibel/elastik dengan ukuran huruf relatif (misal em, %, x-small, xx-large, dll.) akan sangat menguntungkan pembaca. Utamanya bagi yang kesulitan dengan terlalu kecilnya ukuran huruf/teks. Di peramban Firefox, tampilan desain terbantu dengan fasilitas 'zoom text only'. Pembesaran hanya pada teks. Tanpa mengubah ukuran desain web/blog. Peramban makin mengerti Anda!

  5. Akses tombol Submit Comment

    Tombol yang menggunakan <input type="image" ...>, pada saat 'submit comment', kadang sulit diakses jika tampilan gambar dinonaktifkan ('disable image'). Solusi mudahnya di sisi pengelola blog, cukup pakai model <input type="submit" value="Send Comment" ...>. Bisa juga tambahkan menjadi <input type="image" alt="Submit" ...>. Atau bagi pengguna, coba dengan 'tabbing'.

  6. Penjelasan singkatan kata

    Singkatan (berupa teks biasa/'plain text', abbreviation, acronym) dianjurkan tetap dijelaskan. Teks biasa lebih aman dipakai dibandingkan abbr yang kurang dimengerti oleh peramban Internet Explorer. Singkatan penting dijelaskan, terutama pada saat pemunculannya pertama kali pada kalimat. Walaupun kata tersebut sudah umum digunakan. Memangnya saya sepintar Anda? :)

Diringkas dari: Panduan Aksesibilitas Konten Web versi 2.0 (WCAG 2.0). Jangan bingung juga dengan mitos aksesibilitas blog. Hati-hati dengan penggunaan aksesibilitas yang 'berlebihan'. Lihat di Web Accessibility gone Wild dari WebAIM.org. Ada tambahan lainnya? :) Just unessential weblog
Dani Iswara, mail me: [myfirstnamelastname]@gmail.com.

Posted in category: Web Designs
Tags: , ,
42 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: 6 Hal Aksesibilitas Blog yang Mungkin Terlupakan by Dani Iswara.

Unimportant Related/Random Posts

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

42 Responses to post titled: 6 Hal Aksesibilitas Blog yang Mungkin Terlupakan

  1. Comment by artikel kesehatan on April 2, 2009 at 13:06:38
    using Firefox 3.0.8 on Windows Vista

    saya tertarik untuk menggunakan fungsi zoom, agar mereka yg bermasalah dengan huruf kecil bisa lebih leluasa.

  2. Comment by Dani Iswara on April 2, 2009 at 14:47:34
    using Firefox 3.0.8 on Gentoo

    artikel kesehatan,
    ada jg yg make opsi javascript zoom dan contrast theme di halaman webnya

  3. Comment by d3ptzz on April 3, 2009 at 17:53:46
    using Firefox 3.0.8 on Windows XP

    mungkin bagi sebagian orang juga, bahwa VALID HTML/xHTML dan atau CSS juga penting...hehe

  4. Comment by Dani Iswara on April 3, 2009 at 19:10:55
    using Firefox 3.0.8 on Gentoo

    d3ptzz,
    walah, kalo buat penjaga kandang buaya, itu mungkin memang bukan masalah besar.. 8)

  5. Comment by gempur on April 4, 2009 at 11:25:51
    using Firefox 3.0.8 on Windows Vista

    Tips yang menarik dan memang sering terlupakan, nanti saya coba utk terapkan di blog saya. Makasih pak dani. :D

  6. Comment by uwiuw on April 4, 2009 at 16:10:53
    using Firefox 2.0.0.1 on Windows XP

    belum sempat sampai sedetail itu mikirin desain web....tp yg paing penting itu saat web tampil tanpa gambar (sy rutin browsing begini) maka tombol submitnya ngak boleh ilang. biasanya tombol submit itu pake gambar / image yg lupa di beri elemen alt. jad aja ilang ngak kelihatan

  7. Comment by Dani Iswara on April 4, 2009 at 16:19:36
    using Firefox 3.0.8 on Gentoo

    gempur,
    terlupakan krn biasanya memang tdk/blm jd prioritas/perhatian.. :)

    uwiuw,
    saya lbh seneng nyebut penyederhanaan, bang/akang aulia..
    tombol yg ilang itu kl di-tabbing biasanya masi fungsional..cmiiw 8)

  8. Comment by Abi on April 4, 2009 at 19:00:37
    using Firefox 3.0.8 on Windows XP

    Teknik yang bagus tuk dipelajari buat blogger juga desainer wp

  9. Comment by dani on April 4, 2009 at 19:36:58
    using Opera 10.00 on GNU/Linux

    Abi,
    buat sesama blogger boleh lah, tp buat desainer web..jangan lah..beliau-2 pasti lbh ngerti yg ginian.. :)

  10. Comment by co-that on April 6, 2009 at 17:11:22
    using Firefox 3.0.8 on Mac OS X 10.5

    wah banyak aturan juga ternyata... *free your mind*

  11. Comment by Dani Iswara on April 6, 2009 at 19:56:46
    using Firefox 3.0.8 on Gentoo

    co-that,
    those are not rules or law, it's just the W3C's recommendation of web best practices.. 8)

  12. Comment by co-that on April 6, 2009 at 20:56:17
    using Firefox 3.0.8 on Mac OS X 10.5

    hahah gitu ya?? hehehe maklum bli saia orang yang susah diatur!! bahkan oleh aturan di Kitab suci hahahah :)

  13. Comment by Dani Iswara on April 6, 2009 at 21:08:10
    using Firefox 3.0.8 on Gentoo

    co-that,
    kl ada komentar senada bli itu, biasanya sih saya jawab:

    rekomendasi itu kan dibikin para pakar di bidangnya, kl cocok dan sanggup ya saya coba pake..lagian, kasian juga mereka, dah bikin rekomendasi kok dicuekin..

    :lol:
    tapi bener, jangan terikat, ngga dipaksa kok.. :)

  14. Comment by podelz on April 6, 2009 at 23:17:03
    using Firefox 3.0.7 on Fedora 10

    menulis pake aturan, itu susah banget :(:(

  15. Comment by Dani Iswara on April 7, 2009 at 02:45:20
    using Firefox 3.0.8 on Gentoo

    podelz,
    bener bos, bukan aturan, cuman rekomendasi..

  16. Comment by awam_internet on April 7, 2009 at 08:50:48
    using Opera Mini 4.2.13057 on J2ME/MIDP Device

    dah ganti username nich

  17. Comment by Dani Iswara on April 7, 2009 at 08:54:08
    using Firefox 3.0.8 on Gentoo

    awam_internet,
    makasi, bos, dah diingetin.. :) bole konsul, ngga..? japri ya..

  18. Comment by Rusa Bawean™ on April 7, 2009 at 10:22:58
    using Firefox 3.0.1 on Windows XP

    setuju
    tengkyu 4 share

  19. Comment by marsudiyanto on April 8, 2009 at 12:48:06
    using Firefox 3.0.8 on Windows Vista

    Info yang menarik dan bermanfaat buat nambah ilmu.
    makasih Mas.
    Sukses buat Mas Dani

  20. Comment by cheuw on April 8, 2009 at 18:43:30
    using Firefox 3.0.3 on Windows XP

    mksh infonya tapi mau nnya.
    untuk yang submit comment itu mskdnya gmn?

    cukup pakai model input type="submit" value="Send Comment"? Atau bagi pengguna, coba dengan ‘tabbing’. Untuk tabindex

  21. Comment by Dani Iswara on April 8, 2009 at 19:07:51
    using Firefox 3.0.8 on Gentoo

    cheuw,
    utk yg submit comment, cb blogwalking dgn disable image plus apus cache peramban, kl pas nemu, ntar terasa deh kl mo submit komen.. :)

  22. Comment by trinil on April 8, 2009 at 20:21:40
    using Firefox 3.0.3 on Windows XP

    Terima kasih atas ilmu yang bermanfaat...

  23. Comment by trinil on April 9, 2009 at 15:32:06
    using Firefox 3.0.3 on Windows XP

    Selamat ya bli telah mendapatkan FaBA '09 versi TB.
    Selamat menjalin tali silahturahmi antar blogger...

  24. Comment by nomercy on April 10, 2009 at 02:16:05
    using Firefox 3.0.6 on Windows Vista

    info yang bagus sekali ... thank's

  25. Comment by pupungbp on April 10, 2009 at 11:30:43
    using Firefox 3.0.8 on Windows XP

    Menurut saya, benar sekali apa yang dipaparkan diatas, memilih template yang enak dilihat dan tidak membingungkan juga sepertinya akan membatu, terlalu banyak iklan juga tidak baik, malah bikin bingung....

  26. Comment by dani on April 10, 2009 at 13:16:01
    using Konqueror 3.5 on Gentoo

    pupungbp,
    makasi dah mampir Mas Pupung.. :) rekomendasi W3C, imo, bukan hanya milik para master desain web spt mas Pupung dkk, tp jg awam spt saya boleh menerapkannya..
    ttg iklan, gemana kalo pengunjung jg diedukasi bahwa mereka sebenarnya punya opsi utk men-disable image, flash, javascript, 'auto refresh' di sisi peramban.. :)

  27. Comment by gdenarayana on April 10, 2009 at 13:32:06
    using Firefox 3.0.1 on Windows XP

    [OOT]

    mampir siang bli, nanya tentang access key itu gimana yah, apa ditarohnya di home yang ada fitur2 navigasi utk memudahkan pengunjung terutama pake mobile phones?

    bin besik beli, beh jeg luung san jani templatnya puk :D makin oye dari semua sisi nie bli, lengkap!

    suksma bli :)

  28. Comment by Kangujhe on April 10, 2009 at 14:06:04
    using Firefox 3.0 on Windows XP

    hmmmmmmmmm boleh juga ...
    btw sempet2nya blogging padahal dokter tuch jobnya
    salut dech

  29. Comment by dani on April 10, 2009 at 14:46:38
    using Opera 9.64 on GNU/Linux

    gdenarayana,
    ini sih masih sangat nyambung dgn konteks, bukan OOT, bli wayan.. :) pertanyaannya bagus..

    access keys biasanya ditaruh di menu navigasi dan links yg konsisten dan sering dipake.

    penomoran & kombinasi tombol shortcut-nya ada standar tersendiri di tiap peramban.

    tujuannya memudahkan akses ke links/halaman web dgn menggunakan keyboard (tanpa mouse).

    bacaan: access keys - mobile web best practices

    suksma bli wayan, pang aluh ngubuhin nika.. 8)

  30. Comment by ammadis on April 11, 2009 at 11:19:06
    using Firefox 2.0.0.4 on Windows XP

    Pak dani, justru banyak lho tutor blog yg malah menghilangkan tanda2 link pada postingan itu....kadang sudah embedded dengan template yg dibuat.....

    Untuk hal yg lainnya, menarik tapi apakah memang perlu untuk semua niche blog...???Atau utk yg tertentu saja...

  31. Comment by Dani Iswara on April 11, 2009 at 19:18:35
    using Firefox 3.0.8 on Gentoo

    ammadis,
    maksudnya tautan yg skip to content ya..
    memang ada yg mengaturnya hidden di desktop tp visible di versi mobile, ada yg memang visible di bbrp media (mis. screen, handheld, tv, projector), ada jg yg visible stlh bag atas di-hover.

    imo, perlu tdknya tgt estetika dan kebutuhan pengelola blog masing-2.

  32. Comment by PanDe Baik on April 14, 2009 at 20:19:53
    using Firefox 3.0.1 on Windows XP

    Dari semua poin, gak satupun yang saya mengerti. Mungkin itu sebabnya BLoG saya ya seperti apa adanya. :p
    apa adanya seperti yang di oprek oleh Pak Dokter Cock sekitar setahun lalu...
    tapi Terima Kasih....

  33. Comment by Dani Iswara on April 14, 2009 at 20:40:22
    using Firefox 3.0.8 on Gentoo

    PanDe Baik,
    perhaps, it doesn't matter for a common user, bli Pande :)
    tp mungkin matter buat saya dkk difabel, spt saya tulis di cermin aksesibilitas :P

  34. Comment by endar on April 16, 2009 at 23:51:23
    using Firefox 3.0.7 on Ubuntu 8.10

    menarik sekali pak. saya perlu belajar banyak mengenai aksesibilitas tersebut.

  35. Comment by abbie on April 18, 2009 at 21:37:21
    using Firefox 3.0.7 on Windows XP

    Emm.. bahasan yang berat buat saya yg cuma user dan suka ngoprek amatiran.

    Ini aksesibilitas buat visitor ya dok? Klo buat SE gimana ya?

  36. Comment by Dani Iswara on April 18, 2009 at 22:32:05
    using Firefox 3.0.8 on Gentoo

    endar,
    masi kurang banyak oprekannya ya, pak.. :)

    abbie,
    suer, ini bener-2 cuman dasarnya aja katanya..
    human first, machines later lah..hrsnya persyaratan utk mesin dan manusia ngga akan jauh berbeda, toh algoritma mesin pencari dibuat utk memuaskan human.

    imo, cara paling manusiawi dan natural memuaskan human dan mesin adalah dgn menerapkan aksesibilitas dan usability (keduanya berbasis standar web dan semantik), bukannya mengakali mesin pencari :)

  37. Comment by Rusa Bawean™ on May 14, 2009 at 00:53:36
    using Firefox 2.0.0.11 on Windows XP

    caranya bikin skip to content gmn yaaaa

  38. Comment by Dani Iswara on May 14, 2009 at 05:00:30
    using Firefox 3.0.10 on Gentoo

    Rusa Bawean,
    ada yg make visible link seperti biasa, ada yg di-hidden dan hanya muncul jika diakses dgn screen reader. panduan di WebAIM mungkin membantu.

  39. Comment by rismaka on June 23, 2009 at 01:57:34
    using Firefox 3.0.10 on Windows XP

    Apakah menu "Skip to content" masih diperlukan, jika jarak antara taut skip ke kontennya hanya beberapa sentimeter saja dok?

    Bagaimana pula dengan taut "back to top", "jump to comment", apakah senada dengan aksesibilitasnya dg "skip to content" ?

Trackbacks/Pingbacks

  1. Pingback by Simulasi Web Usability dari Google ke Homepage - Dani Iswara .Net on April 29, 2009 at 09:56:26
    WordPress abc

    [...] yang pernah saya tulis di 6 Hal Aksesibilitas Blog yang Mungkin Terlupakan, posisi kursor sulit ditemukan saat berpindah taut/kolom dengan [...]

  2. Pingback by Teks Alternatif untuk Atribut ALT - Dani Iswara .Net on May 13, 2009 at 12:38:01
    WordPress abc

    [...] 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. [...]

  3. Pingback by Sure, they are links - Dani Iswara .Net on June 14, 2009 at 21:48:48
    WordPress abc

    [...] you are interested, view Hearing web page link and 6 forgotten things of accessibility (both in bahasa [...]

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: Tes Klasik 5 Detik dan Above the Fold untuk Kebergunaan Blog Dokter
‹‹ Newer entries: Tulisan Blog Dokter, Timeless Content, dan Keterangan Waktu