Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Accessibility

Merancang Konten yang Dapat Diakses: Tipografi, Styling Huruf, dan Struktur

by
Read Time:9 minsLanguages:

Indonesian (Bahasa Indonesia) translation by surya adi saputra (you can also view the original English article)

Membuat dan mendesain konten yang dapat diakses lebih dari sekadar memilih tipografi yang dapat diakses. Bahkan dengan keluarga font 'sempurna' yang ada di situs web Anda, orang-orang dengan keterbatasan penglihatan, kognitif, bahasa, dan pembelajaran mungkin masih kesulitan untuk memproses teks.

Mari kita lihat semua langkah dan pertimbangan desain yang perlu Anda perhitungkan saat membuat konten Anda lebih mudah diakses.

A11y Dari Awal

Tutorial ini adalah bagian dari Aksesibilitas Web: Panduan Belajar Lengkap, tempat kami telah mengumpulkan serangkaian tutorial, artikel, kursus, dan ebook, untuk membantu Anda memahami aksesibilitas web dari awal.

1. Pertimbangkan Tipografi Anda

Ini bisa sedikit berlebihan ketika Anda memikirkan semua elemen yang harus Anda pertimbangkan ketika memilih jenis huruf yang dapat diakses – serif vs sans-serif, variasi font, ukuran font, kerning, pelacakan ... untuk menyebutkan beberapa saja — tetapi jika Anda mengikuti pedoman di bawah ini Anda akan mengambil langkah pertama dalam membuat tipografi situs web Anda lebih mudah diakses.

Temukan Common Ground

Lebih sedikit adalah lebih banyak dalam hal tipografi yang dapat diakses. Cara termudah untuk membuat tipografi Anda dapat diakses adalah dengan memilih font umum dan membatasi jumlah font di situs web Anda. Ini sangat penting untuk salinan tubuh utama Anda. Studi menunjukkan font umum paling sering menang ketika kecepatan membaca dan preferensi pengguna font yang berbeda dibandingkan.

Common font families used for accessibilityCommon font families used for accessibilityCommon font families used for accessibility
Keluarga font umum digunakan untuk aksesibilitas

Font umum meliputi:

  • sans-serif font families: Arial, Calibri, Century Gothic, Helvetica, Tahoma, dan Verdana
  • serif font families: Times New Roman dan Georgia
  • slab serif font families: Arvo, Museo Slab, dan Rockwell

Bukan karena font-font ini secara inheren dapat diakses, tetapi sebagian besar pengguna yang mengalami kesulitan dengan pilihan tipografi telah melihat font-font ini dan mempelajari cara bekerja dengannya (atau sekitarnya).

Keterbacaan Serif vs Sans Serif

Penelitian ini tidak konklusif tentang apakah tipografi serif atau sans serif lebih mudah dibaca. Jadi pilihan ini sepenuhnya menjadi milik Anda selama Anda memilih font umum atau keluarga font yang memiliki karakter kuat dan unik.

Readability of fonts showing difference between Gill Sans and PT MonoReadability of fonts showing difference between Gill Sans and PT MonoReadability of fonts showing difference between Gill Sans and PT Mono
Keterbacaan: perbedaan antara Gill Sans dan PT Mono

Untuk orang dengan gangguan penglihatan atau disleksia, huruf atau kombinasi huruf tertentu dapat membingungkan, jadi penting bahwa bentuk huruf didefinisikan dengan jelas dan unik. kesalahan umum adalah 'I' (ex. India), 'l' (ex. Lettuce) dan '1' (mis. Satu). Demikian juga, karakter seperti 'b' dan 'd' dan 'q' dan 'p' kadang-kadang dapat dicerminkan (baik kiri-kanan atau atas-bawah) sehingga kata-kata seperti 'piqued' dapat dibalik menjadi kata yang tidak masuk akal seperti 'qipueb ”Atau terkadang menjadi kata nyata yang sepenuhnya akan mengubah makna konten.

Ada beberapa karakteristik yang dapat membantu keterbacaan. Jadi ketika Anda mencari keluarga font berikutnya, perhatikan hal-hal berikut dan Anda akan segera memilih font yang dapat diakses:

  • Ascenders yang menonjol (mis. Garis vertikal dalam d).
  • Keturunan yang menonjol (mis. Garis ke bawah di y)
  • Kombinasi d / b atau p / q yang bukan merupakan bayangan cermin satu sama lain.
  • Huruf I, huruf kecil l, dan 1 semuanya harus memiliki karakteristik yang berbeda satu sama lain.
  • Hindari font yang memiliki spasi huruf ketat; ini akan sulit bagi beberapa pengguna untuk membaca.
  • Kerning juga penting, khususnya antara r dan n. Kalau tidak, kata-kata seperti 'gudang' dapat dibaca sebagai 'bam' atau 'modern' dapat berubah menjadi 'modem'.

Hindari Font Tampilan Khusus

