Senarai semak WCAG 2.2 AA untuk kedai dalam talian

Senarai semak WCAG 2.2 AA bagi kedai Shopify dan WooCommerce ikut jenis halaman: teks alt, kontras, label, papan kekunci, fokus, saiz sasaran dan kriteria 2.2.

Pasukan Editorial FixReportsBacaan 10 minit

Senarai semak WCAG 2.2 AA untuk kedai dalam talian bermula dengan kegagalan yang ditemui pada kebanyakan templat kedai: teks alt yang tiada, teks berkontras rendah, pautan dan butang tanpa nama boleh capai (accessible name), medan borang tanpa label, perangkap papan kekunci dan fokus yang tidak kelihatan. WCAG 2.2 kemudian menambah semakan AA yang sangat memberi kesan kepada kedai: item yang difokuskan tersembunyi di bawah bar yang melekit di skrin (2.4.11), sasaran ketik yang lebih kecil daripada 24 × 24 piksel CSS (2.5.8) dan log masuk yang memaksa pengguna mengingat atau menaip semula sesuatu (3.3.8). Uji setiap jenis halaman (halaman utama, koleksi, produk, troli) dengan papan kekunci dan alat penyemak automatik, kemudian betulkan templat tema supaya setiap halaman mewarisi pembaikan itu.

Perkara utama

  • WCAG 2.2 menjadi Syor W3C (W3C Recommendation) pada 5 Oktober 2023. Edisi semasa bertarikh 12 Disember 2024, dan ia telah diluluskan sebagai ISO/IEC 40500:2025 (dibuka dalam tab baharu).
  • Dalam WebAIM Million 2026 (dibuka dalam tab baharu) (data Februari 2026), 95.9% daripada sejuta halaman utama teratas mempunyai kegagalan WCAG 2 yang dapat dikesan.
  • Enam kegagalan paling biasa ialah teks berkontras rendah (83.9% halaman), teks alt yang tiada (53.1%), label borang yang tiada (51%), pautan kosong (46.3%), butang kosong (30.6%) dan bahasa halaman yang tidak dinyatakan (13.5%).
  • Sebanyak 42,516 halaman utama Shopify dalam sampel itu mempunyai purata 75.1 ralat yang dikesan, berbanding 56.1 bagi semua halaman.
  • WCAG 2.2 menambah empat kriteria AA (2.4.11, 2.5.7, 2.5.8, 3.3.8) dan dua kriteria Tahap A (3.2.6, 3.3.7), serta membuang 4.1.1 Parsing.

Apakah yang berubah dalam WCAG 2.2 untuk kedai dalam talian?

WCAG 2.2 menambah sembilan kriteria kejayaan, enam daripadanya pada Tahap A atau AA, dan menggugurkan 4.1.1 Parsing kerana sudah lapuk (W3C WAI (dibuka dalam tab baharu)).

Kriteria baharuTahapMaksudnya bagi kedai dalam talian
2.4.11 Focus Not Obscured (Minimum)AAPautan atau butang yang difokuskan tidak boleh tersembunyi sepenuhnya oleh pengepala melekit, bar tambah ke troli yang melekit, sepanduk kuki atau widget sembang
2.5.7 Dragging MovementsAAApa-apa yang memerlukan seretan, seperti peluncur julat harga, memerlukan alternatif dengan satu ketikan
2.5.8 Target Size (Minimum)AASasaran klik dan ketik berukuran sekurang-kurangnya 24 × 24 piksel CSS, atau dijarakkan supaya bulatan 24 px di sekeliling setiap sasaran tidak menyentuh sasaran bersebelahan
3.2.6 Consistent HelpAPautan bantuan, butiran hubungan atau sembang muncul dalam susunan relatif yang sama pada setiap halaman
3.3.7 Redundant EntryAJangan minta maklumat yang sama dua kali dalam satu proses; isikan secara automatik atau benarkan pengguna memilihnya
3.3.8 Accessible Authentication (Minimum)AALog masuk tidak boleh bergantung pada menghafal atau menyalin semula sesuatu, melainkan ada alternatif atau bantuan seperti fungsi tampal dan pengurus kata laluan

Tiga kriteria lagi (2.4.12, 2.4.13 dan 3.3.9) ialah Tahap AAA. Oleh sebab 2.2 mengekalkan setiap kriteria 2.1 kecuali 4.1.1, memenuhi 2.2 AA juga meliputi 2.1 AA.

Kriteria WCAG manakah yang paling kerap gagal pada templat kedai?

Segelintir kriteria yang sama muncul setiap tahun: kontras, teks alt, label borang dan nama untuk pautan serta butang, ditambah masalah papan kekunci dan fokus yang hanya sebahagiannya dapat dikesan oleh alat automatik.

