Intinya...

Semua gambar dan konten non-teks (seperti ikon, grafik, audio, CAPTCHA, dan kontrol) harus memiliki alternatif berupa teks yang deskriptif dan menyampaikan maknanya. Konten yang bersifat dekoratif bisa disembunyikan dari teknologi bantu (misalnya menggunakan atribut alt yang kosong).

Apa itu WCAG 1.1.1?

WCAG 1.1.1 membahas tentang konten non-teks dan pentingnya menyediakan alternatif berupa teks. Konten-non teks adalah semua hal di situs web selain tulisan, misalnya gambar, video, audio, atau elemen visual dan suara lainnya. Pengguna dengan gangguan penglihatan, pendengaran, atau kesulitan memproses informasi, bisa kesulitan memahami konten yang disajikan bukan dalam bentuk teks.

Alternatif berupa teks membantu membuat konten-non teks bisa diakses oleh semua pengguna. Teks ini bisa dibaca langsung, dibacakan oleh screen reader, diterjemahkan ke braille, atau diterjemahkan ke bahasa lain.

Berikut beberapa jenis konten-non teks yang sering ada di situs web:

  • Gambar informasi seperti grafik, diagram, atau infografis
  • Rekaman audio, seperti podcast
  • Video tanpa suara, misalnya animasi GIF atau meme
  • Video dengan suara, seperti film atau acara TV
  • Siaran langsung audio saja atau video saja
  • Gambar, foto, dan animasi
  • Elemen dekoratif atau gambar hiasan
  • Musik dan karya seni visual
  • Tombol visual, ikon, atau peta gambar (image map)
  • Kuis atau tes online yang soal atau jawabannya berupa gambar atau elemen non-teks
  • CAPTCHA atau tes sejenis untuk memastikan pengunjung adalah manusia

Wah, ternyata jenis konten non-teks itu banyak juga ya! Tapi inti dari kriteria ini adalah memastikan semua jenis konten non-teks tadi bisa diakses oleh semua orang*

Karena bentuknya bermacam-macam, aturan ini memang cukup luas dibandingkan beberapa aturan lainnya. Tapi tenang, kami sudah bantu pecah-pecah jadi bagian-bagian sederhana supaya kamu bisa lebih mudah dan cepat belajar cara menanganinya dengan benar.

Mengapa ini penting?

konten-non teks bisa jadi penghalang bagi banyak pengguna, termasuk mereka yang memiliki gangguan penglihatan, gangguan pendengaran, atau kesulitan dalam memproses informasi (cognitive disabilities). Selain itu, konten-non teks juga tidak bisa diakses oleh pengguna yang tidak memahami bahasa yang digunakan dalam konten tersebut.

Alternatif berupa teks adalah cara supaya semua orang bisa mengakses konten dan informasi yang biasanya hanya disajikan lewat visual atau suara.

Selain itu, alternatif berupa teks juga punya manfaat tambahan. Konten visual dan audio jadi bisa dicari lewat fitur pencarian, dan bisa dipakai ulang untuk keperluan lain dengan lebih mudah.

Siapa yang terpengaruh?

Pengguna dengan gangguan penglihatan, gangguan pendengaran, dan mereka yang punya kesulitan membaca atau belajar.

Pengguna yang tidak bisa melihat konten visual akan kehilangan informasi penting yang ada di diagram, video, gambar, tombol bergambar, dan lainnya. Dengan adanya alternatif berupa teks, mereka bisa tetap mengakses informasi itu lewat teknologi bantu, seperti screen reader atau alat braille digital.

Begitu juga dengan pengguna tuli atau mengalami gangguan pendengaran. Mereka tidak bisa mendengar konten audio seperti podcast, film, atau musik. Alternatif berupa teks bisa membantu mereka memahami isi dan konteks yang mungkin terlewat.

Selain itu, pengguna yang kesulitan memproses konten visual atau audio juga akan terbantu dengan adanya alternatif berupa teks, karena konten yang sama bisa dijelaskan dalam beberapa cara berbeda.

Cara menerapkan WCAG 1.1.1

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

