WCAG — apa itu, Web Content Accessibility Guidelines dan tingkat AA

Apa itu WCAG?

WCAG (Web Content Accessibility Guidelines) — adalah seperangkat rekomendasi untuk memastikan aksesibilitas konten web bagi penyandang disabilitas. Standar ini dikembangkan oleh W3C Web Accessibility Initiative (WAI) sejak 1999. WCAG mencakup tunanetra dan tunanetra sebagian, tunarungu dan gangguan pendengaran, orang dengan keterbatasan mobilitas, bicara dan kognitif, serta pengguna lanjut usia dengan perubahan terkait usia.

Versi pertama WCAG 1.0 dirilis pada tahun 1999 dan berisi 14 prinsip panduan. WCAG 2.0 (2008) menjadi netral secara teknologi, berlaku untuk HTML, PDF, multimedia dan aplikasi mobile. WCAG 2.1 (2018) menambahkan kriteria untuk perangkat mobile dan input sentuh. WCAG 2.2 (2023) — versi saat ini dengan kriteria baru untuk animasi dan fokus. WCAG bukanlah hukum, tetapi banyak negara merujuk padanya dalam perundang-undangan mereka.

GOST R 52872-2019 di Rusia, European Accessibility Act di UE dan Section 508 di AS — semuanya memerlukan kepatuhan WCAG AA. Untuk situs korporat dan pemerintah, WCAG AA adalah standar wajib, ketidakpatuhan yang menyebabkan tuntutan hukum. Menurut data UsableNet (2024), di AS telah diajukan lebih dari 12.000 gugatan tentang ketidakaksesibilitas situs web.

Versi WCAG: perbandingan

Konsekuensi hukum ketidakpatuhan

Ketidakpatuhan terhadap WCAG membawa risiko serius. Pada tahun 2025, European Accessibility Act (EAA) mulai berlaku, mensyaratkan WCAG 2.1 AA untuk semua situs web publik dan aplikasi mobile di UE. Denda mencapai 5% dari omset tahunan perusahaan. Rata-rata jumlah penyelesaian gugatan di AS adalah $25.000–$50.000. Audit aksesibilitas harus dilakukan di setiap tahap pengembangan, bukan hanya sebelum rilis.

Empat prinsip WCAG: POUR

POUR — akronim dari empat prinsip WCAG: Perceivable (dapat dipersepsi), Operable (dapat dioperasikan), Understandable (dapat dipahami), Robust (kuat). Setiap prinsip berisi pedoman, dan pedoman berisi kriteria sukses yang dapat diuji. Secara total, WCAG 2.2 berisi 13 pedoman dan 86 kriteria sukses. Setiap kriteria memiliki tingkat A, AA atau AAA.

Perceivable — Dapat dipersepsi

Prinsip Perceivable mensyaratkan bahwa konten disajikan dalam bentuk yang dapat dipersepsi oleh pengguna. Pedoman: 1.1 Text Alternatives (alternatif teks), 1.2 Time-based Media (teks tertutup, transkripsi), 1.3 Adaptable (konten tanpa kehilangan saat perubahan format), 1.4 Distinguishable (kontras 4.5:1, warna, suara). Kriteria kunci 1.4.3 Contrast Minimum (AA) — yang paling sering dilanggar: 86% halaman tidak memenuhinya menurut data WebAIM.

Operable — Dapat dioperasikan

Prinsip Operable mensyaratkan pengoperasian antarmuka. Pedoman: 2.1 Keyboard Accessible, 2.2 Enough Time, 2.3 Seizures, 2.4 Navigable, 2.5 Input Modalities. Kriteria 2.1.1 Keyboard (A) — salah satu yang paling kritis: semua fungsi harus dapat diakses dari keyboard tanpa mouse. Jendela modal yang hanya menutup dengan klik, menu dropdown tanpa navigasi keyboard — pelanggaran umum.

Understandable — Dapat dipahami

Prinsip Understandable mensyaratkan konten dan antarmuka yang dapat dipahami. Pedoman: 3.1 Readable, 3.2 Predictable, 3.3 Input Assistance. Kriteria 3.3.4 Error Prevention sangat penting untuk aplikasi keuangan dan medis: pencegahan konsekuensi serius dari kesalahan input. Kriteria 3.2.6 Consistent Help (baru di WCAG 2.2) mensyaratkan tombol bantuan berada di tempat yang sama.

Robust — Kuat

Prinsip Robust mensyaratkan kompatibilitas dengan teknologi pendukung. Pedoman 4.1 Compatible dengan kriteria kunci 4.1.2 Name, Role, Value (A): setiap komponen UI harus memiliki nama, peran, dan status yang dapat ditentukan secara terprogram. Atribut ARIA (role, aria-label, aria-expanded) — alat utama. Tanpa mereka, pembaca layar tidak dapat menentukan apakah suatu elemen adalah tombol, tautan, atau tab.

Tabel prinsip WCAG

Tingkat kepatuhan WCAG: A, AA, AAA

WCAG mendefinisikan tiga tingkat: A (minimal), AA (standar) dan AAA (maksimal). Tingkat A — minimum wajib: tanpanya konten tidak dapat diakses untuk beberapa kategori pengguna. AA menghilangkan hambatan aksesibilitas utama. AAA — standar tertinggi, tetapi tidak dapat dicapai untuk semua konten (misalnya, beberapa bahasa isyarat atau transkripsi audio tidak selalu layak dilakukan).

