Tipografi untuk Aksesibilitas Web Visual

Noted: Sunday, August 8, 2010 at 19:00:02. Words count: 442.
Last updated: Thursday, August 12, 2010 at 01:22:46.

Menurut Joe Dolson melalui tulisannya di situs accessites.org, Improving Accessibility through Typography, aksesibilitas konten Web (teks) dapat disederhanakan menjadi tiga pertanyaan:

  • How big is that font?
  • Is this font readable?
  • Is this enough contrast?

Interpretasi berikut menurut pengertian saya.

Ukuran fonta

Jika fonta/set huruf (apa "baku"nya yang diterima saat ini?) sudah cukup besar, maka tidak perlu lagi "widget" untuk memperbesar ukurannya. Pengguna juga tidak perlu menekan tombol ctrl++ sekian kali demi meningkatkan kemudahan baca.

Pemakaian fonta dengan ukuran relatif (misal %) via CSS sangat dianjurkan. Apalagi jika didukung satuan em untuk line-height. Sehingga jarak antarbaris akan menyesuaikan dengan besar fonta jika diperbesar (zoom/zum). Jika perlu, penggunaan CSS letter-spacing juga bisa membantu keterbacaan. Beberapa karakter fonta yang dirasa terlalu rapat bisa diatur via properti CSS tersebut. Masih banyak lagi pengaturan terkait fonta ini via CSS. Mulai dari jenis fonta, peruntukannya di judul-subjudul-konten-bilah sisi-catatan kaki, hingga membuatnya menonjol di antara yang lain.

Keterbacaan

Panduan Aksesibilitas Konten Web (WCAG) 2.0 sudah menganjurkan teknik tersendiri. Bukan hanya berdasarkan penilaian visual, tapi juga ramah bagi pengguna pembaca layar komputer/screen reader. Pernah saya tulis di Understanding Readability based on WCAG 2.0 (Dani Iswara.com). Daftar panjang itu sesuai dengan teknik yang dianjurkan di panduan 3.1, antara lain (disertai interpretasi saya):

  • Pengaturan fonta bisa diatur sesuai kontrol pengguna.
  • Pakai tag meta bahasa & penanda istilah asing yang sesuai.
  • Pakai bahasa yang paling mudah & sederhana sesuai pengguna yang ditarget.
  • Hindari teks rata tengah. Kecuali karya sastra seperti puisi, pantun, sajak.
  • Hindari teks rata kanan-kiri/fully justified.
  • Gunakan teks rata tepi kiri untuk konten yang dibaca dari kiri ke kanan, dan sebaliknya untuk teks rata tepi kanan.
  • Batasi lebar kolom teks. Umumnya selebar sudut pandang normal mata manusia saat membaca. Bagi saya, konten teks selebar sudut mata kanan-kiri, paling nyaman dibaca.
  • Hindari pemakaian blok teks tercetak miring. Seperti pada kutipan panjang yang fontanya tercetak miring semua.
  • Tautan mudah dikenali. Tidak mengecoh pengguna!
  • Gunakan gambar, ilustrasi, video, audio, atau simbol untuk memperjelas makna.
  • Sediakan contoh untuk memperjelas penyajian.
  • Gunakan latar pastel dibanding teks hitam di atas latar putih.
  • Dan seterusnya…

Kontras warna

Maksud hati ingin menonjolkan teks pada konten utama. Bukan berarti kontras warna teks selain konten utama dibuat menjadi sulit terbaca. Terutama bagi pengguna dengan disabilitas kontras warna, layar monitor lawas dalam ruangan dengan penerangan yang kurang, atau layar kecil yang tampak kurang kontras di bawah terik matahari.

Hal ini sempat saya singgung di tulisan Inaccessibility of Visually Usable Website (Dani Iswara .com). Beberapa tema/theme WordPress yang dinyatakan usable, tampak sederhana di sisi desain, telah mengabaikan hal kontras ini. Pun situs Web & blog para pakar/konsultan Web usability. Alasan mereka adalah demi menonjolkan konten utama. Pertimbangan ini tentu hanya melihat dari sisi kemampuan visual pengguna normal. Yang mungkin memang sesuai dengan pengguna tertarget.

Dani Iswara, [myfirstnamelastname]@gmail.com.

unEssential.

9 comments to "Tipografi untuk Aksesibilitas Web Visual"

  1. ArdianZzZ

    Pada browser canggih macam chrome seri 5 pembesaran/zooming tidak berpengaruh pada konsistensi layout. Paragraf tetap baik meskipun menggunakan satuan pixel. Inkonsistensi terjadi ketika ukuran font default diubah — jika ukuran menggunakan em

  2. dani

    Ardianzzz,
    Yang zoom, apa itu karena fitur semacam zoom text only?
    Lainnya, saya belum coba.

  3. ArdianZzZ

    Yang saya coba zoom dengan Ctrl+/- di Chrome & Fx seri terbaru pada Win XP.

  4. dani

    Ardianzzz,
    Pembesaran yang direkomendasikan W3C biasanya sampai 200%. Kecuali WebKit (seperti Midori) dan Presto (Opera), peramban Web lain sepertinya memakai ukuran 16px sebagai standar.

  5. Cahya

    Akhirnya menggunakan kata ‘fonta’ juga ya? :).

  6. dani

    Cahya,
    Mengenai pemakaian kata fonta, mengikuti konsensus/konvensi tidak tertulis sajalah.

  7. Cahya

    He he…, konsesus dari mana Bli?

  8. dani

    Cahya,
    'Konsensus' penyeragaman terjemahan/pelokalan Indonesia di beberapa distro lokal Linux. Entah jika ada perubahan lagi. Istilah lain bisa dilihat di usulan Senarai Padanan Istilah oleh Pak Ikhlasul Amal (direktif.web.id).

  9. iskandaria

    Jenis font Calibri sepertinya agak rapat dan perlu direnggangkan sedikit melalui penggunaan letter-spacing via CSS. Terutama jika ingin digunakan pada bagian body.

Leave comment


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