Karena jenis konten-non teks itu banyak sekali, setiap jenis konten perlu diperlakukan dengan cara yang berbeda agar memenuhi aturan ini. Cari dulu kategori konten-non teks yang paling cocok dengan konten yang sedang kamu buat, lalu mulai dari situ.

Gambar

Saat menambahkan gambar ke halaman, periksa dulu gambar tersebut dan tentukan apakah gambar itu penting untuk dipahami pengguna dalam konteks halaman, dan apakah gambar itu membantu menyampaikan informasi di halaman.

Gunakan atribut alt di HTML untuk memberikan alternatif berupa teks yang menjelaskan maksud gambar dan isi teks yang ada di dalamnya (kalau ada). Alternatif berupa teks sebaiknya singkat dan jelas. Patokan umumnya, cukup sekitar 125 karakter, biasanya sekitar satu kalimat.

Karena harus singkat, fokuskan alternatif berupa teks pada informasi yang berkaitan langsung dengan konteks gambar di halaman tersebut.

Hindari:

  • Menulis deskripsi yang terlalu panjang atau detail yang tidak relevan.
  • Menulis kata “gambar dari” atau “foto tentang” di alternatif berupa teks, karena screen reader sudah tahu itu gambar.
  • Mengulang caption gambar, kalau sudah ada.

Gambar dekoratif

Gambar dekoratif itu gambar yang hanya untuk mempercantik tampilan halaman, tapi tidak punya makna khusus atau informasi penting. Kalau gambar itu hanya hiasan, ngga perlu diberi alternatif berupa teks.

Dalam kasus seperti ini, kamu bisa kasih tahu teknologi bantu (seperti screen reader) untuk mengabaikan gambar dekoratif. Caranya, tetap gunakan atribut alt di elemen <img>, tapi kosongkan isinya.

Ingat: Jangan sampai nggak menuliskan atribut alt sama sekali. Atributnya tetap harus ada, tapi nilainya kosong (alt="") supaya bisa diabaikan.

Cara lain adalah menambahkan gambar dekoratif lewat CSS, karena biasanya teknologi bantu bisa mematikan CSS atas permintaan pengguna, dan umumnya elemen gambar dari CSS memang diabaikan.

Beberapa properti CSS yang biasa dipakai untuk gambar dekoratif:

  • background
  • background-image
  • content (dipakai di pseudo-element ::before dan ::after)
  • list-style-image

Masih bingung gambar kamu perlu alternatif berupa teks atau ngga? Ada pedoman alt decision tree yang bisa bantu kamu menentukan apakah sebuah gambar perlu alternatif berupa teks atau ngga.

Ilustrasi kucing dan gambar dekoratif bernuansa ultah

Gambar dengan alternatif berupa teks: “Kucing abu-abu bernama Obin sedang santai merayakan ulang tahun sambil mengenakan topi ultah.” dibandingkan dengan gambar dekoratif dengan atribut alt=“”.

Elemen <a> & tautan

Setiap tautan di halaman harus punya teks atau konten-non teks yang diberi atribut alt untuk menjelaskan tujuan dari elemen <a>. Soalnya, alamat link (URL) saja biasanya tidak cukup jelas untuk memberi tahu pengguna mau ke mana.

Walaupun tidak wajib untuk memenuhi aturan ini, sebaiknya kamu juga memberi tahu jenis file kalau tautan tersebut mengarah ke file. Contohnya:

<a href="resume.pdf">Resume saya (PDF)</a>

Gambar yang jadi tautan

Kalau tautan berisi gambar dan teks, biasanya atribut alt gambar boleh dikosongkan supaya tidak jadi deskripsi ganda yang mubazir.

Tapi, kalau gambarnya memang menambah konteks atau informasi penting, kamu bisa tetap tambahkan alternatif berupa teks.

Gambar tautan bersebelahan dengan teks dengan tujuan yang sama

Untuk mengurangi tautan yang berlebihan yang mengarah ke tujuan atau sumber yang sama, penting untuk memeriksa gambar tautan yang berada di samping teks tautan. Tata letak seperti ini umum ditemukan di berbagai situs web, misalnya di daftar blog atau daftar produk dengan gambar unggulan di samping judul tautan yang keduanya menuju halaman yang sama.

