Checklist WCAG 2.2 AA untuk aksesibilitas toko online

Checklist WCAG 2.2 AA toko Shopify dan WooCommerce per jenis halaman: alt text, kontras, label, keyboard, fokus, ukuran target, dan kriteria baru 2.2.

Tim Redaksi FixReports10 menit baca

Checklist WCAG 2.2 AA untuk toko online dimulai dari kegagalan yang ditemukan di sebagian besar template toko: alt text yang hilang, teks dengan kontras rendah, link dan tombol tanpa nama aksesibel (accessible name), kolom formulir tanpa label, jebakan keyboard (keyboard trap), dan fokus yang tidak terlihat. WCAG 2.2 lalu menambahkan pemeriksaan AA yang sangat berdampak bagi toko online: elemen yang sedang difokus tertutup bar sticky (2.4.11), target sentuh yang lebih kecil dari 24 × 24 piksel CSS (2.5.8), dan proses login yang mengharuskan orang mengingat atau mengetik ulang sesuatu (3.3.8). Uji setiap jenis halaman (beranda, koleksi, produk, keranjang) dengan keyboard dan alat pemeriksa otomatis, lalu perbaiki template tema agar setiap halaman ikut mewarisi perbaikannya.

Poin penting

  • WCAG 2.2 menjadi Rekomendasi W3C pada 5 Oktober 2023. Edisi terbarunya bertanggal 12 Desember 2024 dan telah disetujui sebagai ISO/IEC 40500:2025 (terbuka di tab baru).
  • Dalam WebAIM Million 2026 (terbuka di tab baru) (data Februari 2026), 95,9% halaman beranda dari satu juta situs teratas memiliki kegagalan WCAG 2 yang terdeteksi.
  • Enam kegagalan yang paling umum adalah teks berkontras rendah (83,9% halaman), alt text yang hilang (53,1%), label formulir yang hilang (51%), link kosong (46,3%), tombol kosong (30,6%), dan bahasa halaman yang tidak ditentukan (13,5%).
  • Sebanyak 42.516 halaman beranda Shopify dalam sampel tersebut rata-rata memiliki 75,1 error yang terdeteksi, dibandingkan 56,1 untuk semua halaman.
  • WCAG 2.2 menambahkan empat kriteria AA (2.4.11, 2.5.7, 2.5.8, 3.3.8) dan dua kriteria Level A (3.2.6, 3.3.7), serta menghapus 4.1.1 Parsing.

Apa yang berubah di WCAG 2.2 untuk toko online?

WCAG 2.2 menambahkan sembilan kriteria keberhasilan (success criteria), enam di antaranya pada Level A atau AA, dan menghapus 4.1.1 Parsing karena sudah usang (W3C WAI (terbuka di tab baru)).

Kriteria baruLevelArtinya bagi toko online
2.4.11 Focus Not Obscured (Minimum)AALink atau tombol yang sedang difokus tidak boleh tertutup sepenuhnya oleh header sticky, bar "tambah ke keranjang" yang sticky, banner cookie, atau widget chat
2.5.7 Dragging MovementsAAApa pun yang memerlukan gerakan seret, misalnya slider rentang harga, harus punya alternatif dengan satu ketukan
2.5.8 Target Size (Minimum)AATarget klik dan sentuh berukuran minimal 24 × 24 piksel CSS, atau diberi jarak sehingga lingkaran 24 px di sekitar setiap target tidak menyentuh target di sebelahnya
3.2.6 Consistent HelpALink bantuan, informasi kontak, atau chat muncul dalam urutan relatif yang sama di setiap halaman
3.3.7 Redundant EntryAJangan meminta informasi yang sama dua kali dalam satu proses; isi otomatis atau biarkan orang memilihnya
3.3.8 Accessible Authentication (Minimum)AAProses masuk tidak boleh bergantung pada menghafal atau menyalin ulang, kecuali ada alternatif atau alat bantu seperti fitur tempel dan pengelola kata sandi

Tiga kriteria lainnya (2.4.12, 2.4.13, dan 3.3.9) berada di Level AAA. Karena 2.2 mempertahankan setiap kriteria 2.1 kecuali 4.1.1, memenuhi 2.2 AA juga berarti memenuhi 2.1 AA.

Kriteria WCAG mana yang paling sering gagal di template toko online?

Beberapa kriteria yang sama selalu muncul setiap tahun: kontras, alt text, label formulir, serta nama untuk link dan tombol, ditambah masalah keyboard dan fokus yang hanya sebagian terdeteksi oleh alat otomatis.

