Mendengar Halaman Web

Posted: June 7, 2009 at 01:28:08 by Dani Iswara. Words count: 707.
Last updated: June 11, 2009 at 21:31:24.

Selain tampilan visual, mendengar halaman situs web/blog menjadi salah satu cara pengguna mengakses informasi di Internet. Baik oleh pengguna difabel--melalui 'screen reader'-- atau pun pemakai 'voice browser' seperti pada iPod generasi tertentu. Dengan bantuan ekstensi Fangs--unduh dari situs SourceForge.net-- di peramban Firefox, saya mencatat beberapa hal menarik. Fangs adalah salah satu emulator 'screen reader' berbahasa Inggris yang terintegrasi dengan peramban Firefox. Halaman uji coba yang digunakan adalah:
  1. Laman (halaman depan) blog Dani Iswara .Net saat menampilkan tulisan terakhir berjudul Web Readability on Dark Background.
  2. Halaman tunggal tulisan terakhir dengan judul yang sama seperti disebut di atas.
Satu lagi tulisan tidak penting tersaji. Cara pemakaian ekstensi Fangs:
  1. Setelah ekstensi terpasang, buka halaman web yang hendak dites.
  2. Di deretan 'toolbar' Firefox, klik menu 'Tools' → 'Fangs'. Akan terbuka jendela baru.
  3. Hasilnya terlihat seperti Gambar 1 di bawah.
Tersaji kata-kata yang biasanya disuarakan oleh screen reader saat membaca homepage.

Gambar 1. Hasil bacaan laman blog Dani Iswara .Net oleh ekstensi Fangs. Klik pada gambar untuk memperjelas tampilannya.

Transkrip beberapa hal penting di atas:
  1. Bagian atas halaman web.
    Page has four headings and forty-one links Dani Iswara .Net — The most unessential weblog dash Internet Explorer List of two items bullet This page link skip to content alt plus two bullet This page link skip to menu alt plus three List end Heading level one Link Dani Iswara .Net The most unessential weblog Physician note of web, blog, Internet, health, Medical Informatics, Consumer Health Informatics, and GNU slash Linux. List of seven items bullet Link Home alt plus one bullet Link About alt plus eight bullet Link Help ...

    Dapat 'terdengar' informasi jumlah judul-sub judul dan tautan, keterangan judul ('heading'), daftar item, serta accesskey pada laman tersebut.

  2. Contoh halaman tunggal ('single post').
    Page has seven headings and one hundred eighty-eight links Web Readability on Dark Background — Dani Iswara .Net ...

    Jumlah tautan biasanya menjadi lebih banyak.

  3. Pada 'screen reader' yang sesungguhnya, beberapa singkatan akan dibaca sebagai suatu kalimat. Emulator Fangs yang digunakan kali ini sepertinya tidak/belum dapat membaca tag abbr dan acronym.

  4. Daftar komentator pada sistem komentar bertingkat.
    ... List of eight items one Comment by Link Triyono ... Link Reply this comment List of one item bullet Comment by ... List end two Comment by ...

    Urutan komentator terdengar tidak logis ('one', 'bullet', 'two').

  5. Kotak isian komentar terdengar seperti di bawah ini.
    ... Name left paren required right paren colon Edit dani Mail left paren will not be published; required right paren colon Edit daniiswara at gmail.com URI slash Web slash Blog left paren optional right paren colon Edit http colon slash slash daniiswara.net slash Human? Sum of eight plus sixteen equals Edit ...

    Setelah kata 'edit', pendengar biasanya dihadapkan pada suatu formulir isian.

Catatan:
  • Baris alt plus one adalah salah satu accesskey standar. Dapat diakses dengan menekan kombinasi alt+1 (misalnya pengguna Internet Explorer - Windows) atau shift+alt+1 jika memakai Firefox di Linux. Penggunaannya masih kontroversi. Selebihnya bisa dilihat di halaman Help.
  • Emulator Fangs mungkin memiliki kelemahan dibandingkan emulator 'screen reader' modern saat ini.