Selain memilih keluarga font umum dan memperhatikan keunikan karakter, pastikan Anda menghindari menggunakan font mewah dan tulisan tangan dan / atau font yang hanya memiliki satu case karakter tersedia (mis. Hanya huruf besar) Font khusus dengan kursif, atau bentuk yang tidak biasa, atau fitur artistik, mungkin terlihat bagus, tetapi mereka jauh lebih sulit dibaca daripada keluarga font umum.

Special font families to avoid for accessibilitySpecial font families to avoid for accessibilitySpecial font families to avoid for accessibility
Hindari font tampilan ini saat mendesain untuk aksesibilitas

Demikian juga, jangan gunakan font yang mengklaim dapat diakses atau membantu cacat tertentu (mis. Font disleksia). Mereka tergoda untuk menggunakannya, tetapi tidak ada bukti jelas bahwa mereka benar-benar membantu pembaca. Anda lebih baik memilih font umum yang sebagian besar pengguna sudah terbiasa.

2. Styling Khas

Orang-orang sering berasumsi bahwa setelah memilih font yang dapat diakses, pekerjaan mereka dilakukan – salah! Langkah selanjutnya adalah mempertimbangkan bagaimana font sebenarnya akan ditata pada halaman dan untuk membangunnya menjadi panduan gaya mereka, atau entah bagaimana membatasi gaya tertentu untuk editor / pembuat konten untuk memastikan bahwa tipografi tetap dapat diakses.

Ukuran dan Variasi Fon

Beberapa ukuran dan gaya font dapat menimbulkan masalah bagi penyandang cacat. Misalnya, pembaca layar sering mengabaikan metode gaya, seperti huruf tebal dan huruf miring, membuat gaya ini tidak berguna bagi pengguna tunanetra. Pengguna dengan low vision atau buta warna mungkin tidak dapat melihat beberapa teks jika terlalu kecil, sementara pengguna lain mungkin mengalami kesulitan membaca teks miring.

Untuk alasan ini, Anda harus mempertimbangkan pedoman berikut:

  • Ukuran font dasar harus ditetapkan setidaknya 14px (0,875rem) —bahkan, banyak publikasi menggunakan 20px atau lebih besar untuk salinan tubuh mereka saat ini.
  • Ukuran font harus ditentukan dengan nilai relatif (mis.%, Rem, atau em) untuk memudahkan pengubahan ukuran.
  • Batasi penggunaan variasi font seperti italic, bold, ALL CAPS atau metode gaya lain yang mungkin membuat konten sulit dibaca.
  • Jangan gunakan garis bawah untuk item yang bukan tautan.
  • Gunakan markup alih-alih teks pada gambar! * Pembaca layar tidak dapat membaca teks tertanam pada gambar (tanpa kode tambahan ditambahkan) dan teks tertanam juga dapat menjadi pixelated ketika diperbesar oleh pengguna dengan penglihatan rendah.

* Ya, kami telah menggunakan teks dalam sejumlah gambar dalam artikel ini, tetapi kontennya sering direplikasi dalam bentuk tekstual, dan setiap gambar memiliki tag alt deskriptif.

Warna dan Kontras

Dengan jumlah orang yang memiliki beberapa varian kebutaan warna, menderita low vision, atau benar-benar buta (secara keseluruhan sekitar 9% dari populasi global), ini adalah area yang sangat luas di mana desainer dapat memiliki dampak langsung dan langsung pada aksesibilitas situs web.

Example color ratio chart for fontsExample color ratio chart for fontsExample color ratio chart for fonts
Contoh bagan rasio warna untuk font

Ada banyak hal yang perlu dipertimbangkan ketika membuat konten Anda dapat diakses dari perspektif warna dan konstrast termasuk:

  • Gunakan  warna / alat pengujian kontras dan simulator untuk mengukur rasio kontras untuk desain situs web Anda. Menurut pedoman kontras WCAG, teks kecil harus memiliki rasio kontras minimal 4,5: 1 dengan latar belakangnya. Sementara teks besar (18pt dan lebih besar) harus memiliki rasio kontras minimal 3: 1 dengan latar belakangnya.
  • Menggunakan latar belakang warna solid - membaca teks pada latar belakang sibuk, overlay, atau gradien sulit, terutama jika tidak memiliki kontras yang cukup.
  • Gunakan warna pada ujung yang berlawanan dari spektrum warna - hindari kombinasi merah / hijau dan biru / kuning bila Anda bisa.
  • Berhati-hatilah dengan corak warna terang, terutama abu-abu - sulit dilihat bagi orang dengan penglihatan rendah.
  • Jangan mengandalkan warna saja untuk menyampaikan informasi kepada pengguna Anda. Misalnya, pastikan tautan Anda memiliki garis bawah, atau beberapa indikator visual lain selain warna.

3. Struktur dan Tata Letak Adalah Kunci