KriteriaYang gagal di toko onlineCara memperbaikinya
1.1.1 Non-text Content (A)Gambar produk tanpa alt text atau dengan nama file sebagai alt text; gambar bertautan tanpa teksDeskripsikan produk yang ditampilkan (warna, gaya, sudut pandang). Gunakan alt="" hanya untuk dekorasi. Tema Shopify sebaiknya menampilkan image.alt
1.4.3 Contrast (Minimum) (AA)Teks isi berwarna abu-abu muda, teks placeholder, badge diskon, teks di atas gambar hero4,5:1 untuk teks normal, 3:1 untuk teks besar (sekitar 24 px, atau 18,5 px tebal) (W3C (terbuka di tab baru))
2.4.4 Link Purpose (A), 4.1.2 Name, Role, Value (A)Link keranjang, pencarian, dan media sosial yang hanya berupa ikon; panah slider; tombol tutup "X" tanpa namaBeri setiap kontrol teks yang terlihat atau aria-label, misalnya "Keranjang, 2 item"
1.3.1 Info and Relationships (A), 3.3.2 Labels or Instructions (A)Kolom newsletter dan pencarian yang hanya berisi teks placeholder; input jumlah tanpa labelGunakan <label for> yang cocok dengan id input; kelompokkan swatch berbentuk radio dalam fieldset dengan legend
2.1.1 Keyboard (A), 2.1.2 No Keyboard Trap (A)Menu yang hanya berfungsi saat hover, swatch yang dibuat dari div, popup yang tidak bisa ditutup dengan keyboardGunakan elemen button dan a yang sebenarnya; tombol Escape menutup overlay dan mengembalikan fokus
2.4.7 Focus Visible (AA)outline: none di CSS temaTambahkan gaya :focus-visible yang kontras dengan latar belakang

WebAIM juga menemukan bahwa satu dari empat gambar bertautan tidak memiliki alt text, dan 45% gambar tanpa alt text adalah link (WebAIM (terbuka di tab baru)). Di grid koleksi, biasanya itu adalah link pada gambar produk.

Apa yang perlu diperiksa di halaman beranda?

Periksa header, bagian hero, dan apa pun yang muncul sebagai popup, karena semua itulah yang pertama kali ditemui setiap pengunjung.

  • Skip link. Link "Langsung ke konten" (Skip to content) sebagai elemen pertama yang bisa difokus (2.4.1 Bypass Blocks, A).
  • Ikon header. Ikon pencarian, akun, dan keranjang memiliki nama aksesibel, dan nama keranjang mencakup jumlah item.
  • Menu. Terbuka dengan Enter atau Spasi, sub-item bisa dijangkau dengan Tab, tertutup dengan Escape, dan tidak bergantung pada hover (2.1.1). Persyaratan Theme Store (terbuka di tab baru) Shopify menyatakan bahwa semua bagian halaman, termasuk menu dropdown, harus bisa diakses dengan keyboard.
  • Slider hero. Jika slide bergerak otomatis lebih dari lima detik, sediakan kontrol jeda (2.2.2 Pause, Stop, Hide, A).
  • Bar pengumuman dan teks di atas gambar. Ukur kontrasnya; warna merek sering kali tidak mencapai 4,5:1.
  • Popup dan banner cookie. Pindahkan fokus ke dalam popup, beri label pada kolom email, izinkan tombol Escape untuk menutupnya, dan pastikan banner sticky tidak pernah menutupi elemen yang difokus sepenuhnya (2.4.11). W3C menyebut properti CSS scroll-padding sebagai salah satu cara agar elemen yang difokus tidak tertutup bar sticky (W3C (terbuka di tab baru)).
  • Bahasa halaman. Elemen html memiliki atribut lang yang benar (3.1.1 Language of Page, A).

Apa yang perlu diperiksa di halaman koleksi?

Halaman koleksi biasanya gagal pada kartu produk, filter, dan swatch.

  • Kartu produk. Link gambar memiliki alt text, atau gambar disembunyikan dari teknologi bantu dan link judul membawa nama produknya.
  • Filter. Setiap checkbox memiliki label dan setiap grup memiliki heading atau legend. Panel filter bisa dibuka, digunakan, dan ditutup dengan keyboard. Umumkan jumlah hasil yang diperbarui sebagai pesan status (4.1.3 Status Messages, AA).
  • Slider harga. Tambahkan input angka minimum dan maksimum agar filter berfungsi tanpa gerakan seret (2.5.7) dan tanpa mouse (2.1.1).
  • Swatch warna. Setiap swatch memiliki nama dalam bentuk teks, dan status "stok habis" tidak hanya ditunjukkan dengan warna (1.4.1 Use of Color, A). Swatch berukuran minimal 24 × 24 piksel CSS atau memenuhi aturan jarak (2.5.8).
  • Pengurutan dan paginasi. Dropdown pengurutan memiliki label; link halaman dan tombol "muat lebih banyak" memenuhi ukuran target.