Jika tertarik hasil bacaan Fangs pada tes di atas, berkas teksnya yang berformat .txt silakan diunduh: Seputar hasil baca tautan/pranala oleh emulator 'screen reader', lihat kembali tulisan berjudul Mendengar Pranala Halaman Web di Dani Iswara .Net. Beberapa catatan (yang menurut saya) penting menarik terkait hal di atas:
  1. Kira-kira bagaimana reaksi pengguna (pendengar) jika mengetahui ada 100 lebih jumlah tautan (belum termasuk tautan komentator) di suatu halaman web?
  2. Hindari penggunaan singkatan kata yang tidak baku atau belum dapat dibaca 'screen reader' dengan baik. Termasuk dalam kotak komentar? :) Misalnya: yg untuk yang, jg--juga, bgt--begitu, dll--dan lain-lain, dsb--dan sebagainya, kapan2--kapan-kapan.
  3. Menjabarkan singkatan kata-kata baku. Setidaknya sekali di awal pemunculannya. Cukup melalui teks biasa jika abbr dan acronym dirasa kurang aksesibel.
  4. Pada kotak isian komentator, lebih logis jika label mendahului kotak input? Bukan sebaliknya? Jadi urutannya, "Name ... Edit ...".
  5. Seandainya daftar komentator di sistem komentar bertingkat ('threaded/nested comment') ini bisa lebih aksesibel lagi. Jumlah komentar yang tercatat, bisa sesuai dengan jumlah 'list item'. Urutannya pun logis.
Ada lagi? Bagaimana menurut rekan-rekan? :) Just unessential weblog
Dani Iswara, mail me: [myfirstnamelastname]@gmail.com.

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: Mendengar Halaman Web 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: Mendengar Halaman Web

  1. Comment by nomercy on June 10, 2009 at 03:00:05
    using Firefox 3.0.10 on Linux Mint 7

    1) fangsnya gak bisa diinstal, katanya untuk versi fx yang lebih rendah ... :(

    2) saya masih bingung mas mengenai comment form itu ... jadi mana yg lebih baik? labelnya sebelum atau sesudah form?

  2. Comment by Dani Iswara on June 10, 2009 at 03:44:10
    using Firefox 3.0.10 on Gentoo

    Pak Ardi,
    fangs-nya memang versi lama yang belum diperbarui, pak. entah kenapa dulu bisa saya install di linux ini. saya coba di windows, ngga bisa. :(

    menurut saya, kotak input duluan akan keliatan usable kalo urutannya selalu: name, email, url. di blogspot yang default cuman perlu name dan url. blogspot yang make js-kit ternyata urutannya malah berbeda (name, url, email--opsional untuk follow-up). entah jika ada opsi lainnya. coba nanti kita tanya Cahya.

    konsep di sisi aksesibilitas hanya menyatakan label sebaiknya berdekatan dengan input. :)

    untuk masalah yang sama, saya pernah nanya ke Douglast.com, komentarnya dia:

    Best practice to have it on the right… Maybe not. The label should still be associated with the input box, but it might not be read as cleanly as it could be. I’ll be testing and possible approving that.

  3. Comment by Cahya on June 10, 2009 at 12:46:51
    using Firefox 3.0.10 on Windows Vista

    Mendengarkan kadang tidak nyaman, saya membaca buku elektronik .lit dengan Microsoft Reader sama sekali tidak membantu (kenyamanan tentunya)...

    Berbeda dengan mendengarkan audio-book, seakan-akan membaca sesuatu yang tertulis menjadi "aneh" bagi saya jika dilakukan dengan piranti lunak yang dirancang untuk itu...

    Aih..., sekali lagi keluhan yang tidak penting.

    Ngomong-ngomong apa sudah ada halaman web yang bisa di-bau-i aromanya? Bukankah sekarang sudah ada teknologi pemindah aroma secara digital?

  4. Comment by Dani Iswara on June 10, 2009 at 15:43:29
    using Firefox 3.0.10 on Gentoo

    Cahya,
    Yup, bayangkan bagaimana susahnya difabel membaca halaman web.

    Kecuali halaman web atau suatu materi memang dibuat khusus untuk itu. Seperti yang dilakukan Glenda Watson di salah satu presentasinya yang memakai bantuan voice browser.

    Mengenai pembauan, sepertinya itu pernah dicoba di topik-topik telemedisin untuk menyamai panca indera dokter saat membantu diagnosis jarak jauh. cmiiw :)

  5. Comment by ganda on June 10, 2009 at 15:56:17
    using Internet Explorer 8.0 on Windows XP

    jadi aneh juga ya? jadi lucu juga pembacaannya. malah klo saya yang mendengarkan, membuat saya bingung...

    contoh

    List of eight items one Comment by Link Triyono … Link Reply this comment List of one item bullet Comment by … List end two Comment by …

    lucu juga klo di baca Comment by Link Triyono, bukan Comment by Triyono.

    mungkin karena alasan ini juga SmashingMagazine tidak menerima alamat blog setiap visitor yang memberi komentar.

  6. Comment by Dani Iswara on June 10, 2009 at 16:47:50
    using Firefox 3.0.10 on Gentoo

    ganda,
    mereka yang sekelas ramaditya mungkin sudah terbiasa, tidak lagi mesti mengernyitkan dahi atau malah tertawa terpingkal-pingkal saat mendengar hasil baca mesin bantunya.

    kalo SM, entah apa alasan mereka.

  7. Comment by ganda on June 10, 2009 at 17:25:55
    using Internet Explorer 8.0 on Windows XP

    iya juga sih. Ini faktor kebiasaan juga. Sama seperti makanan. Indonesia terbiasa makan nasi, sementara orang luar, misalnya terbiasa makan roti+keju+susu.

    atau mengurangi linkout mungkin ya pak? Agar linkout mereka terlalu banyak dari pada linkin. CMIIW

  8. Comment by Dani Iswara on June 10, 2009 at 20:26:46
    using Firefox 3.0.10 on Gentoo

    form komentar biasanya kan nofollow..biar ngga kena spam mungkin..

    kalo pake bahasa gaul, screen reader Indonesia bisa baca ngga ya..

  9. Comment by uwiuw on June 13, 2009 at 08:39:10
    using Firefox 3.0.10 on Windows XP

    kalau enggak salah dulu pernah deh dikembangkan alat external seperti tool yg bekerja seperti obat nyamuk elektrik. Kita membeli pampers yg isinya bau bau sintesis.

    Jadi saat ita buka halaman khusus flora dan fauna, maka alat tersebut otomatis mendownload kode sintesis bau bauan tsb

    heheheh produk ini udah lama umurnya. tp enggak pernah keluar jadi produk massal. cuma jadi pajangan protoype aja. lupa namnya, cuma lihat di tv waktu jaman dulu (jaman warnet masih kehitung jari)

  10. Comment by Dani Iswara on June 13, 2009 at 08:59:38
    using Firefox 3.0.10 on Gentoo

    uwiuw,
    infonya menarik, makasi, mas aulia, kapan-kapan pengen nelusuri itu lagi. :)

  11. Comment by samsul arifin on June 13, 2009 at 21:12:48
    using Firefox 3.0.11 on Windows XP

    aku baca beberapa kali, kok aku tetap ga mudheng tulisan ini yah?
    aku gaptek banget nih.

  12. Comment by Dani Iswara on June 13, 2009 at 22:55:23
    using Opera 10.00 on GNU/Linux

    samsul arifin,
    pernah make fitur "read out loud"-nya adobe reader? ya seperti itulah pengguna difabel (dalam hal ini visually impaired/gangguan penglihatan) dan pengguna iPod-ber-voice-browser 'membaca' informasi di web.

    seperti tulisan mas itu, "Hak untuk mendapatkan perlakuan yang sama." :)

  13. Comment by Script Gratis on July 2, 2009 at 17:27:59
    using Firefox 3.0.9 on Windows XP

    Wah cukup crative juga ini ada cara mendengarkan web tapi cool juga bro. Kalau mau simple pake aja file midi pak dijamin pasti bisa deh. thank.

  14. Comment by Dani Iswara on July 3, 2009 at 08:57:14
    using Firefox 3.0.11 on Gentoo

    tapi ini maksudnya memang bukan model podcast.