KriteriaApa yang gagal pada kedaiCara membetulkannya
1.1.1 Non-text Content (A)Imej produk tanpa teks alt atau dengan nama fail sebagai teks alt; imej berpautan tanpa teksHuraikan produk yang dipaparkan (warna, gaya, sudut). Gunakan alt="" hanya untuk hiasan. Tema Shopify sepatutnya mengeluarkan image.alt
1.4.3 Contrast (Minimum) (AA)Teks badan kelabu muda, teks pemegang tempat (placeholder), lencana jualan, teks di atas imej hero4.5:1 untuk teks biasa, 3:1 untuk teks besar (kira-kira 24 px, atau 18.5 px tebal) (W3C (dibuka dalam tab baharu))
2.4.4 Link Purpose (A), 4.1.2 Name, Role, Value (A)Pautan troli, carian dan media sosial yang hanya berupa ikon; anak panah peluncur; butang tutup “X” tanpa namaBerikan setiap kawalan teks yang kelihatan atau aria-label, seperti “Troli, 2 item”
1.3.1 Info and Relationships (A), 3.3.2 Labels or Instructions (A)Medan surat berita dan carian yang hanya ada teks pemegang tempat; input kuantiti tanpa labelGunakan <label for> yang sepadan dengan id input; kumpulkan swatch radio dalam fieldset dengan legend
2.1.1 Keyboard (A), 2.1.2 No Keyboard Trap (A)Menu yang hanya berfungsi dengan hover, swatch yang dibina daripada div, tetingkap timbul yang tidak boleh ditutup dengan papan kekunciGunakan elemen button dan a sebenar; kekunci Escape menutup tindanan dan mengembalikan fokus
2.4.7 Focus Visible (AA)outline: none dalam CSS temaTambah gaya :focus-visible yang jelas menonjol berbanding latar belakang

WebAIM juga mendapati satu daripada empat imej berpautan tidak mempunyai teks alt, dan 45% imej tanpa teks alt ialah pautan (WebAIM (dibuka dalam tab baharu)). Pada grid koleksi, ini biasanya merujuk kepada pautan imej produk.

Apakah yang perlu anda semak pada halaman utama?

Semak pengepala, bahagian hero dan apa-apa yang muncul secara timbul, kerana setiap pelawat menemuinya dahulu.

  • Pautan langkau. Pautan “Langkau ke kandungan” sebagai item pertama yang boleh difokuskan (2.4.1 Bypass Blocks, A).
  • Ikon pengepala. Ikon carian, akaun dan troli mempunyai nama boleh capai, dan nama troli merangkumi bilangan item.
  • Menu. Dibuka dengan Enter atau Space, sub-item boleh dicapai dengan Tab, ditutup dengan Escape, dan tidak bergantung pada hover (2.1.1). Syarat Theme Store (dibuka dalam tab baharu) Shopify menyatakan semua bahagian halaman, termasuk menu lungsur, mesti boleh diakses dengan papan kekunci.
  • Peluncur hero. Jika slaid bergerak secara automatik lebih daripada lima saat, sediakan kawalan jeda (2.2.2 Pause, Stop, Hide, A).
  • Bar pengumuman dan teks pada imej. Ukur kontras; warna jenama sering gagal mencapai 4.5:1.
  • Tetingkap timbul dan sepanduk kuki. Alihkan fokus ke dalam tetingkap timbul, labelkan medan e-mel, benarkan Escape menutupnya, dan pastikan sepanduk melekit tidak sekali-kali menutup sepenuhnya elemen yang difokuskan (2.4.11). W3C menyenaraikan sifat CSS scroll-padding sebagai salah satu cara untuk memastikan item yang difokuskan tidak dilindungi oleh bar melekit (W3C (dibuka dalam tab baharu)).
  • Bahasa halaman. Elemen html mempunyai atribut lang yang betul (3.1.1 Language of Page, A).

Apakah yang perlu anda semak pada halaman koleksi?

