Kriteria Keberhasilan WCAG

Pastikan semua pengguna bisa mengakses dan memahami konten sesuai kemampuan mereka.

Konten yang hanya berisi audio harus disampaikan dalam bentuk teks. Konten video tanpa trek audio juga harus dijelaskan dalam bentuk teks, tetapi dapat juga dijelaskan dengan audio.

Audio dalam video harus diberi caption.

Segala hal penting di video yang tidak terdengar harus dijelaskan lewat caption, audio tambahan, atau teks seperti naskah.

Jika video siaran langsung ada suaranya, caption harus disediakan saat itu juga.

Bagian penting dalam video, seperti aksi atau deskripsi, harus dijelaskan lewat caption atau suara tambahan.

Semua video yang direkam sebelumnya harus memiliki interpretasi bahasa isyarat.

Terkadang video dijeda untuk memberikan waktu yang cukup agar deskripsi audio dapat disampaikan dengan baik.

Sebuah transkripsi berbasis teks dari video disediakan, di samping caption tertutup dan deskripsi audio.

Pemberian caption langsung disediakan untuk audio siaran langsung.

Informasi atau relasi antara konten yang bersifat visual juga disampaikan dengan kode, melalui HTML atau ARIA.

Tampilan visual dari konten sesuai dengan apa yang dibacakan oleh screen reader.

Tidak ada yang hanya merujuk pada warna, ukuran, posisi, bentuk, dan sebagainya.

Memutar perangkat dari mode potret ke mode lanskap tidak mengganggu keterbacaan dan kegunaan konten.

Tujuan dari kolom formulir dapat diidentifikasi oleh browser, sehingga saran pengisian otomatis dapat ditawarkan dalam bentuk dropdown.

Wilayah landmark dan semantik personalisasi digunakan, memungkinkan alat browser untuk menghapus konten yang tidak esensial atau menambahkan ikon identifikasi pada elemen-elemen tertentu di halaman.

Warna tidak boleh menjadi satu-satunya cara untuk menyampaikan makna.

Jika ada audio yang diputar otomatis lebih dari 3 detik, pengguna harus bisa mengecilkan volumenya atau menghentikannya.

Teks harus memiliki rasio kontras minimal 4,5:1 terhadap latar belakangnya. Untuk teks yang besar (di atas 24 piksel) atau tebal dan di atas 19 piksel, cukup dengan rasio 3:1.

Pengguna bisa memperbesar teks hingga 200% tanpa kehilangan konten atau fungsi, kecuali untuk teks dalam gambar dan teks caption.

Teks sebaiknya disajikan sebagai teks sungguhan, bukan sebagai gambar yang berisi teks.

Teks memiliki rasio kontras minimal 7:1. Untuk teks besar (lebih dari 24 piksel atau tebal dan lebih dari 19 piksel), rasio kontras minimalnya adalah 4.5:1.

Untuk konten audio yang berisi suara manusia, suara latar seperti musik atau efek harus 20 desibel lebih pelan dari suara utama agar ucapan tetap mudah didengar.

Untuk blok teks, teks sebaiknya tidak diratakan kiri-kanan (justified), jarak antarbaris minimal 1.5, lebar teks tidak lebih dari 80 karakter per baris, dan pengguna bisa mengatur warna teks serta latarnya sendiri.

Teks harus berupa teks yang sesungguhnya; tidak boleh menggunakan gambar teks.

Konten tetap dapat dibaca dan digunakan tanpa memerlukan gulir horizontal saat dilihat pada lebar 320 piksel CSS (biasanya setara dengan tampilan layar ponsel) dengan menyesuaikan tata letak dan menyusun ulang teks.

Komponen yang dapat digunakan seperti kolom isian dan tombol, serta grafik seperti diagram lingkaran dan grafik garis, harus memiliki rasio kontras minimal 3 banding 1 agar tetap mudah terlihat.

Pengguna bisa menambah jarak antar huruf, kata, baris, dan paragraf tanpa membuat konten terpotong atau tampilan halaman berantakan.

