Categories
Web Accessibility Web Usability

Tipografi untuk Aksesibilitas Web Visual

Diperbarui: Kamis, 12 Agustus 2010
Bagi di FB | Cuitkan

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.

9 replies on “Tipografi untuk Aksesibilitas Web Visual”

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

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

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

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

This site uses Akismet to reduce spam. Learn how your comment data is processed.