Intinya...

Teks harus berupa teks sesungguhnya, bukan teks berbasis gambar (tanpa pengecualian, bahkan untuk alasan desain atau estetika).

Apa itu WCAG 1.4.9?

Teks di situs web harus selalu berupa teks asli yang dapat dipilih dan disesuaikan, bukan teks berbasis gambar. Ini berarti teks berbasis gambar hanya diperbolehkan jika tidak ada cara lain untuk menyampaikan informasi tersebut, seperti pada logo.

Baik WCAG 1.4.5 Teks Berbasis Gambar (AA) maupun 1.4.9 (AAA) berfokus pada penggunaan teks asli alih-alih gambar. Namun, meskipun 1.4.5 memungkinkan beberapa pengecualian, 1.4.9 menghilangkan pengecualian tersebut. Untuk kepatuhan AAA, teks berbasis gambar hanya diperbolehkan jika gambar tersebut benar-benar penting bagi konten.

Perbandingan teks berbasis gambar dengan teks asli

Perbandingan yang menunjukkan perbedaan antara teks berbasis gambar dan teks asli. Sisi kiri: 'Image of Text: Blurry or Pixelated' menunjukkan kutipan tentang aardvarks yang buram dan sulit dibaca. Sisi kanan: 'Real Text: Clear and Customizable' menunjukkan kutipan yang sama dengan teks tajam dan dapat disesuaikan.

Mengapa ini penting?

Gambar teks statis membuatnya tidak mungkin bagi pengguna untuk mengubah tampilan teks untuk meningkatkan keterbacaan. Teks dalam gambar tidak dapat diskalakan dengan baik dan bisa menjadi piksel, kabur, atau tidak terbaca saat pengguna melakukan zoom. Berbeda dengan teks asli di halaman, teks dalam gambar tidak dapat menyesuaikan dengan ukuran layar atau pengaturan pengguna, sehingga lebih sulit dibaca pada perangkat mobile atau layar besar.

Pengguna yang perlu mengubah ukuran font, kontras warna, atau warna latar belakang untuk meningkatkan keterbacaan tidak dapat melakukannya dengan teks yang ada dalam gambar. Hal ini sangat menantang bagi pengguna dengan gangguan penglihatan, defisiensi penglihatan warna, atau gangguan kognitif yang mendapatkan manfaat dari format teks tertentu.

Screen reader tidak dapat menginterpretasikan teks dalam gambar, jadi pengguna yang bergantung pada alat ini tidak akan bisa mengakses konten kecuali gambar tersebut dilengkapi dengan teks alternatif atau keterangan yang sesuai.

Siapa yang terpengaruh?

Pengguna dengan penglihatan terbatas atau rendah, pengguna dengan masalah pelacakan visual, dan pengguna dengan gangguan kognitif.

Pengguna dengan gangguan penglihatan sering kali perlu melakukan zoom atau mengubah warna teks. Teks dalam gambar tidak dapat menyesuaikan, dan melakukan zoom hanya membuatnya menjadi kabur.

Pengguna yang memiliki gangguan pelacakan visual dapat memperoleh manfaat dari penyesuaian perataan teks dan spasi untuk membantu mengurangi ketegangan mata dan kelelahan. Teks dalam gambar menghalangi pengguna ini untuk melakukan penyesuaian yang mereka butuhkan.

Pengguna dengan gangguan kognitif mungkin memerlukan font, warna, atau spasi baris tertentu untuk membantu membaca, dan teks dalam gambar membatasi kemampuan mereka untuk mengubah pengaturan teks.

Cara menerapkan WCAG 1.4.9

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

Jangan pernah menggunakan gambar teks

Untuk memenuhi pedoman ini, jangan gunakan gambar untuk menampilkan konten tertulis, termasuk kutipan dekoratif atau label tombol. Gunakan teks asli dalam HTML atau CSS agar pengguna dapat mengubah ukuran dan gayanya sesuai kebutuhan mereka.

Ilustrasi perbesaran teks berbasis gambar

Gambar teks yang diperbesar pada perangkat mobile; teks tersebut tampak kabur dan sulit dibaca.

Pengecualian untuk teks berbasis gambar yang esensial

Teks berbasis gambar hanya diperbolehkan jika benar-benar diperlukan, seperti:

  • Logo atau wordmark yang merupakan bagian dari identitas merek
  • Grafik di mana teks secara visual sangat penting untuk desain (misalnya, seni atau diagram)

Teks berbasis gambar dianggap perlu hanya ketika penampilan visual teks tersebut diperlukan untuk memahami konten (seperti logo bergaya atau bagian dari desain grafis dengan makna tertentu).

Jika kamu harus menggunakan gambar teks, pastikan untuk menyediakan konten tersebut dengan cara lain, seperti keterangan atau alternatif berupa teks agar tetap dapat diakses.

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

CSS Untuk menata teks

Gunakan CSS untuk mendapatkan tampilan yang serupa dengan teks dalam gambar, dan pastikan menggunakan satuan relatif seperti em, rem, %, vw, dan vh. Dengan cara ini, teks dapat diskalakan dengan lancar di berbagai ukuran layar dan menyesuaikan dengan mudah ketika pengguna melakukan zoom atau menyesuaikan pengaturan mereka. Penggunaan satuan relatif menjaga fleksibilitas, sehingga tata letak tetap utuh dan dapat dibaca di semua perangkat.

Ini juga merupakan kriteria keberhasilan yang terpisah; lihat WCAG 1.4.4 Mengubah Ukuran Teks untuk informasi lebih lanjut.

Beralih antara teks berbasis gambar dan teks biasa

Jika kamu menggunakan teks berbasis gambar untuk alasan desain, seperti judul dekoratif, kamu perlu menawarkan versi teks biasa juga. Ini memberi pengguna pilihan antara gaya visual dan aksesibilitas.

Namun, penting untuk dicatat bahwa untuk memenuhi WCAG 1.4.9, teks yang sebenarnya dan dapat diakses harus ditampilkan secara default atau langsung terlihat bersama gambar tersebut. Sekadar tombol toggle saja tidak cukup. Teks yang asli harus menjadi bagian dari pengalaman default.

Perbandingan teks berbasis gambar dan teks yang diberikan gaya lewat CSS

CSS bisa digunakan untuk memberikan gaya pada teks.

Kesimpulan

Teks harus bertindak seperti teks. Jika pengguna tidak dapat mengubah ukurannya, memilihnya, mengubah warnanya, atau membacanya dengan screen reader, maka itu tidak sepenuhnya dapat diakses.

Kecuali kamu memiliki alasan yang kuat (seperti logo), selalu gunakan teks yang asli. Ini meningkatkan keterbacaan, mendukung personalisasi, dan membuat konten kamu bekerja lebih baik untuk semua orang.