Logisnya Konten via Emulator Screen Reader

Noted: Tuesday, June 29, 2010 at 23:32:13. Words count: 795.
Last updated: Sunday, June 26, 2016 at 20:59:29.

Ekstensi Fangs untuk Firefox (addons.mozilla.org) bisa dipakai untuk menguji logis tidaknya konten yang terbaca via 'screen reader'.

Fangs renders a text version of a web page similar to how a screen reader would read it. The ambition is to help developers understand how an assistive device would present a website and thereby increase chances of finding accessibility issues early.

Saat tulisan ini dibuat, versi terakhir adalah Fangs 1.0.7 di Firefox 3.6.6 Linux Arch.

Sebelumnya, saya pernah mencoba Fangs. Lihat catatan lama di Dani Iswara .Net berjudul Mencoba Fangs-Screen Reader Emulator Firefox (2008).

Untuk uji coba kali ini, tulisan Mengomentari Konten Blog (Dani Iswara .com) dijadikan bahan.

Pentingnya semantik dan tanda baca

Dokumentasi lawas pernah ada yang menyarankan agar format daftar/urutan/'listing' yang memakai penomoran, maka nomor ditulis manual. Karena saat itu 'screen reader'/pembaca layar komputer belum mampu mengenali penomoran.

Yang menurut saya menjadi isu lain, yaitu pemakaian tanda baca, 'smiley', singkatan, dan elemen semantik (X)HTML.

Setelah Fangs diunduh dan terpasang di Firefox, buka halaman Web yang ingin dites. Klik kanan di tengah halaman, arahkan dan klik menu 'View Fangs'. Jendela baru akan terbuka menyajikan hasil baca.

Untuk bentuk urutan seperti di bawah,

Respon berikut biasa saya pakai saat menjadi pengomentar blog.

  1. Menanggapi dari sudut pandang berbeda. Seringnya berbasis aksesibilitas Web. Karena sifatnya yang universal.

akan terbaca di Fangs:

Respon berikut biasa saya pakai saat menjadi pengomentar blog. List of three items one Menanggapi dari sudut pandang berbeda. Seringnya berbasis aksesibilitas Web. Karena sifatnya yang universal.

Seperti hasil baca Fangs di atas, urutan tiap item mestinya sudah terbaca baik oleh kebanyakan pembaca layar komputer saat ini. Jika penomoran dibuat manual (tanpa tag ol), maka ada elemen semantik yang akan hilang. Perhatikan kata-kata 'List of three items'. Masalah serupa bisa terjadi pada bagian daftar komentar blog yang masuk. Terutama jika struktur komentar dibuat tanpa tag ol. Coba juga akses daftar komentar blog dengan mematikan CSS (ada pilihannya di ekstensi 'Web Developer' Firefox). Kesan kurang logis akan 'terdengar'.

Untuk judul, subjudul, anak subjudul, tidak perlu diakhiri dengan tanda baca titik. Dulu memang dianjurkan memakainya karena keterbatasan pembaca layar komputer saat itu. Dan seringnya cara penulisan subjudul yang tidak semantik. Tanpa pemakaian elemen 'heading' yang tepat.

Penulisan markah berikut
<h2>8 Useful Responses to 'Mengomentari Konten Blog'</h2>
dibaca Fangs:
Heading level two eight Useful Responses to 'Mengomentari Konten Blog'.
Struktur/tingkat yang semantik ini akan hilang jika hanya memakai teks spesial strong atau em untuk menyatakan subjudul.

Belakangan saya mematikan tampilan konversi ikon 'smiley' di blog tidak penting ini. Risikonya, pembaca layar komputer tidak mampu membacanya dengan baik. Kalimat di bawah

Menurut saya sih, pengomentar sebaiknya mengomentari hanya terbatas pada kemampuannya atau kalau perlu bertanya saja. :D

akan terbaca oleh Fangs:

Menurut saya sih, pengomentar sebaiknya mengomentari hanya terbatas pada kemampuannya atau kalau perlu bertanya saja. colon D

Jika memakai gambar/ikon, teks alternatif (atribut alt) yang terbaca. Mengenai logis tidaknya pemakaian atribut alt, silakan telusuri di Logical Use of Text Alternative (Dani Iswara .com).

Lanjut ke pemakaian singkatan. Baris di bawah

Kalau saya bukan paling gatal, tetapi paling malas membaca artikel tentang SEO biasanya sudah basi soalnya.

akan terbaca oleh Fangs serupa seperti di atas. Dalam hal ini, Fangs tidak bisa menangkap kondisi sebenarnya. Pengguna pembaca layar komputer mungkin akan mendengar SEO ('Search Engine Optimization') sebagai suatu kata biasa: 'seo', atau terdengar menyerupai kata 'sea' (laut). Bayangkan jika singkatan itu berupa mk (maka), yg (yang), bkn (bukan; bikin), dll (dan lain-lain), dsb (dan sebagainya).

Kecuali misalnya algoritma mesin pembaca layar komputer bisa disetel untuk memahami singkatan tertentu yang baku. Atau mampu mengidentifikasi teks yang dicetak dengan huruf kapital semua sebagai suatu singkatan. Dan mengejanya tiap huruf, bukan sebagai kata. Masalahnya kemudian, teks kapital masih banyak dipakai sebagai tingkatan judul. Pun kadang dipakai di dalam konten untuk konteks pesan yang ingin ditekankan–seolah berTERIAK. Pemakaian tag abbr dan atribut title pun masih sering didiskusikan. Baca kembali Tag abbr Mudah Diakses (Dani Iswara .com).

Berikutnya, pemakaian tanda baca titik masih sering diremehkan. Bayangkan komentar tanpa tanda titik di akhir, tanpa penomoran (misal sering karena memakai sistem komentar bertingkat/'threaded comment'). Contoh di bawah telah saya hilangkan tanda titiknya.

