Penulisan Elemen ABBR yang Aksesibel

Noted: Monday, April 12, 2010 at 06:59:19. Words count: 632.
Last updated: Sunday, November 12, 2017 at 21:45:08.

Tag abbr atau abbreviation merupakan salah satu elemen X/HTML yang digunakan untuk menjelaskan suatu singkatan kata di konten Web.

Contoh:

<abbr lang="en" title="World Wide Web">WWW</abbr>
<abbr lang="id" title="Republik Indonesia">RI</abbr>
<abbr xml:lang="fr" title="Centre d'information et d'orientation">CIO</abbr>
<abbr title="Abbreviation">abbr.</abbr>
<abbr title="Association">assoc.</abbr>

Pemakaian tag ‘abbr’ dan ‘acronym’ kadang membingungkan. Ada beberapa pertimbangan pemakaian elemen ‘abbr’ agar menjadi relatif mudah diakses.

‘Abbr’ dan akronim yang membingungkan

Beberapa pengguna mengucapkan suatu singkatan dengan mengejanya per huruf, sebagai ‘abbreviation’, ‘initialism’, ‘contraction’ atau ‘truncation’. Yang lain mengucapkannya dengan satu kata biasa, sebagai ‘acronym’. Misalnya kata:

  • SARS untuk sindroma pernapasan akut yang parah atau ‘Severe Acute Respiratory Syndrome’. Singkatan ini kadang diucapkan sebagai satu kata.
  • HTML.
  • Puskesmas.

Belum lagi masalah tata bahasa dan budaya di tiap daerah dan negara yang memengaruhi.

Masalah lain pemakaian singkatan

Dengan bantuan CSS ‘aural’, fungsi ‘abbr’ bisa diperjelas. Misalnya:

@media aural { 
acronym, abbr.truncation { speak : normal }
abbr.initialism { speak : spell-out } 
}

Tapi, tipe CSS di atas tidak dikembangkan lagi oleh W3C.
Tampilan kursor saat ‘hover’ bisa diperoleh dengan CSS berikut:

abbr:hover { cursor : help }

Saat ini, penulisan ‘abbr’ dianggap lebih semantik dibanding acronym. Lihat contoh yang baik dari Panduan Standar Web dan Semantik versi 1.6 milik BBC (situs ‘broadcasting’). Tag ‘acronym’ juga tidak dipakai lagi di HTML5 yang sempat saya coba.

Tapi, peramban lawas seperti Internet Explorer versi 5 dan 6 hanya mampu membaca tag ‘acronym’, tidak untuk ‘abbr’. Kecuali memakai skrip ‘hacks’ tertentu. Pilihannya:

  1. menyajikan ‘acronym’ yang lebih dimengerti oleh semua peramban Web, tapi tidak semantik. Dianggap usang/’deprecated’ di standar X/HTML ke depan.
  2. konsisten dengan ‘abbr’. Semantik, tapi tidak sepenuhnya aksesibel untuk peramban lawas.
  3. memakai ‘abbr’ dengan tambahan perlakuan atau skrip khusus.
  4. tidak memakai ‘abbr’, tapi langsung menuliskan kepanjangan suatu singkatan apa adanya.
  5. menuliskan ‘abbr’ dan kepanjangannya sekaligus. Berisiko terjadi duplikasi.

Aksesibilitas abbr

Mas Adi – Rismaka menyatakan tentang penulisan elemen <abbr> yang terasa tidak aksesibel di peramban ‘mobile’. Komentarnya ada di tulisan Tinjauan Aksesibilitas Web tanpa CSS.

Mengenai atribut title pada ‘abbr’, menurut saya kurang aksesibel jika diakses dengan perangkat mobile seperti operamini. Saya kebetulan pernah mengikuti diskusi di blog ini dan mas cahya, dan pernah disodorkan singkatan. Saya pikir itu apa (karena ga ada keterangannya), setelah saya buka melalui peramban baru kelihatan kalau itu abbr bertitle

Masalahnya, jika suatu singkatan tidak disertai elemen–dalam hal ini tag–‘abbr’, pengguna sejenis pembaca teks layar komputer/’screen reader’ berbahasa Inggris akan kesulitan memahami konten. Bayangkan jika singkatan di bawah tidak diberi penjelasan:

  • ‘KISS’ untuk ‘keep it simple stupid’ (prinsip kesederhanaan di kebanyakan distribusi Linux) akan terdengar seperti pada ‘kiss…me’.
  • ‘BRA’ untuk ‘Bendara Raden Ajeng’ akan terdengar seperti ‘bra’ untuk penyangga payudara.
  • ‘TEN’ untuk ‘Toxic Epidermal Necrolysis’ (suatu penyakit kulit darurat yang dipicu oleh obat) akan terdengar seperti ‘ten’ yang menyatakan bilangan sepuluh. Atau mungkin terdengar sebagai ‘then’.