Sementara pilihan tipografi dan gaya Anda tentu dapat membantu membuat atau menghancurkan situs web dari sudut pandang aksesibilitas, pentingnya struktur dan tata letak tidak boleh diabaikan. Bagaimana situs web Anda disusun (UI) dan bagaimana orang-orang benar-benar berinteraksi dengan situs web Anda (UX) adalah faktor yang sama pentingnya ketika membuat konten Anda dapat diakses. Pengguna dengan pembaca layar, gangguan membaca, ketidakmampuan belajar, atau gangguan kurangnya perhatian akan mendapat manfaat dari memiliki tata letak yang jelas dan konten yang ringkas.

Tentukan Tata Letak Halaman Anda dengan Jelas

Pikirkan setiap halaman di situs web Anda sebagai garis besar cerita. Dengan memikirkan halaman web Anda sebagai cerita individu, ini akan membantu Anda merencanakan struktur halaman keseluruhan menggunakan pos, subpos, dan paragraf. Sepotong besar itu membuat elemen kritis secara visual berbeda satu sama lain. Jika mereka terlalu dekat satu sama lain, mungkin sulit untuk mengatakan di mana satu elemen dimulai dan ujung lainnya, terutama jika mereka memiliki gaya yang sama.

Paragraph spacing examplesParagraph spacing examplesParagraph spacing examples
Contoh spasi paragraf

Bagi orang-orang dengan ketidakmampuan membaca atau penglihatan, garis panjang teks juga bisa menjadi penghalang. Para pengguna ini kesulitan menjaga tempatnya dan mengikuti alur konten. Memiliki blok teks yang sempit memudahkan mereka untuk melanjutkan ke baris berikutnya dalam sebuah blok. Jumlah karakter per baris dalam paragraf atau bagian teks apa pun ('ukuran') tidak boleh lebih dari 80. Untuk karakter Cina, Jepang, atau Korea, Anda harus membatasi setiap garis hingga 40 untuk membantu fokus dan keterbacaan.

Terakhir, ketika mempertimbangkan struktur dan tata letak halaman Anda, pastikan Anda memikirkan semua pengguna Anda. Halaman tersebut harus masuk akal bagi pengguna di setiap breakpoint dan perangkat menggunakan mouse, keyboard, layar layar sentuh, atau perangkat teknologi adaptif lainnya. Setelah struktur kerangka ini berada di tempatnya, gaya setiap kalimat dan paragraf mulai berlaku.

Paragraf dan Penjarakan Kalimat

Untuk orang-orang dengan gangguan kognitif dan kurang perhatian, spasi putih bermanfaat untuk mempertahankan fokus membaca. Ini adalah praktik terbaik untuk mengatur jarak antara setiap kalimat menjadi 1,5 relatif terhadap tinggi garis dari jenis Anda. Dalam paragraf, spasi harus setidaknya 1,5 kali lebih besar dari spasi untuk secara jelas mendefinisikan bagian konten baru. Dalam sebagian besar keadaan, penspasian baris tidak boleh melebihi 2,0, dan penspasian antar paragraf tidak boleh lebih dari 2,0 kali lebih besar dari penspasian baris, atau Anda berisiko mengganggu pembaca Anda.

fully justified text vs left aligned textfully justified text vs left aligned textfully justified text vs left aligned text
Teks yang sepenuhnya dibenarkan vs teks yang selaras kiri

Demikian pula, orang dengan ketidakmampuan membaca atau kognitif tertentu memiliki masalah membaca teks yang sepenuhnya dibenarkan. Jarak yang tidak merata antara kata-kata dalam teks yang sepenuhnya dapat dibenarkan dapat menyebabkan 'sungai ruang' membentuk halaman, membuat konten sulit dibaca. Pembenaran teks juga dapat menyebabkan kata-kata dikelompokkan secara bersamaan atau ditarik dengan cara yang tidak wajar sehingga pembaca merasa sulit untuk menemukan batas kata.

Ringkasan

Ada banyak pertimbangan desain untuk membuat konten Anda lebih mudah diakses oleh semua. Beberapa hal untuk dipikirkan dan dimasukkan ke dalam alur kerja desain Anda termasuk:

  • Pilih font umum yang sebagian besar pengguna temui sebelumnya.
  • 'Debat serif vs sans-serif' bukan masalah besar jika Anda memilih keluarga font umum atau yang memiliki karakter unik.
  • Hindari font tampilan khusus atau keluarga font yang tidak unik (mis. Huruf atau angka yang dapat saling mencerminkan)
  • Font Anda harus memiliki ukuran minimum 14px (idealnya lebih) dan ketika kode harus menggunakan nilai relatif.
  • Perhatikan warna dan kontras! Gunakan alat untuk memeriksa rasio antara teks dan latar belakang dan waspada terhadap abu-abu.
  • Jangan mengandalkan warna saja untuk menandakan informasi (mis. 'Klik tombol merah').
  • Tentukan dengan jelas jarak paragraf dan huruf.
  • Jangan biarkan lebar keseluruhan konten melebihi 80 karakter (40 karakter untuk logograms).
  • Hindari penyelarasan paragraf (seperti yang dibenarkan) yang menciptakan spasi putih di dalam konten.
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.