Aksesibilitas Web oleh Penulis Konten

Posted: November 12, 2009 at 04:50:24 by Dani Iswara. Words count: 531.
Last updated: June 30, 2010 at 17:59:02.

Aksesibilitas Web ditujukan bagi seluasnya pengguna. Kecuali menargetkan pengguna spesifik. Penulis atau pengisi konten Web berpeluang membantu mewujudkan akses bagi mesin dan manusia. Mesin, bukan hanya mesin telusur Internet (Internet search engines), tapi juga:
  • screen readers,
  • layar kecil,
  • layar sentuh,
  • peramban (browsers),
  • (resolusi/dimensi/ukuran) layar komputer, dan sebagainya.
Pengguna manusia, meliputi mereka yang:
  • Memiliki ketidakmampuan tertentu.
  • Berusia lanjut.
  • Mengakses Internet dengan koneksi lambat.
  • Mengakses Internet dengan menonaktifkan fitur di sisi peramban.
  • Memilih jendela peramban tidak tidak terbentang selayar penuh, dan lain-lain.
Pengelola, pengisi, atau penulis konten Web tidak punya akses ke templat? Tidak mengerti mengedit kode eXtensible HyperText Markup Language (X/HTML)? Tidak masalah. Masih ada cara lain untuk mendukung aksesibilitas Web.

Menggunakan editor teks dengan benar

Antarmuka grafis editor teks berbasis web, seperti pada tiap mesin blog, biasanya sudah menyediakan fitur penting terkait struktur konten:
  • Judul (h1), sub judul (h2), anak sub judul (h3). Urutannya dianjurkan tidak tumpang tindih. h1-h3 sudah cukup untuk tulisan bukan ilmiah.
  • Cetak miring (<em>), tebal (<strong>). Bukan (lagi) untuk mesin telusur Internet. Tapi memudahkan pengunjung/pengguna untuk men-scan atau membaca cepat konten. Didengar sebagai kata atau kalimat dengan intonasi/penekanan tertentu oleh pengguna screen reader/voice browser.
  • Urutan atau daftar (<ul>, <ol>, <li>). Jika ada yang harus dirinci, format daftar tentu memudahkan mencerna konten. Ada blok yang jelas untuk lebih mudah memahami konten.
  • Tautan atau pranala. Kadang ada pilihan untuk menambahkan atribut title. Asal tidak berlebihan.
  • Kuotasi (<blockquote>). Kuotasi bermakna semantik untuk mengutip sebagian konten. Bukan sekadar membuat suatu bagian konten menjorok lebih ke tengah.
  • Berkas multimedia (gambar, video, audio), dan sebagainya. Elemen X/HTML yang disertakan oleh suatu berkas multimedia kadang tidak sesuai dengan standar Web. Berpeluang tidak aksesibel.

Menulis kode seperlunya

Sederhananya, mengacu pada:
  • standar Web,
  • semantik,
  • aksesibilitas,
  • kebergunaan (usability).
Misalnya: menulis teks X/HTML tanpa memakai sisipan elemen Cascading Style Sheets (CSS), seperti align, font, dan color. Walau di DOCTYPE Transitional masih diijinkan.

Menulis konten Web

Selain cara penulisan ala jurnalis, umumnya digunakan teknik menulis berikut:
  • Judul yang jelas. Mencerminkan isi tulisan.
  • Bahasa dan istilah yang sederhana sesuai target pengunjung/pembaca.
  • Kalimat pendek lebih mudah dimengerti.
  • Kalimat aktif lebih mudah dicerna.
  • Teks tautan/pranala yang deskriptif.
  • Memerhatikan etika.
Gaya bahasa kembali pada penulis masing-masing.

Manfaat memerhatikan unsur aksesibilitas Web

Konten bukan hanya mudah ditemukan (searchable) oleh mesin telusur Internet. Tapi juga mudah diakses (accessible) oleh para pengguna dengan pelbagai perangkat dan koneksi Internet. Isi konten juga mudah di-scan untuk menemukan topik atau kata kunci tertentu (findable). Kalimat aktif dan pendek, dalam blok yang jelas, akan memudahkan pengguna membaca konten (readable). Bahasa dan istilah sederhana memudahkan memahami konten (understandable).