PF,
ya model bertanya. Itu juga bisa. Saya sunting di atas. Terima kasih, Pak Aldy

Cahya,
walau sisi personal, kan bisa balas mengungkapkan sisi personal pengomentar juga?

Menjadi terbaca oleh Fangs:

PF, ya model bertanya. Itu juga bisa. Saya sunting di atas. Terima kasih, Pak Aldy Cahya, walau sisi personal, kan bisa balas mengungkapkan sisi personal pengomentar juga?

Visualnya terlihat aman-aman saja. 'Usable' belum tentu aksesibel.

Simpulan

Elemen semantik (X)HTML bukan hanya membantu desainer dan pengembang, tapi juga pengguna pembaca layar komputer. Pemakaian elemen semantik yang baik, singkatan yang jelas dan deskriptif, tanda baca yang tepat, akan membentuk konten yang lebih logis lagi bagi semua pengguna.

Mengenai struktur menulis, tata bahasa, singkatan, dan tanda baca, mungkin ini saat yang tepat untuk mengingat guru bahasa Indonesia kita. :)

Dani Iswara, [myfirstnamelastname]@gmail.com.

unEssential.

12 comments to "Logisnya Konten via Emulator Screen Reader"

  1. Cahya

    Tunggu dulu, ada bagian dari tulisan ini yang tidak mendukung kaum minoritas. Semua tahu Fx adalah peramban dengan pengguna terbanyak, bagaimana dengan peramban lain?
    Atau ada emolator yang lainnya tanpa perlu menggunakan Fx?

  2. dani

    Cahya,
    sial, kritisnya kadang keterlaluan! Tapi bagus kok. :)

    Entah jika ada emulator 'screen reader' untuk peramban Web lainnya. Ada juga semacam peranti 'text-to-speech' versi daring (dalam jaringan/'online'). Di peramban Web 'mobile' ada juga khusus perantinya.

    Di dokumen screen reader – Wikipedia disebutkan ada peranti Browse Aloud dan Spoken Web (berbasis Windows) yang bisa dicoba. Belakangan muncul WebAnywhere (wa.cs.washington.edu). :)

  3. iskandaria

    Untuk google chrome ada nggak ya ekstensinya (silakan googling sebelum tanya)..hehe. Belakangan ini saya lebih suka menggunakan peramban chrome soalnya.

    Soal semantik, inilah yang masih banyak diabaikan narablog. Padahal kalau alasannya awam soal coding, kan bisa gunakan saja teks editor di dashboard. Tinggal blok teks/paragraf, lalu pilih/klik salah satu elemen semantik yang ingin digunakan sesuai rekomendasi.

  4. dani

    iskandaria,
    untuk fitur-fitur aksesibilitas peramban Web Google Chrome, coba ekstensi aksesibilitas Chrome (chrome.google.com).

  5. ardianzzzz

    Ini adalah tantangan yang paling menyenangkan saat membuat desain web dan mengembangkannya.
    Paling bikin pusing juga tentunya.. (smile)
    mungkinkah smiley harus ditulis seperti itu?

  6. dani

    ardianzzz,
    mungkin itu tantangan yang paling menyenangkan buat Mas Ardian yang memang bercita-cita juga ingin menjadi pengembang dan desainer Web. Tapi mungkin juga kurang menyenangkan bagi yang tidak tertarik dengan 'user experience'.

    Untuk 'smiley', saya juga berpikiran serupa. Senyum ah.

  7. ardianzzzz

    Haha, saya mengangap sebuah hal yang lucu ketika seorang developer atau narablog tidak peduli pada user experience—apapun bentuknya (antar muka, aksesibilitas, usabilitas). Seolah-olah mereka membuat desain tersebut hanya untuk dirinya sendiri.

    Mungkin hal tersebut masih sah saja jika diterapkan pada blog pribadi tetapi saya rasa tidak untuk sebuah web portal yang mengakomodir orang banyak. Ah, jadi teringat detik.com saya tidak pernah berfikiran untuk mengunjunginya haha..

  8. agung

    Ah, saya akan mulai mengingat dan mencoba menerapkan apa yang sudah diterangkan/diberikan dahulu oleh bapak/ibu guru bahasa indonesia saya, yaitu menulis dengan benar, penggunaan tanda baca yang tepat. Ternyata tanda baca itu sangat berpengaruh ya [hem..manggut-manggut]

  9. dani

    ardianzzz,
    bagaimana jika pengguna sebenarnya tidak lagi peduli dengan desain dan fungsi antarmuka. Yang penting konten! Entah di mana The King, di mana The Queen…

    agung,
    walau penulisan bahasa media cetak tidak selalu sama dengan media daring (misal pranala yang bisa diklik), dasarnya tetap dari bapak/ibu guru. Susah kalau habis komentar tidak pakai senyum-senyum.

  10. Emoticons in Accessibility Perspective – Unessential Weblog

    […] to my post titled (in bahasa Indonesia) Logisnya Konten via Emulator Screen Reader, please use the correct punctuation in the content. Example: “I love your smile […]

  11. Understanding Blind Users – Unessential Weblog

    […] point is a logical content. Based on semantic structure. I have posted logical content evaluation via Fangs in this unessential blog previously. 4. Put Your Blogroll on the Right-Hand […]

  12. Bagaimana Screen Reader Membaca Konten Web - Unessential Weblog

    […] banyak, ada kemiripan saat mencoba ekstensi Fangs di tulisan Logisnya Konten via Emulator Screen Reader (Dani Iswara .com). Do not share on: Del.icio.us, Digg, […]

Leave comment


All XHTML markups will be held for moderation. Keep on topic, please.