Apa yang perlu diperiksa di halaman produk?

Halaman produk menentukan keputusan membeli, jadi uji setiap kontrol mulai dari foto hingga tombol tambah ke keranjang.

  • Galeri. Setiap gambar memiliki alt text, thumbnail berupa tombol dengan nama seperti "Tampilkan gambar 2", dan panah berfungsi tanpa gerakan seret (2.5.7).
  • Pemilih varian. Pilihan ukuran dan warna berada dalam grup berlabel (1.3.1), pilihan yang sedang dipilih terbaca oleh pembaca layar (4.1.2), dan ukuran yang tidak tersedia ditandai dengan teks.
  • Jumlah. Input memiliki label, dan tombol minus dan plus memiliki nama serta memenuhi 2.5.8. Theme Store Shopify kini mewajibkan target sentuh minimal 24 × 24 piksel CSS, dan praktik terbaik aksesibilitas (terbuka di tab baru) Shopify merekomendasikan 44 × 44 untuk kontrol utama.
  • Tambah ke keranjang. Pesan berhasil dan pesan error diumumkan (4.1.3). Gugatan FTC terhadap sebuah vendor overlay aksesibilitas menyebut sebuah situs yang pembaca layarnya tidak mengumumkan bahwa item telah ditambahkan ke keranjang, dan grafik rating bintang 5 yang dibacakan sebagai tombol "previous" (gugatan FTC (terbuka di tab baru)).
  • Rating, tab, dan akordeon. Rating memiliki teks seperti "4,5 dari 5 bintang". Akordeon memberi tahu apakah sedang terbuka atau tertutup.
  • Bar tambah ke keranjang yang sticky. Bar ini tidak boleh menutupi elemen yang difokus sepenuhnya saat pengguna keyboard berpindah ke bawah halaman dengan Tab (2.4.11).
  • Video. Video produk yang berisi ucapan memiliki teks (caption) (1.2.2 Captions (Prerecorded), A).

Apa yang perlu diperiksa di keranjang dan saat login?

Keranjang adalah halaman terakhir yang sepenuhnya dikendalikan oleh sebagian besar tema, jadi uji hingga tombol checkout, lalu pastikan login akun tidak bergantung pada ingatan atau mengetik ulang.

  • Panel keranjang (cart drawer). Fokus berpindah ke dalam panel, tetap berada di sana selama panel terbuka, dan kembali ke tombol keranjang ketika panel ditutup dengan Escape, seperti yang dijelaskan dalam praktik terbaik Shopify.
  • Item di keranjang. Setiap input jumlah diberi label dengan nama produknya, dan setiap tombol hapus menyebutkan apa yang dihapus, misalnya "Hapus Kemeja linen, ukuran M".
  • Kolom diskon dan catatan. Berlabel, dengan error yang dijelaskan dalam teks (3.3.1 Error Identification, A).
  • Tombol checkout. Bisa dijangkau dengan Tab, fokusnya terlihat jelas, dan tidak tersembunyi di balik elemen sticky.
  • Login (3.3.8). Akun pelanggan Shopify secara default menggunakan login tanpa kata sandi dengan kode sekali pakai (terbuka di tab baru). W3C menyatakan bahwa kode harus bisa ditempel atau diisi otomatis, dan memblokir fitur tempel atau pengelola kata sandi berarti gagal memenuhi kriteria ini; CAPTCHA pengenalan objek diperbolehkan di level AA, tetapi CAPTCHA berupa teka-teki atau soal matematika memerlukan metode lain (W3C (terbuka di tab baru)).

Perbedaan platform penting di sini. Di Shopify, checkout.liquid tidak lagi didukung (terbuka di tab baru) untuk langkah informasi, pengiriman, dan pembayaran, jadi sebagian besar markup checkout adalah milik Shopify, bukan milik tema Anda; uji aplikasi checkout dan kustomisasi yang Anda tambahkan. Di WooCommerce, checkout adalah sebuah halaman di situs WordPress Anda. WooCommerce menyatakan bahwa front end intinya secara substansial sesuai dengan WCAG 2.2 AA (pernyataan terakhir diperbarui 1 April 2025), tetapi tema dan plugin Anda tetap bisa merusaknya (WooCommerce (terbuka di tab baru)).