Empati

Masih terasa susah memahami sudut pandang sebagai pengguna dengan ketidakmampuan tertentu? Coba akses Web dengan cara di bawah:
  • Tanpa tetikus (mouse). Masihkah atribut title bermanfaat? Apakah tautan/pranala mudah dimengerti?
  • Matikan tampilan gambar di sisi peramban. Apakah gambar masih bermakna? Apakah ada atribut alt? Apakah atribut tersebut sesuai konteks?
  • Kurangi ukuran jendela peramban atau dalam tampilan bukan maximized windows. Efek serupa dengan ctrl++ untuk pembesaran teks konten. Bingung mencari tombol log masuk? Menu samping kanan tertutup? Menggulung horisontal?
  • Matikan panel audio di komputer. Masih bisa memahami informasi yang tersaji?
Bisa juga membaca tulisan Cara difabel mengakses Web di Dani Iswara .Net. Pengguna lanjut usia memiliki ketidakmampuan serupa di atas. Menunggu tua dulu untuk bisa memahami hal-hal di atas? Untuk aksesibilitas Web, pertanyaan umumnya: dengan pelbagai situasi di atas, adakah kehilangan informasi saat mengakses Web? Berkas topik ini, Web Accessibility by Content Authors (pdf; 504KB), ada di arsip Slideshare.net saya. Atau unduh berkas OpenOffice.org Impressnya: Web Accessibility by Content Authors (odp; 85KB). Just unessential weblog
Dani Iswara, mail me: [myfirstnamelastname]@gmail.com.

Posted in category: Web Usability
Tags: , ,
25 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: Aksesibilitas Web oleh Penulis Konten by Dani Iswara.

Unimportant Related/Random Posts

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