Dalam kasus seperti ini, pastikan elemen <img> berada di dalam elemen <a>. Setelah gambar dimasukkan dalam tautan, kamu juga bisa menambahkan alternatif berupa teks pada gambar tersebut jika gambar itu menjelaskan gambar atau menambah konteks pada tautan.

Ini akan memudahkan screen reader untuk menavigasi halaman, karena tidak ada tautan duplikat yang menuju ke sumber yang sama, dan tidak perlu membaca informasi yang sama dua kali.

Lakukan ini:

<a href="https://kostum-kucing.com/lebah">
    <img alt="Kucing abu-abu menggunakan kostum lebah" src="kostum-lebah.png" />
    <h3>Kostum kucing lebah lucu dan menggemaskan</h3>
    <span class="btn">Beli sekarang</span>
</a>

Hindari ini:

<a href="https://kostum-kucing.com/lebah">
    <img alt="Kucing abu-abu menggunakan kostum lebah" src="kostum-lebah.png" />
</a>
<h3>Kostum kucing lebah lucu dan menggemaskan</h3>
<a href="https://kostum-kucing.com/lebah" class="btn">
    Beli sekarang
</a>

Ada dua tautan yang mengarah ke halaman yang sama, yang bisa menyebabkan redundansi dan kesulitan bagi pengguna screen reader. Sebaiknya gabungkan gambar dan teks dalam satu elemen <a> untuk menghindari pengulangan yang tidak perlu.

Kucing menggunakan kostum lebah keterangan yang dijelaskan dalam caption

Di halaman daftar produk, satu produk menampilkan kucing yang memakai kostum lebah, dan judul tautannya berkata, 'Beli sekarang'. Ikon pointer ditampilkan di atas gambar dan tautan untuk menunjukkan bahwa kedua elemen tersebut adalah tautan berbeda.

Pengelompokan konten-non teks

Dalam kasus di mana ada pengelompokan konten-non teks yang dimaksudkan untuk menyampaikan informasi secara keseluruhan, kamu perlu memperhatikan tiga hal:

  • Hindari memberikan alternatif berupa teks yang berulang, hindari pengulangan yang tidak perlu.
  • Berikan alternatif berupa teks yang memberikan konteks untuk pengelompokan konten secara keseluruhan dan tetapkan hanya pada satu elemen dalam grup tersebut.
  • Tandai elemen dalam grup yang harus diabaikan oleh teknologi bantu, jika memungkinkan.

Contoh situasinya adalah sistem penilaian bintang di halaman web. Setiap elemen bintang bisa ditambahkan sebagai gambar individu, dan mungkin terlihat benar untuk memberi alternatif berupa teks “ikon bintang” pada setiap gambar.

Namun, pengguna yang menggunakan alternatif berupa teks tidak akan mendapatkan konteks dari ini karena informasi yang mereka terima hanya mengulang kata “ikon bintang”. Sebagai gantinya, pengelompokan ini bisa menggunakan alternatif berupa teks hanya pada gambar pertama dengan mengatakan “4 dari 5 bintang”, sementara elemen gambar bintang lainnya bisa dikosongkan atribut alt-nya.

Rating 4/5 bintang dengan keterangan pada caption

Sistem penilaian bintang dengan alternatif berupa teks 'Rating 4 dari 5 bintang' diterapkan pada elemen pertama; sementara ikon bintang lainnya menggunakan alt=''.

Emoji, emotikon, dan seni ASCII

Emoji dan apa pun yang dibuat dengan karakter ASCII, seperti emotikon atau seni ASCII, bisa membingungkan bagi screen reader karena mereka akan membacakan nama dan karakter konten tersebut.

Emoji memiliki nama yang sudah didefinisikan sebelumnya yang tidak selalu sesuai dengan tujuan konten secara keseluruhan. Hal ini karena emoji sering kali memiliki makna sosial atau budaya yang tidak selalu cocok dengan makna literalnya. Misalnya, 🌝 (wajah bulan purnama) mungkin tidak terlalu berarti ketika dibaca dengan suara keras, tetapi bagi pengguna yang bisa melihat emoji tersebut, itu menyampaikan ironi atau sindiran.