Bagaimana cara menguji toko berdasarkan checklist ini?

Gabungkan pemindaian otomatis dengan simulasi pembelian hanya dengan keyboard dan pemeriksaan singkat dengan pembaca layar, di setiap jenis halaman.

  1. Pemindaian otomatis. Alat seperti axe, WAVE, atau Lighthouse mendeteksi masalah kontras, alt text, label, dan link kosong. Theme Store Shopify meminta skor aksesibilitas Lighthouse rata-rata minimal 90 di halaman beranda, koleksi, dan produk. Itu adalah batas minimum, bukan bukti kesesuaian: W3C menyatakan bahwa alat tidak bisa menentukan aksesibilitas dengan sendirinya (terbuka di tab baru).
  2. Pembelian hanya dengan keyboard. Dari halaman beranda, temukan produk melalui menu atau pencarian, gunakan filter, pilih varian, tambahkan ke keranjang, buka keranjang, dan capai tombol checkout tanpa mouse.
  3. Pemeriksaan acak dengan pembaca layar. Dengan VoiceOver atau NVDA, dengarkan nama produk, harga, status varian, dan konfirmasi tambah ke keranjang.
  4. Uji ulang setelah ada perubahan. Pembaruan tema dan aplikasi baru bisa membatalkan perbaikan.

Pemindaian gratis kami mencakup langkah 1 di halaman beranda, koleksi, produk, keranjang, dan halaman konten, di Chromium sungguhan dengan axe-core. Laporan Perbaikan Aksesibilitas menguji hingga 25 halaman, menambahkan langkah 2 sebagai uji belanja hanya dengan keyboard sampai tombol checkout, memberikan kode sebelum dan sesudah perbaikan, serta menyertakan checklist untuk langkah 3, yang memerlukan orang sungguhan dengan pembaca layar. Keduanya tidak menjamin kepatuhan terhadap ADA atau WCAG.

Pertanyaan yang sering diajukan

Apakah WCAG 2.2 diwajibkan secara hukum untuk toko online di AS?

Departemen Kehakiman AS tidak memiliki regulasi ADA yang menetapkan standar web untuk bisnis swasta, dan panduan web tahun 2022 (terbuka di tab baru) dari departemen tersebut merujuk ke WCAG sebagai panduan yang bermanfaat. Surat somasi (demand letter) umumnya merujuk ke WCAG 2.1 atau 2.2 AA, jadi konsultasikan kewajiban spesifik Anda dengan pengacara.

Apakah memenuhi WCAG 2.2 AA juga berarti memenuhi WCAG 2.1 AA?

Ya, secara praktis. WCAG 2.2 mempertahankan semua kriteria keberhasilan WCAG 2.1 kecuali 4.1.1 Parsing, yang dihapus W3C karena sudah usang.

Berapa ukuran target minimum di WCAG 2.2?

Menurut 2.5.8, target harus berukuran minimal 24 × 24 piksel CSS, kecuali jika lingkaran 24 px yang berpusat pada setiap target yang lebih kecil tidak menyentuh target lain atau lingkarannya. Pengecualian berlaku untuk link di dalam kalimat, kontrol browser tanpa gaya kustom, tampilan yang esensial, dan target yang memiliki kontrol setara yang memenuhi syarat.

Apakah skor aksesibilitas Lighthouse 100 berarti toko saya sudah sesuai standar?

Tidak. Alat otomatis hanya mendeteksi sebagian kegagalan, dan WebAIM mencatat bahwa tidak adanya error yang terdeteksi tidak berarti sebuah halaman aksesibel atau sesuai standar.

Apakah login dengan kata sandi gagal memenuhi 3.3.8?

Tidak dengan sendirinya. Kolom kata sandi memenuhi kriteria jika orang bisa menempelkan teks ke dalamnya dan menggunakan pengelola kata sandi; yang membuatnya gagal adalah memblokir fitur tempel atau isi otomatis.

Seberapa sering saya harus menguji ulang toko saya?

Uji ulang setelah setiap pembaruan tema, pemasangan aplikasi baru, atau perubahan template besar, dan periksa alur pembelian secara berkala, karena aplikasi bisa menyisipkan markup baru tanpa pemberitahuan.

Sumber

Semua panduan