Tooltip atau pop-up informasi bisa ditutup (misalnya dengan tombol Esc), teksnya bisa disalin, dan tidak hilang dengan sendirinya dalam waktu tertentu.

Pengguna dapat beraktivitas hanya dengan menggunakan keyboard.

Jangan sampai pengguna masuk ke modal dengan keyboard tapi tidak bisa kembali ke tempat semula.

Pengguna dapat menavigasi dan berinteraksi dengan halaman hanya menggunakan keyboard.

Shortcut keyboard harus menggunakan tombol modifier, seperti ctrl, command, atau alt/option.

Batas waktu sebaiknya dihindari kecuali jika batas waktu tersebut dapat diperpanjang.

Konten yang bergerak/beranimasi secara otomatis dan berlangsung lebih dari 5 detik harus dapat dijeda, dihentikan, atau disembunyikan.

Kecuali untuk siaran langsung atau sesuatu yang berlangsung secara real-time, tidak ada batasan waktu yang diberikan kepada pengguna.

Pop-up, notifikasi, dan gangguan lainnya dapat dimatikan.

Jika sesi yang sudah masuk habis di tengah tugas, data yang dimasukkan setelah sesi habis tetap disimpan, sehingga pengguna tidak perlu memasukkannya lagi saat masuk kembali.

Peringatan ditampilkan jika sesi yang sudah masuk akan segera kedaluwarsa.

Konten yang berkejap tidak boleh melebihi tiga kejapan per detik, kecuali jika berada dalam batas aman.

Konten yang berkejap tidak boleh melebihi tiga kejapan per detik, tanpa pengecualian.

Animasi yang dipicu oleh interaksi, seperti menekan tombol, harus dapat dimatikan.

Tautan 'lewati' tersedia untuk pengguna keyboard agar dapat melewati navigasi.

Setiap halaman memiliki elemen <title> yang unik yang menggambarkan apa yang ada di halaman tersebut.

Ketika pengguna keyboard menavigasi halaman dengan menekan tombol tab, urutan fokus harus mengikuti arah baca yang logis.

Tujuan dari sebuah tautan harus jelas, baik dari teks tautan itu sendiri maupun konteks kalimat di sekitarnya.

Navigasi header bukan satu-satunya cara untuk menjelajahi sebuah situs web; ada cara lain, seperti tautan di halaman, peta situs, atau pencarian di seluruh situs web.

Heading menjelaskan isi yang terkandung di dalamnya, label formulir dengan jelas menggambarkan informasi apa yang diperlukan, dan tombol memberi tahu pengguna apa yang akan terjadi ketika tombol tersebut ditekan.

Terdapat penataan fokus keyboard yang terlihat untuk menunjukkan elemen mana yang sedang difokuskan.

Pengguna diberi informasi yang jelas tentang posisi mereka dalam satu set halaman.

Tujuan tautan dapat dipahami hanya dari teks tautan itu sendiri, tanpa perlu membaca teks di sekitarnya.

Heading digunakan untuk mengelompokkan bagian-bagian yang berbeda di halaman.

Fokus keyboard tidak sepenuhnya tertutupi oleh konten lain.

Fokus keyboard selalu terlihat sepenuhnya setiap saat.

Indikator fokus memiliki ketebalan setidaknya 2px dan memiliki rasio kontras 3:1 terhadap warna yang ada di sekitarnya.

Semua tindakan yang dilakukan dengan gerakan (seperti swiping, pinching, dan sebagainya) atau menggambar, juga harus bisa dilakukan dengan tombol atau beberapa tombol.

Tindakan (seperti menekan tombol) tidak boleh dipicu saat mouse ditekan ke bawah, melainkan saat mouse dilepas ke atas.

Teks yang terlihat dari isian formulir, tombol, atau tautan harus cocok dengan teks dalam kode dasarnya.

Tidak boleh bergantung pada gerakan perangkat, seperti menggoyang atau memiringkan, untuk menjalankan suatu aksi.