Tingkat A (30 kriteria): text alternatives, pengoperasian keyboard, waktu yang cukup, tidak ada kedipan di atas 3 Hz. Tingkat AA (+24 kriteria): contrast ratio 4.5:1, teks tertutup untuk video, resize teks hingga 200%, fokus keyboard yang jelas. Tingkat AAA (+32 kriteria): contrast ratio 7:1, bahasa isyarat, menonaktifkan animasi (2.3.3), transkripsi audio. Untuk situs pemerintah, AA sudah cukup.

Proses audit WCAG

Audit aksesibilitas menurut WCAG meliputi: pengujian otomatis (axe DevTools, WAVE, Lighthouse — menemukan 30–40% kesalahan), pengujian manual keyboard dan pembaca layar (VoiceOver, TalkBack, NVDA), audit ahli untuk kriteria kompleks dan pengujian pengguna dengan penyandang disabilitas. Laporan audit harus berisi tingkat kepatuhan dan daftar ketidakpatuhan untuk setiap kriteria.

Apa yang baru di WCAG 2.2

WCAG 2.2 menambahkan 9 kriteria baru. Yang utama: 2.4.11 Focus Appearance (AA) — indikator fokus >= 2px dengan kontras 3:1, 2.5.8 Target Size Minimum (AA) — target sentuh minimal 24x24 piksel, 3.3.7 Accessible Authentication (AA) — autentikasi tanpa CAPTCHA. Kriteria 2.3.3 Animation from Interactions (AAA) — animasi yang dapat dimatikan atau tidak lebih dari 5 detik.

Focus Appearance — perubahan terpenting. Sebelumnya, outline: none tanpa pengganti adalah pelanggaran, tetapi tidak ada persyaratan yang jelas. WCAG 2.2 menetapkan: ketebalan >= 2px, kontras 3:1 dengan latar belakang, luas indikator setidaknya seluas elemen. Untuk tombol khusus dengan border-radius, gunakan box-shadow daripada outline.

Focus Appearance di CSS

/* WCAG 2.2 Focus Appearance (2.4.11 AA) */
:focus-visible {
    outline: 3px solid #0066CC;
    outline-offset: 2px;
}

.button:focus-visible {
    outline: none;
    box-shadow:
        0 0 0 3px #FFFFFF,
        0 0 0 6px #0066CC;
}

@media (prefers-color-scheme: dark) {
    :focus-visible { outline-color: #66B2FF; }
}

@media (prefers-contrast: more) {
    :focus-visible { outline: 4px solid #000; outline-offset: 3px; }
}

Styling :focus-visible memastikan kepatuhan dengan kriteria Focus Appearance. Alternatif melalui box-shadow cocok untuk elemen dengan border-radius. Tema gelap dan High Contrast menyesuaikan warna fokus.

Accessible Authentication

Kriteria 3.3.7 Accessible Authentication (AA) — salah satu inovasi yang paling banyak dibahas. CAPTCHA dengan pengenalan objek, teka-teki, menyeret slider — sekarang merupakan pelanggaran jika tidak ada alternatif. Metode yang diizinkan: OTP melalui email/SMS, biometrik (Face ID, Touch ID), kode QR, Magic link. Ini tidak hanya memudahkan hidup penyandang gangguan kognitif, tetapi juga semua pengguna.

WCAG untuk aplikasi mobile

WCAG berlaku untuk aplikasi native iOS dan Android. Empat prinsip POUR sepenuhnya mencakup antarmuka mobile. Kriteria spesifik: 2.5.1 Pointer Gestures (gestur tanpa presisi tinggi), 2.5.2 Pointer Cancellation (membatalkan sentuhan tidak sengaja), 2.5.3 Label in Name (teks tombol sesuai dengan label aksesibilitas). Untuk iOS digunakan UIKit/UIAccessibility, untuk Android — AccessibilityService dan ContentDescription.

Pelanggaran paling umum di aplikasi mobile: 1.1.1 Non-text Content — ikon tanpa contentDescription, 2.4.3 Focus Order — urutan navigasi salah, 2.5.8 Target Size — tombol lebih kecil dari 24x24dp, 1.4.3 Contrast — teks pada gambar latar belakang. iOS menyediakan Accessibility Inspector di Xcode, Android — Accessibility Scanner untuk audit otomatis.

Kode SwiftUI sesuai WCAG

import SwiftUI

struct AccessibleButton: View {
    let action: () -> Void
    let title: String
    let icon: String

    var body: some View {
        Button(action: action) {
            HStack {
                Image(systemName: icon)
                Text(title)
            }
            .padding(16)
            .background(Color.blue)
            .foregroundColor(.white)
            .cornerRadius(12)
            .frame(minWidth: 48, minHeight: 48)
        }
        .accessibilityLabel(title)
        .accessibilityHint("Klik untuk tindakan")
        .accessibilityAddTraits(.isButton)
    }
}

struct AccessibleForm: View {
    @State private var email = ""

    var body: some View {
        VStack(spacing: 16) {
            VStack(alignment: .leading) {
                Text("Email")
                TextField("Masukkan email", text: $email)
                    .textContentType(.emailAddress)
                    .keyboardType(.emailAddress)
                    .autocapitalization(.none)
                    .accessibilityLabel("Kolom input email")
                    .accessibilityHint("Masukkan alamat email")
            }
            AccessibleButton(
                action: { },
                title: "Kirim",
                icon: "paperplane.fill"
            )
        }
        .padding()
    }
}

Komponen SwiftUI dengan accessibilityLabel, accessibilityHint dan minWidth/minHeight >= 48pt memastikan kepatuhan dengan WCAG 2.5.8 (Target Size) dan 2.5.3 (Label in Name). Gunakan Xcode Accessibility Inspector untuk memeriksa fokus VoiceOver, urutan navigasi, dan ukuran touch targets. Persyaratan serupa berlaku untuk Jetpack Compose melalui Modifier.semantics.