Halaman koleksi biasanya gagal pada kad produk, penapis dan swatch.

  • Kad produk. Pautan imej mempunyai teks alt, atau imej disembunyikan daripada teknologi bantuan dan pautan tajuk membawa nama produk.
  • Penapis. Setiap kotak semak mempunyai label dan setiap kumpulan mempunyai tajuk atau legend. Laci penapis boleh dibuka, digunakan dan ditutup dengan papan kekunci. Umumkan bilangan hasil yang dikemas kini sebagai mesej status (4.1.3 Status Messages, AA).
  • Peluncur harga. Tambah input nombor untuk harga minimum dan maksimum supaya penapis berfungsi tanpa seretan (2.5.7) dan tanpa tetikus (2.1.1).
  • Swatch warna. Setiap swatch mempunyai nama dalam bentuk teks, dan status “habis dijual” tidak ditunjukkan dengan warna sahaja (1.4.1 Use of Color, A). Swatch memenuhi saiz 24 × 24 piksel CSS atau peraturan jarak (2.5.8).
  • Isihan dan penomboran halaman. Menu lungsur isihan mempunyai label; pautan halaman dan butang “muat lagi” memenuhi saiz sasaran.

Apakah yang perlu anda semak pada halaman produk?

Halaman produk ialah tempat keputusan membeli dibuat, jadi uji setiap kawalan antara foto produk dan butang tambah ke troli.

  • Galeri. Setiap imej mempunyai teks alt, gambar kecil (thumbnail) ialah butang dengan nama seperti “Tunjukkan imej 2”, dan anak panah berfungsi tanpa seretan (2.5.7).
  • Pemilih varian. Pilihan saiz dan warna berada dalam kumpulan berlabel (1.3.1), pilihan yang dipilih didedahkan kepada pembaca skrin (4.1.2), dan saiz yang tidak tersedia ditandakan dalam teks.
  • Kuantiti. Input mempunyai label, dan butang tolak dan tambah mempunyai nama serta memenuhi 2.5.8. Theme Store Shopify kini mewajibkan sasaran sentuh sekurang-kurangnya 24 × 24 piksel CSS, dan amalan terbaik kebolehcapaian (dibuka dalam tab baharu) Shopify mengesyorkan 44 × 44 untuk kawalan utama.
  • Tambah ke troli. Mesej berjaya dan mesej ralat diumumkan (4.1.3). Aduan FTC terhadap sebuah vendor overlay memetik contoh sebuah laman web: pembaca skrin tidak mengumumkan bahawa item telah ditambah ke troli, dan grafik penilaian 5 bintang dibacakan sebagai butang “previous” (aduan FTC (dibuka dalam tab baharu)).
  • Penilaian, tab dan akordion. Penilaian mempunyai teks seperti “4.5 daripada 5 bintang”. Akordion mendedahkan sama ada ia sedang dikembangkan.
  • Bar tambah ke troli yang melekit. Bar ini tidak boleh menutup sepenuhnya elemen yang difokuskan semasa pengguna papan kekunci bergerak ke bawah halaman dengan Tab (2.4.11).
  • Video. Video produk yang mengandungi pertuturan mempunyai kapsyen (1.2.2 Captions (Prerecorded), A).

Apakah yang perlu anda semak dalam troli dan semasa log masuk?

Troli ialah halaman terakhir yang dikawal sepenuhnya oleh kebanyakan tema, jadi uji halaman ini hingga ke butang pembayaran (checkout), kemudian pastikan log masuk akaun tidak bergantung pada ingatan atau menaip semula.

  • Laci troli. Fokus berpindah ke dalam laci, kekal di situ semasa laci dibuka, dan kembali ke butang troli apabila Escape menutupnya, seperti yang diterangkan dalam amalan terbaik Shopify.
  • Item baris. Setiap input kuantiti dilabelkan dengan nama produk, dan setiap butang buang menyatakan apa yang dibuang, seperti “Buang Kemeja linen, saiz M”.
  • Medan diskaun dan nota. Berlabel, dengan ralat yang diterangkan dalam bentuk teks (3.3.1 Error Identification, A).
  • Butang pembayaran. Boleh dicapai dengan Tab, fokusnya kelihatan dan tidak tersembunyi di belakang elemen melekit.
  • Log masuk (3.3.8). Akaun pelanggan Shopify menggunakan log masuk tanpa kata laluan dengan kod sekali guna (dibuka dalam tab baharu) secara lalai. W3C menyatakan kod mesti boleh ditampal atau diisi secara automatik, dan menyekat fungsi tampal atau pengurus kata laluan menyebabkan kriteria ini gagal; CAPTCHA pengecaman objek dibenarkan pada tahap AA, tetapi CAPTCHA teka-teki atau matematik memerlukan kaedah lain (W3C (dibuka dalam tab baharu)).

Perbezaan platform penting di sini. Di Shopify, checkout.liquid tidak lagi disokong (dibuka dalam tab baharu) untuk langkah maklumat, penghantaran dan pembayaran, jadi kebanyakan markup pembayaran datang daripada Shopify dan bukannya tema anda; uji aplikasi pembayaran dan penyesuaian yang anda tambah. Di WooCommerce, halaman pembayaran ialah halaman pada laman WordPress anda. WooCommerce menyatakan bahagian hadapan terasnya sebahagian besarnya mematuhi WCAG 2.2 AA (kenyataan terakhir dikemas kini pada 1 April 2025), tetapi tema dan pemalam anda masih boleh merosakkannya (WooCommerce (dibuka dalam tab baharu)).