Beberapa pembaca teks layar komputer mungkin bisa mengeja atau mengenali jika singkatan berupa huruf kapital, akan dieja per huruf. Bukan dibaca sebagai satu kata.
Mengenai pemakaian titik di tiap huruf, penulisan singkatan di judul tulisan, dan penulisan gelar, sesuaikan dengan ejaan bahasa Indonesia yang dianjurkan.

Solusi

Menurut saya, prinsip pemakaian tag abbr atau singkatan kata:

  1. ingat bahwa belum tentu semua pengguna memahami singkatan yang kita pakai.
  2. setidaknya sebutkan/jelaskan singkatan di tiap awal pemunculannya pertama kali. Beri rujukan jika perlu.
  3. atribut ‘title’ tidak sepenuhnya mudah diakses.
  4. tag ‘abbr’ lebih semantik dibanding ‘acronym’.
  5. usahakan pemakaian ‘abbr’ dan teks biasa yang menjelaskan singkatan tidak duplikasi.
  6. jika memungkinkan, tulis saja kepanjangannya tanpa harus menyingkatnya.
  7. jika suatu singkatan akan sering diulang pemakaiannya, saat pertama kali muncul, sebutkan kepanjangannya, diikuti singkatannya beserta tag ‘abbr’ dan atribut ‘title’. Hindari pengulangan yang tidak perlu.

Misalnya:

  • Bahasa/kode/’markup’ penulisan simbol matematika (<abbr lang=”en” title=”Mathematical Markup Language”>MathML</abbr>)…Lihat kembali Menulis Matematika di Weblog WordPress dengan MathML.
  • Penyajian gambar vektor berbasis teks (<abbr lang=”en” title=”Scalable Vector Graphics”>SVG</abbr>) relatif lebih mudah diakses walau tampilan gambar dinonaktifkan. Baca kembali Mencoba SVG di peramban Firefox.
  • …rakyat muda yang berkarya atau Praja Muda Karana, disingkat Pramuka. Biasanya cukup dikenal lewat slogan “yang muda yang berkarya”.
Dani Iswara, [myfirstnamelastname]@gmail.com.

10 comments to "Penulisan Elemen ABBR yang Aksesibel"

  1. Cahya

    Lalu apa truncation dan initailism itu nanti harus ditulis dalam class?

    Kalau atribut lang apa digunakan jika bahasa blog dalam berkas html.php?

  2. Cahya

    Maksudnya jika bahasa singkatan berbeda dengan setelan bahasa blog (untuk poin lang)

  3. dani

    Cahya,
    untuk yang class, ya, jika dibutuhkan.

    Untuk elemen ‘lang’, teorinya sih gitu, kan dialek bahasa berbeda-beda. Masalahnya, sudahkah ada rekaman suara/’voice’ berbahasa Indonesia yang ditanam di perangkat sejenis pembaca layar, sehingga pengucapan/lafalnya menjadi lebih mudah dimengerti? :)

  4. aldy

    Bli Dani,
    Maaf kalau agak sedikit menyimpang, saya sering menemukan penggunaan abbr dan acronym campur aduk. Ada pendapat mengenai ini ?

  5. dani

    aldy,
    saya juga dulu masih sering campur aduk Pak Aldy. Bahwa abbr dan acronym itu memang beda dari sisi tatabahasa. Apalagi doctype tertentu memang masih memungkinkan untuk pemakaian acronym. cmiiw

  6. Cahya

    Tanya… tanya…, panduan lengkap CSS abbr ada di mana, kok di blog saya cuma ada…

    a:hover { (dst)

    apa itu kode untuk abbr?

  7. Tipografi CSS Pada Elemen ABBR – Bhyllabus

    […] bukanlah peng­guna yang baik sehingga bisa melakukan “Penulisan Elemen ABBR yang Aksesibel” seba­gaimana ditulis oleh Dani Iswara. Tapi rasanya tanpa style sheet yang tepat rasanya, tidak […]

  8. dani

    Cahya,
    google masih hidup kan? :P

  9. Logisnya Konten via Emulator Screen Reader – Unessential Weblog

    […] berTERIAK. Pemakaian tag abbr dan atribut title pun masih sering didiskusikan. Baca kembali Tag abbr Mudah Diakses (Dani Iswara […]

  10. Unusable and inaccessible pure XML documents - Unessential Side - Tidak Penting

    […] Penulisan Elemen abbr yang Aksesibel. […]

Leave comment


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