Demikian pula, screen reader akan membaca emotikon dan seni ASCII satu karakter pada satu waktu. Jadi, sesuatu seperti >:) akan dibaca sebagai “greater than, colon, right parenthesis” alih-alih diinterpretasikan sebagai wajah tersenyum nakal.

Karena tantangan ini, emoji dan seni ASCII perlu menyertakan alternatif berupa teks atau alternatif berbasis teks untuk menyampaikan maknanya. Ini bisa dilakukan dengan beberapa cara:

  • Menempatkan elemen dalam tag HTML <span> dengan atribut aria-label 
    <span aria-label="senyum nakal" role="img">>:)</span>
  • Jika emoji disertakan sebagai gambar, gunakan atribut alt 
    <img alt="senyum nakal" src="smiling_face_with_horns.png">
  • Menambahkan deskripsi elemen dalam tanda kurung segera setelahnya >:) (senyum nakal)

Puisi yang dibumbui emoji di seluruh teks

Puisi yang dibumbui emoji di seluruh teks dibandingkan dengan puisi yang sama dengan interpretasi emoji oleh screen reader.

Audio, musik, atau karya seni

Kamu perlu mencantumkan nama materinya jika kamu bekerja dengan file audio atau musik dan karya seni. Ini bisa berarti mencantumkan nama karya seni dan nama senimannya, atau mencantumkan nama file suara.

Informasi lain yang dapat kamu sertakan adalah media yang digunakan untuk karya seni, tanggal pembuatan, dan deskripsi singkat tentang apa yang digambarkan.

Musik bisa mencakup informasi tentang genre, komposer, tanggal pertunjukan, tautan ke lirik, atau deskripsi singkat tentang isi liriknya.

Sebagai contoh, pemutar suara bisa mencantumkan alternatif berupa teks “Take a Chance On Me, oleh ABBA”.

Lukisan The White Cat yang disertai deskripsi singkat mengenai seniman dan karyanya

Karya seni ditampilkan di samping deskripsi singkat, termasuk nama, seniman, media, tanggal, dan gambaran singkat tentang konten yang digambarkan.

Peta gambar (image maps)

Peta gambar adalah jenis gambar khusus yang mencakup area yang dapat dipilih di dalamnya. Selain deskripsi alternatif berupa teks gambar secara keseluruhan, setiap area juga harus menyediakan atribut alt sendiri untuk menggambarkan tujuannya.

Image map pada berupa area belaian kucing

Sebuah peta gambar kucing dengan area tubuh yang dapat diklik untuk mempelajari lebih lanjut. Setiap bagian tubuh memiliki alternatif berupa teksnya sendiri, misalnya, 'Bagian kepala'.

Kontrol formulir

Jika kamu bekerja dengan formulir di situs (misalnya, formulir kontak), setiap elemen <input> dalam formulir harus memiliki elemen <label> yang disertakan, dengan atribut for yang cocok dengan atribut id elemen <input>.

Biasanya, elemen <label> untuk setiap elemen <input> formulir menggambarkan apa yang diperlukan oleh kontrol formulir, sehingga memudahkan pengguna untuk memahami tujuan dari suatu kolom. Menyertakan elemen <label> juga membuat area yang dapat diklik pada kolom menjadi lebih besar, sehingga memudahkan pengguna dengan gangguan pengendalian motorik untuk mengklik kolom tersebut.

Elemen <label> harus disertakan dengan setiap elemen <input> formulir, kecuali untuk tombol dan kolom tersembunyi. Berikut adalah contoh kolom input nama depan yang disertai dengan elemen <label> yang menjelaskan tujuannya:

<label for="namaDepan">Nama depan:</label>
<input id="namaDepan" name="namaDepan" type="text">

CAPTCHA

CAPTCHA biasanya merupakan tes visual atau audio pada formulir yang membantu menentukan apakah pengguna adalah manusia atau bukan. Karena CAPTCHA melibatkan tugas yang berbasis gambar atau audio, biasanya tidak dapat diakses oleh orang dengan gangguan penglihatan atau pendengaran.