25 Responses to post titled: Aksesibilitas Web oleh Penulis Konten

  1. Comment by Cahya on December 13, 2009 at 16:12:01
    using Firefox 3.5.5 on Windows Vista

    Pertama ... pertama... :D

    Mau tanya, kenapa lebih memilih emphasize daripada italic? Kan lebih panjang jadinya...

  2. Comment by Dani Iswara on December 13, 2009 at 20:34:46
    using Firefox 3.5.5 on SuSE

    Cahya,
    sebenarnya ini pertanyaan cerdas. Ada jawaban seriusnya. Sedikit saya koreksi, maksudnya em dibanding i (italic) dan strong dibanding b (bold) ya?

    Di sisi lain, beberapa elemen semantik memang kadang membuat kode X/HTML tidak lebih irit dalam ukuran berkas. Contoh lain, pemakaian span class="[atribut di sini]" pada teks berwarna merah yang bermakna semantik. Atribut span dapat berupa/berarti: warning, required, false, dan sebagainya.

    Terlepas dari jumlah karakter yang lebih banyak, elemen emphasis (emphasis dan strong emphasis) dianjurkan untuk semantik yang lebih baik.

    Tapi di dunia nyata saat ini, Screen readers lack emphasis (Steve Faulkner dari Paciello Group, 2008). Dua screen readers terkenal seperti Window Eyes 5.5 dan JAWS 8.0 belum mampu mengenali elemen semantik tersebut.

    Best practice tetap menyarankan pemakaian strong dan em. Silakan baca Rethinking italics and bold (Jared Smith-WAVE,2008).

  3. Comment by Cahya on December 14, 2009 at 09:00:11
    using Firefox 3.5.5 on Windows Vista

    Saya menemukan WLW bekerja berdasarkan editing theme yang digunakan. Saat kita ingin memiringkan huruf menggunakan click button, tema tertentu akan memberikan i, sedangkan yang lain akan otomatis memberikan em, padahal tombol yang diklik sama.

    Apakah ini berarti tema membawa sistem editing (atau mungkin istilah Bli dengan semantik) tersendiri untuk masing-masing tema yang berbeda?

  4. Comment by Dani Iswara on December 14, 2009 at 09:29:24
    using Firefox 3.5.5 on SuSE

    Cahya,
    apa mungkin ada plugin terintegrasi terkait editor teks yang ditanam di tema? Dimana plugin tersebut memasukkan unsur semantik di atas?

  5. Comment by Cahya on December 14, 2009 at 10:22:54
    using Firefox 3.5.5 on Windows Vista

    Kalau tidak salah ada di bagian xmlrpc.php di mesin wodpress | Tapi saya masih tidak yakin kalau ada tema yang memuat itu, memang mencarinya di bagian mana ya? :D

  6. Comment by Dani Iswara on December 14, 2009 at 11:22:43
    using Firefox 3.5.5 on SuSE

    Cahya,
    kalo ngga ada di daftar plugin, mungkin tertanam di salah satu fungsi php-nya. Entah yang mana. Teman-teman para pembuat tema pasti tahu. :)

  7. Comment by Cahya on December 14, 2009 at 12:12:25
    using Firefox 3.5.5 on Windows Vista

    Lha, kan Bli Dani juga ahli desain web ;)

  8. Comment by Dani Iswara on December 14, 2009 at 14:02:50
    using IceWeasel 3.5.5 on Debian GNU/Linux

    Cahya,
    ahli dari hongkong? :P

  9. Comment by Cahya on December 14, 2009 at 20:09:50
    using Firefox 3.5.5 on Windows Vista

    Padi makin berisi makin merunduk :D

  10. Comment by ganda on December 17, 2009 at 09:24:37
    using Google Chrome Frame 4.0 on Windows XP

    bagaimana dengan search engine? apakah sudah mengenali atribut semantik tersebut?

  11. Comment by ganda on December 17, 2009 at 09:32:06
    using Google Chrome Frame 4.0 on Windows XP

    Terkait untuk h1, h2 dan h3, beberapa hari lalu saya membaca komentar mas Dani di http://fanari-id.com/tutorial/trik-membuat-level-heading-blog-wordpress-lebih-seo-friendly/, Apabila kita tidak menggunakan h2 pada konten tulisan, makan strukturnya akan menjadi h1 - h3. Ada solusi?

  12. Comment by Dani Iswara on December 17, 2009 at 10:09:04
    using Firefox 3.5.5 on SuSE

    ganda,
    entahlah dengan mesin telusur Internet. Apakah kata spesial tersebut memang bermakna atau tidak (lagi?). Hanya Google yang tahu. Atau ada yang tahu percobaan empiris terkait hal itu?

  13. Comment by ganda on December 17, 2009 at 10:15:34
    using Google Chrome Frame 4.0 on Windows XP

    saya juga belum tahu bang. Belum pernah melakukan penelitian sejauh ini terkait atribut semantik tersebut. Tapi web accessibility gurus menganjurkannya.

  14. Comment by Dani Iswara on December 17, 2009 at 10:18:18
    using Firefox 3.5.5 on SuSE

    ganda,
    ada banyak pendapat yang terbuka untuk didebat:

    • h1 untuk judul blog dan judul posting diijinkan.
    • Saat h1 sebagai judul posting. Jika dalam konten posting tidak selalu ada h2, maka mis. related post, comment title, dan sidebar menu akan sebagai h2. Tinggal menyesuaikan redaksional h2 dengan SEO, jika perlu. Tidak harus ada h3 kan? :)

  15. Comment by ganda on December 17, 2009 at 10:25:35
    using Google Chrome Frame 4.0 on Windows XP

    maksudnya, sebaiknya title related post di buat menjadi h2?

  16. Comment by Dani Iswara on December 17, 2009 at 10:34:34
    using Firefox 3.5.5 on SuSE

    ganda,
    daripada dipaksakan h3? atau related post tanpa heading khusus. :)

  17. Comment by ganda on December 17, 2009 at 10:41:38
    using Google Chrome Frame 4.0 on Windows XP

    Agreed.

  18. Comment by aldy on December 22, 2009 at 15:43:48
    using Firefox 3.5.2 on Windows 7

    Salam,
    Mas Dhani dan Ganda, terkait dengan struktur h1,h2,h3 dst, saya terkadang bingung sendiri ( maklum belajar otodidak ), dan salah satu cara saya melihat struktur tersebut dengan membongkar template gratis.
    Saya sering menemukan judul blog dengan h1, tetapi pada judul postingan/artikel juga menggunakan h1.
    Yang umum saya temukan :
    <?php the_title(); ?>, versi saya jika begini tata urutannya menjadi tidak semantik.
    Mohon sharingnya mas.

  19. Comment by Dani Iswara on December 22, 2009 at 16:55:29
    using Firefox 3.5.6 on SuSE

    aldy,
    pada jawaban saya ke Mas Ganda di atas, jika bertitik berat ke unsur semantik, hal tersebut masih banyak didebat.

    Idealnya, di 'single post/page', judul 'post/page' sebagai h1.

    Silakan baca juga (di Dani Iswara .Net):

    Untuk melihat struktur dokumen bisa juga dengan bantuan pengaya fx, web developer, menu 'Information' › 'View Document Outline'. :)

  20. Comment by ganda on December 23, 2009 at 09:21:35
    using Google Chrome Frame 4.0 on Windows XP

    tapi di halaman depan, bukankah sebaiknya isi postingan tidak mengandung h2 lagi? Sehingga strukturnya menjadi lebih baik, seperti h1->title blog, h2->judul tulisan, h3->heading yang di perlukan dalam isi tulisan. Bukankah lebih baik menggunakan h3 dibandingkan dengan h2 pada halaman depan untuk content posting?

  21. Comment by Dani Iswara on December 23, 2009 at 09:58:43
    using Firefox 3.5.6 on SuSE

    ganda,
    menurut saya, di situlah 'tricky'-nya. Dengan struktur demikian, hindari menampilkan h2 dan h3 di bodi konten jika berupa 'excerpt'. Tampilkan h2 dan h3 di bodi konten saat 'posting' tampil penuh di 'single post'. :)

    Selain itu, ya sebaiknya tetap konsisten dengan h1 judul blog, h2 judul 'posting', h3 sub judul, h4 anak sub judul, dan seterusnya.

  22. Comment by ganda on December 23, 2009 at 10:56:30
    using Google Chrome Frame 4.0 on Windows XP

    Saya kira juga sebaiknya demikian dok. Dulu sempat terpikir bagaimana semuanya bisa di buat otomatis, seperti jika isi tulisan mengandung h3, maka pada halaman home, tetap tampil sebagai h3, sementara pada full post, berubah menjadi h2. hihihi... Yah, yang paling mudah sih ya pakai excerpt. atau keukeh seperti yang bang Dani bilang, h1 untuk judul blog, h2 untuk judul tulisan. sisanya ngikut.. :D

Trackbacks/Pingbacks

  1. Pingback by Hendaya Kognitif Mengakses Web - Dani Iswara .Net on December 16, 2009 at 20:18:17
    WordPress abc

    [...] Tidak paham mengedit kode ‘Extensible Hyper-Text Markup’ (X/HTML)? Lihat kembali Aksesibilitas Web oleh Penulis Konten di Dani Iswara [...]

  2. Pingback by Website Accessibility Mindset - Unessential Weblog on May 4, 2010 at 18:01:47
    WordPress abc

    [...] do something, even as a usual content writer, with no access or ability to Web design template. See Web Accessibility by Content Author in bahasa Indonesia (Dani Iswara [...]

  3. Pingback by Aksesibilitas Blog Tidak Harus Kaku - Unessential Weblog on June 12, 2010 at 03:11:11
    WordPress abc

    [...] pun pengguna Web bisa mewujudkannya. Tiap pembuat konten terlibat di dalamnya. Apa saja caranya? Penulis konten pun bisa melakukan perannya (Dani Iswara .Net). Tanpa harus memiliki akses ke kode [...]

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: Belajar SEO masih Menantang karena Rahasia Google
‹‹ Newer entries: Web Blog Navigation Menu