Trackbacks/Pingbacks

  1. Pingback by Label Left Align followed by Input Field - Dani Iswara .Net on June 18, 2009 at 02:22:25
    WordPress abc

    [...] has a relationship with the flow and accessibility. Just like my previous post, Hearing Web Page (in bahasa Indonesia). Label, on the left (see Figure 1: number a and b), will be heard first, [...]

  2. Pingback by Cara Difabel Mengakses Web - Dani Iswara .Net on October 21, 2009 at 11:30:30
    WordPress abc

    [...] table summary, label pada formulir isian, caption, atribut alt, akan sangat membantu. Baca juga Mendengar Halaman Web (Dan Iswara [...]

  3. Pingback by Teks Pranala yang Aksesibel dan Usable - Dani Iswara .Net on October 23, 2009 at 02:17:57
    WordPress abc

    [...] colon slash slash example dot com slash …. Lihat kembali Mendengar Pranala Halaman Web dan Mendengar Halaman Web di Dani Iswara [...]

  4. Pingback by Pemakaian Unordered List pada Menu - Unessential Weblog on May 12, 2010 at 14:28:38
    WordPress abc

    [...] Mendengar Halaman Web. [...]

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: Standar Web tidak Meningkatkan SEO
‹‹ Newer entries: Label Left Align followed by Input Field