Semua elemen yang bisa diklik harus berukuran minimal 44x44 piksel, kecuali untuk tautan di dalam kalimat yang boleh mengikuti ukuran teksnya.

Pengguna harus bisa dengan mudah berganti-ganti antara menggunakan mouse, layar sentuh, keyboard, atau perangkat input lainnya.

Interaksi seperti drag untuk menyusun ulang elemen harus tersedia juga melalui metode non-seret seperti tombol, agar dapat diakses semua pengguna.

Elemen yang bisa diklik harus berukuran minimal 24 kali 24 piksel, kecuali untuk tautan di dalam teks.

Elemen <html> memiliki atribut lang yang sesuai dengan bahasa utama yang digunakan di halaman tersebut.

Setiap bagian halaman yang menggunakan bahasa berbeda dari bahasa utama halaman harus diberi atribut lang yang sesuai. Nama dan frasa yang berasal dari bahasa lain, seperti “Déjà vu” dalam bahasa Inggris, tidak perlu diberi tanda khusus.

Jargon dan bahasa kiasan sebaiknya dihindari, atau dijelaskan saat pertama kali digunakan di halaman.

Singkatan dan akronim sebaiknya dihindari; jika digunakan, definisinya harus disediakan di setiap halaman tempat istilah tersebut muncul.

Penulisan dijaga agar tetap sederhana dan dapat dipahami oleh pembaca dengan keterampilan membaca setara anak kelas 6 SD hingga 3 SMP.

Jika sebuah kata memiliki lebih dari satu pelafalan dengan makna yang berbeda, arti yang dimaksud harus dijelaskan untuk menghindari ambiguitas.

Tidak ada perubahan yang tidak terduga saat suatu elemen di halaman menerima fokus keyboard, seperti pada elemen <button>.

Tidak boleh terjadi perubahan tak terduga saat pengguna memilih nilai input, seperti memilih opsi dari menu dropdown.

Navigasi harus konsisten dari halaman ke halaman.

Hal-hal yang memiliki fungsi tertentu harus selalu terlihat dan berfungsi dengan cara yang sama.

Tidak boleh ada perubahan pada antarmuka pengguna yang terjadi tanpa permintaan eksplisit dari pengguna.

Bantuan seperti chat, kontak, atau panduan harus muncul di tempat yang konsisten di seluruh halaman.

Kesalahan harus ditunjukkan dan dijelaskan dengan jelas kepada pengguna.

Berikan bantuan yang memadai untuk mencegah kesalahan saat mengisi formulir. Label biasanya cukup, tetapi instruksi tambahan bisa dibutuhkan jika konteksnya kurang jelas.

Saran yang membantu harus diberikan untuk membantu pengguna memperbaiki kesalahan mereka.

Formulir penting seperti perjanjian legal atau pengiriman informasi finansial memberikan kesempatan untuk memeriksa informasi yang dimasukkan sebelum dikirim.

Jika label saja tidak cukup menjelaskan apa yang diminta, berikan teks petunjuk atau penjelasan tambahan di dekatnya.

Setelah memasukkan informasi apapun, pengguna diberi kesempatan untuk memeriksa kembali sebelum mengirimkan.

Pengguna tidak boleh diminta untuk memasukkan informasi yang sudah diberikan sebelumnya, kecuali jika diperlukan.

Autentikasi harus dapat dilakukan tanpa tantangan kognitif seperti menghafal atau memecahkan teka-teki, kecuali tersedia alternatif yang setara.

Autentikasi harus dapat dilakukan tanpa memerlukan uji fungsi kognitif, seperti mengingat, menghitung, atau menafsirkan.

Markup telah divalidasi dan tidak ada kesalahan, seperti ID yang duplikat, tag yang hilang, dan child-element yang tidak valid.

Setiap elemen interaktif seperti kontrol formulir, tautan, heading, dan landmark harus memiliki makna semantik yang benar serta nama yang dapat diakses oleh teknologi bantu.

Pesan seperti kesalahan isian atau notifikasi keberhasilan harus dapat dikenali oleh teknologi bantu seperti pembaca layar.