Intinya...

Teks harus berupa teks sesungguhnya, bukan teks berbasis gambar, kecuali presentasi visual tertentu dibutuhkan (misalnya logo).

Apa itu WCAG 1.4.5?

Teks berbasis gambar (images of text) adalah teks yang disimpan dalam bentuk gambar dan dipanggil menggunakan tag <img>.

Gunakan konten teks asli daripada teks berbasis gambar. Ini memungkinkan pengguna untuk menyesuaikan teks sesuai preferensi mereka. Teks berbasis gambar hanya diperbolehkan jika memenuhi kondisi tertentu, seperti:

  • Dibutuhkan untuk desain tertentu yang tidak bisa dicapai dengan teks biasa, atau
  • Merupakan bagian dari logo atau identitas merek.

Perbandingan teks berbasis gambar dengan teks

Perbandingan berdampingan yang menunjukkan perbedaan antara teks berbasis gambar dan teks asli. Sisi kiri: 'Gambar Teks: Buram atau Pecah' menampilkan kutipan tentang aardvark yang kabur dan sulit dibaca. Sisi kanan: 'Teks Asli: Jelas dan Dapat Disesuaikan' menampilkan kutipan yang sama dengan teks yang tajam dan dapat disesuaikan.

Mengapa ini penting?

Gambar statis dari teks membuat pengguna tidak bisa mengubah tampilan teks untuk meningkatkan keterbacaan. Teks dalam gambar tidak dapat diperbesar dengan baik dan bisa menjadi pecah, buram, atau tidak terbaca saat pengguna melakukan pembesaran (zoom). Berbeda dengan teks asli di halaman, teks berbasis gambar tidak akan menyesuaikan diri dengan ukuran layar atau pengaturan pengguna, sehingga lebih sulit dibaca di perangkat mobile atau layar yang lebih besar.

Pengguna yang perlu mengubah ukuran huruf, kontras warna, atau warna latar belakang untuk meningkatkan keterbacaan tidak dapat melakukannya pada teks yang tertanam dalam gambar.

Ini menjadi tantangan bagi pengguna low vision, defisiensi penglihatan warna, atau disabilitas kognitif yang membutuhkan format teks tertentu.

Screen reader tidak dapat membaca teks yang ada di dalam gambar, sehingga orang yang bergantung pada alat ini tidak akan bisa mengakses konten kecuali gambarnya diberi caption yang tepat atau alternatif berupa teks.

Siapa yang terpengaruh?

Pengguna low vision dan penglihatan terbatas, pengguna dengan masalah pelacakan visual, pengguna dengan disabilitas kognitif.

Pengguna low vision dan penglihatan terbatas mungkin kesulitan membaca teks kecil berukuran tetap di dalam gambar, dan memperbesar gambar untuk membaca teks dapat membuat tampilan menjadi buram atau pecah.

Pengguna dengan masalah pelacakan visual bisa terbantu dengan penyesuaian perataan dan jarak teks untuk mengurangi ketegangan dan kelelahan mata. Teks berbasis gambar mencegah mereka melakukan penyesuaian ini.

Pengguna dengan disabilitas kognitif mungkin membutuhkan font, warna, atau jarak antar baris tertentu untuk membantu mereka membaca, dan teks berbasis gambar membatasi kemampuan mereka untuk mengubah pengaturan teks.

Cara menerapkan WCAG 1.4.5

Bagian ini menawarkan penjelasan yang disederhanakan dan contoh-contoh untuk membantu kamu memulai. Untuk panduan lengkap, selalu rujuk ke dokumentasi resmi WCAG.

Hindari teks berbasis gambar

Sebisa mungkin, gunakan teks biasa alih-alih gambar yang berisi teks, agar pengguna bisa menyesuaikan tampilan teks seperti ukuran font, warna, gaya, atau jarak antar huruf.

Ilustrasi perbesaran teks berbasis gambar

Gambar yang memperlihatkan teks diperbesar pada perangkat mobile; teks terlihat buram dan sulit dibaca.

Pengecualian untuk teks berbasis gambar yang esensial

Pengecualian berlaku ketika tampilan visual teks tersebut benar-benar esensial, misalnya teks dalam logo atau branding. Atau, jika teks pada gambar dapat disesuaikan sesuai preferensi pengguna, dalam kasus kamu membuat gambar dinamis.

Jika kamu harus menggunakan teks berbasis gambar untuk alasan penting, seperti pada logo, pastikan informasi dalam gambar tetap dapat diakses dengan menambahkan keterangan atau alternatif berupa teks.

Anjing yang sedang berdansa dan contoh atribut altnya

Di sebelah kiri, sebuah kotak teks bertuliskan: 'Alt Text: Logo for Dancing Dog Productions featuring a dancing corgi wearing star-patterned cowboy boots.' Di sebelah kanan, logo memperlihatkan corgi yang tampak bahagia memakai sepatu bot, dikelilingi kata-kata 'Dancing Dog Productions.'

CSS untuk memberi gaya pada teks

Gunakan CSS untuk mendapatkan tampilan serupa dengan teks dalam gambar dan gunakan ukuran relatif seperti em, rem, %, vw, dan vh. Dengan cara ini, teks akan menyesuaikan dengan mulus di berbagai ukuran layar dan mudah disesuaikan saat pengguna melakukan zoom atau mengubah pengaturan mereka. Menggunakan satuan relatif membuat tampilan tetap fleksibel, sehingga tata letak tetap rapi dan mudah dibaca di semua perangkat.

Ini juga merupakan kriteria keberhasilan tersendiri; kunjungi WCAG 1.4.4 Mengubah Ukuran Teks untuk informasi lebih lanjut.

Perbandingan penerapan teks: satu embed ke gambar, satu lagi HTML asli

Dua contoh: satu di mana teks menjadi bagian dari gambar, dan satu lagi di mana teks diambil dan ditampilkan sebagai heading di atas gambar. CSS digunakan untuk menata heading agar tampilannya mirip dengan teks asli dalam gambar.

Beralih antara teks berbasis gambar dan teks biasa

Pilihan lain adalah memberi pengguna cara untuk beralih antara teks berbasis gambar dan teks biasa. Ini memungkinkan pengguna memilih yang paling sesuai untuk mereka: apakah mereka lebih suka gaya dalam gambar atau membutuhkan fleksibilitas teks biasa. Toogle sederhana atau tautan untuk beralih tampilan dapat memudahkan semua orang mengakses dan membaca konten dalam format yang mereka sukai.

Kesimpulan

Menggunakan teks asli daripada teks berbasis gambar adalah kunci untuk membuat konten yang fleksibel, aksesibel, dan ramah pengguna. Teks asli memungkinkan pengguna melakukan perubahan sesuai kebutuhan mereka, baik itu memperbesar ukuran, menyesuaikan warna, atau mengubah spasi untuk meningkatkan keterbacaan.