Bagaimanakah cara menguji kedai berdasarkan senarai semak ini?

Gabungkan imbasan automatik dengan pembelian menggunakan papan kekunci sahaja dan semakan ringkas dengan pembaca skrin, pada setiap jenis halaman.

  1. Imbasan automatik. Alat seperti axe, WAVE atau Lighthouse mengesan masalah kontras, teks alt, label dan pautan kosong. Theme Store Shopify meminta skor kebolehcapaian Lighthouse purata sekurang-kurangnya 90 pada halaman utama, koleksi dan produk. Itu tahap minimum, bukan pematuhan: W3C menyatakan alat tidak dapat menentukan kebolehcapaian dengan sendirinya (dibuka dalam tab baharu).
  2. Pembelian dengan papan kekunci sahaja. Dari halaman utama, capai produk melalui menu atau carian, gunakan penapis, pilih varian, tambah ke troli, buka troli dan capai butang pembayaran tanpa tetikus.
  3. Semakan rawak dengan pembaca skrin. Dengan VoiceOver atau NVDA, dengar nama produk, harga, keadaan varian dan pengesahan tambah ke troli.
  4. Uji semula selepas perubahan. Kemas kini tema dan aplikasi baharu boleh membatalkan pembaikan.

Imbasan percuma kami meliputi langkah 1 pada halaman utama, koleksi, produk, troli dan kandungan dalam Chromium sebenar dengan axe-core. Laporan Pembaikan Kebolehcapaian menguji sehingga 25 halaman, menambah langkah 2 sebagai ujian membeli-belah dengan papan kekunci sahaja hingga ke butang pembayaran, memberikan kod sebelum dan selepas, dan menyertakan senarai semak untuk langkah 3, yang memerlukan manusia menggunakan pembaca skrin. Kedua-duanya tidak menjamin pematuhan ADA atau WCAG.

Soalan lazim

Adakah WCAG 2.2 diwajibkan oleh undang-undang untuk kedai dalam talian di AS?

Jabatan Kehakiman AS (Department of Justice) tidak mempunyai peraturan ADA yang menetapkan piawaian web untuk perniagaan swasta, dan panduan web 2022 (dibuka dalam tab baharu) jabatan itu merujuk WCAG sebagai panduan yang berguna. Surat tuntutan (demand letter) lazimnya memetik WCAG 2.1 atau 2.2 AA, jadi berbincanglah dengan peguam tentang kewajipan khusus anda.

Adakah memenuhi WCAG 2.2 AA juga bermakna memenuhi WCAG 2.1 AA?

Ya, untuk tujuan praktikal. WCAG 2.2 mengekalkan semua kriteria kejayaan WCAG 2.1 kecuali 4.1.1 Parsing, yang telah dibuang oleh W3C kerana sudah lapuk.

Apakah saiz sasaran minimum dalam WCAG 2.2?

Di bawah 2.5.8, sasaran mesti berukuran sekurang-kurangnya 24 × 24 piksel CSS, melainkan bulatan 24 px yang berpusat pada setiap sasaran yang lebih kecil tidak menyentuh sasaran lain atau bulatannya. Pautan di dalam ayat, kawalan pelayar yang tidak digayakan, persembahan yang penting (essential) dan sasaran yang mempunyai kawalan setara yang lulus adalah dikecualikan.

Adakah skor kebolehcapaian Lighthouse 100 bermakna kedai saya mematuhi WCAG?

Tidak. Alat automatik hanya mengesan sebahagian kegagalan, dan WebAIM menyatakan bahawa ketiadaan ralat yang dikesan tidak bermakna sesuatu halaman boleh diakses atau mematuhi piawaian.

Adakah log masuk dengan kata laluan gagal 3.3.8?

Tidak dengan sendirinya. Medan kata laluan lulus apabila pengguna boleh menampal ke dalamnya dan menggunakan pengurus kata laluan; menyekat fungsi tampal atau autoisi itulah yang menyebabkan kegagalan.

Berapa kerapkah saya perlu menguji semula kedai saya?

Uji semula selepas setiap kemas kini tema, aplikasi baharu atau perubahan templat yang besar, dan buat semakan rawak pada laluan pembelian secara berkala, kerana aplikasi boleh menyuntik markup baharu tanpa amaran.

Sumber

Semua panduan