Agar CAPTCHA dapat diakses, halaman web perlu:

  • Menyediakan alternatif berupa teks yang menjelaskan tujuan CAPTCHA dan menyertakan instruksi tentang di mana menemukan CAPTCHA alternatif.
  • Menyediakan CAPTCHA alternatif di halaman dengan jenis tugas yang berbeda; menyertakan CAPTCHA visual dan audio di halaman memastikan bahwa pengguna dapat menyelesaikan salah satunya sesuai kebutuhan.

CAPTCHA teks dan CAPTCHA audio

Perbandingan CAPTCHA berdampingan antara task visual dan task audio. Tombol disediakan di masing-masing CAPTCHA untuk beralih antar modul.

Konten kompleks

Konten kompleks adalah apa pun yang tidak dapat dijelaskan menggunakan alternatif berupa teks yang singkat dan sederhana. Jika alternatif berupa teks terlalu panjang, itu bisa mengganggu pengalaman pembaca saat mereka membaca halaman web. Apa pun yang terlalu jauh dari topik atau memberi terlalu banyak informasi bisa menjadi distraksi.

Saat bekerja dengan konten kompleks, sediakan alternatif berupa teks panjang agar pengguna dapat menggali lebih dalam konten tersebut sesuai keinginan mereka.

Kasus di mana deskripsi panjang diperlukan untuk menjelaskan konten-non teks yang lebih panjang dan kompleks:

Alternatif berupa teks panjang ditujukan untuk benar-benar menjelaskan secara detail apa yang disampaikan oleh konten dan bagaimana konten tersebut terkait dengan konteks yang lebih besar. Informasi yang disediakan dalam alternatif berupa teks panjang biasanya berfokus pada detail, di mana setiap bagian atau komponen dari konten-non teks dijelaskan sepenuhnya.

Alternatif berupa teks panjang sebaiknya dapat menggantikan konten-non teks tersebut. Artinya, jika konten-non teks itu dihapus dan hanya disisakan alternatif berupa teks singkat dan panjangnya, informasi dan fungsinya tetap tersampaikan.

Saat menulis deskripsi panjang, tanyakan pada diri sendiri:

  • Informasi apa yang sedang disajikan?
  • Fungsinya apa di sini?

Namun, jelaskan secara detail, termasuk semua informasi visual, audio, dan konteksnya.

Menautkan ke alternatif berupa teks panjang (jika diperlukan)

Saat menyediakan alternatif berupa teks panjang, tidak selalu pas untuk menambahkannya langsung di sebelah konten-non teks karena bisa terlalu memakan ruang di halaman. Dalam kasus seperti ini, kamu bisa menempatkan deskripsi panjang di lokasi lain, asalkan tautan ke deskripsi tersebut:

  • Dicantumkan tepat di sebelah konten-non teks yang dideskripsikan, atau
  • Dicantumkan di dalam deskripsi singkat dari konten-non teks tersebut

Deskripsi singkat untuk konten kompleks

Saat menggunakan alternatif berupa teks panjang, penting juga untuk menyediakan deskripsi singkat atau alternatif berupa teks singkat untuk meringkas atau menyampaikan inti dari konten tersebut, selain deskripsi teks panjang.

Sebagai contoh, sebuah infografis besar mungkin berisi banyak informasi dan grafis yang membutuhkan deskripsi teks panjang untuk menjelaskan maknanya secara utuh. Dalam kasus ini, pengguna juga perlu diberikan deskripsi singkat tambahan untuk merangkum tujuannya, seperti “Infografis tentang Manfaat Rehabilitasi Aardvark.”

Saat menulis deskripsi singkat, tanyakan pada diri sendiri:

  • Informasi apa yang disampaikan?
  • Fungsinya apa di sini?

Infografis dan tautan yang dijelaskan pada caption

Gambar dengan alternatif berupa teks singkat: 'Infografis mengenai pertumbuhan si Oyen dalam setahun terakhir'. Tautan ke deskripsi lengkapnya dicantumkan di bawah gambar: 'Buka laporan pertumbuhan selengkapnya (PDF)'

Kesimpulan

Wow, banyak banget yang dibahas, ya? Meskipun WCAG 1.1.1 adalah kriteria yang lebih rumit untuk diterapkan, tapi benar-benar sepadan dan akan membuat perbedaan besar untuk konten-non teks: memastikan konten-non teks bisa diakses oleh semua orang, apa pun jenis disabilitasnya.