เช็กลิสต์ WCAG 2.2 AA สำหรับร้านค้าออนไลน์ Shopify และ WooCommerce

เช็กลิสต์ WCAG 2.2 AA สำหรับร้านค้าออนไลน์เริ่มจากข้อบกพร่องที่พบในเทมเพลตร้านค้าส่วนใหญ่ ได้แก่ ไม่มีข้อความทดแทน (alt text) ข้อความที่มีคอนทราสต์ต่ำ ลิงก์และปุ่มที่ไม่มีชื่อที่เข้าถึงได้ (accessible name) ช่องฟอร์มที่ไม่มีป้ายกำกับ กับดักคีย์บอร์ด (keyboard trap) และโฟกัสที่มองไม่เห็น จากนั้น WCAG 2.2 เพิ่มการตรวจระดับ AA ที่กระทบร้านค้าอย่างมาก ได้แก่ องค์ประกอบที่ได้รับโฟกัสถูกซ่อนอยู่ใต้แถบแบบ sticky (2.4.11) เป้าหมายการแตะที่เล็กกว่า 24 × 24 พิกเซล CSS (2.5.8) และการเข้าสู่ระบบที่บังคับให้ผู้ใช้ต้องจำหรือพิมพ์บางอย่างซ้ำ (3.3.8) ทดสอบหน้าแต่ละประเภท (หน้าแรก คอลเลกชัน สินค้า ตะกร้า) ด้วยคีย์บอร์ดและเครื่องมือตรวจอัตโนมัติ แล้วแก้ไขเทมเพลตของธีม เพื่อให้ทุกหน้าได้รับการแก้ไขนั้นไปด้วย

ประเด็นสำคัญ

• WCAG 2.2 ได้เป็นข้อเสนอแนะของ W3C (W3C Recommendation) เมื่อวันที่ 5 ตุลาคม 2023 ฉบับปัจจุบันลงวันที่ 12 ธันวาคม 2024 และได้รับการรับรองเป็น ISO/IEC 40500:2025 (เปิดในแท็บใหม่)
• ใน WebAIM Million 2026 (เปิดในแท็บใหม่) (ข้อมูลเดือนกุมภาพันธ์ 2026) หน้าแรกของเว็บไซต์หนึ่งล้านอันดับแรกถึง 95.9% มีข้อบกพร่องตาม WCAG 2 ที่ตรวจพบได้
• ข้อบกพร่องที่พบบ่อยที่สุด 6 อันดับ ได้แก่ ข้อความที่มีคอนทราสต์ต่ำ (83.9% ของหน้า) ไม่มี alt text (53.1%) ไม่มีป้ายกำกับฟอร์ม (51%) ลิงก์ว่าง (46.3%) ปุ่มว่าง (30.6%) และไม่ระบุภาษาของหน้า (13.5%)
• หน้าแรกของร้าน Shopify จำนวน 42,516 หน้าในกลุ่มตัวอย่างนั้นมีข้อผิดพลาดที่ตรวจพบเฉลี่ย 75.1 รายการ เทียบกับ 56.1 รายการของหน้าทั้งหมด
• WCAG 2.2 เพิ่มเกณฑ์ระดับ AA 4 ข้อ (2.4.11, 2.5.7, 2.5.8, 3.3.8) และเกณฑ์ระดับ A 2 ข้อ (3.2.6, 3.3.7) และนำ 4.1.1 Parsing ออก

WCAG 2.2 เปลี่ยนแปลงอะไรบ้างสำหรับร้านค้าออนไลน์

WCAG 2.2 เพิ่มเกณฑ์ความสำเร็จ (success criteria) 9 ข้อ โดย 6 ข้ออยู่ในระดับ A หรือ AA และยกเลิก 4.1.1 Parsing เนื่องจากล้าสมัย (W3C WAI (เปิดในแท็บใหม่))

อีก 3 ข้อที่เหลือ (2.4.12, 2.4.13 และ 3.3.9) อยู่ในระดับ AAA เนื่องจาก 2.2 คงเกณฑ์ทุกข้อของ 2.1 ไว้ยกเว้น 4.1.1 การผ่านเกณฑ์ 2.2 AA จึงครอบคลุม 2.1 AA ด้วย

เกณฑ์ WCAG ข้อใดที่เทมเพลตร้านค้าไม่ผ่านบ่อยที่สุด

เกณฑ์ไม่กี่ข้อเดิม ๆ ปรากฏทุกปี ได้แก่ คอนทราสต์ alt text ป้ายกำกับฟอร์ม และชื่อของลิงก์และปุ่ม รวมถึงปัญหาด้านคีย์บอร์ดและโฟกัสที่เครื่องมืออัตโนมัติตรวจจับได้เพียงบางส่วน

WebAIM ยังพบว่ารูปภาพที่เป็นลิงก์ 1 ใน 4 ไม่มี alt text และ 45% ของรูปภาพที่ไม่มี alt text เป็นลิงก์ (WebAIM (เปิดในแท็บใหม่)) ในตารางสินค้าของหน้าคอลเลกชัน กรณีนี้มักหมายถึงลิงก์ที่รูปสินค้า

ควรตรวจอะไรบ้างในหน้าแรก

ตรวจส่วนหัว ส่วน hero และทุกอย่างที่เด้งขึ้นมา เพราะผู้เข้าชมทุกคนพบสิ่งเหล่านี้ก่อน

• ลิงก์ข้ามไปยังเนื้อหา (skip link) มีลิงก์ “ข้ามไปยังเนื้อหา” เป็นรายการแรกที่รับโฟกัสได้ (2.4.1 Bypass Blocks, A)
• ไอคอนในส่วนหัว ไอคอนค้นหา บัญชี และตะกร้ามีชื่อที่เข้าถึงได้ และชื่อของตะกร้าระบุจำนวนสินค้าด้วย
• เมนู เปิดได้ด้วย Enter หรือ Space เข้าถึงรายการย่อยได้ด้วย Tab ปิดได้ด้วย Escape และไม่ต้องพึ่งการชี้เมาส์ (2.1.1) ข้อกำหนดของ Theme Store (เปิดในแท็บใหม่) ของ Shopify ระบุว่าทุกส่วนของหน้า รวมถึงเมนูแบบดรอปดาวน์ ต้องใช้งานได้ด้วยคีย์บอร์ด
• สไลเดอร์ hero หากสไลด์เลื่อนอัตโนมัตินานกว่า 5 วินาที ให้มีตัวควบคุมสำหรับหยุดชั่วคราว (2.2.2 Pause, Stop, Hide, A)
• แถบประกาศและข้อความบนรูปภาพ วัดค่าคอนทราสต์ เพราะสีของแบรนด์มักไม่ผ่าน 4.5:1
• ป๊อปอัปและแบนเนอร์คุกกี้ ย้ายโฟกัสเข้าไปในป๊อปอัป ใส่ป้ายกำกับให้ช่องอีเมล ให้ปิดได้ด้วย Escape และตรวจสอบว่าแบนเนอร์แบบ sticky ไม่บังองค์ประกอบที่ได้รับโฟกัสจนมิด (2.4.11) W3C ระบุว่า CSS scroll-padding เป็นวิธีหนึ่งที่ช่วยไม่ให้แถบแบบ sticky บังองค์ประกอบที่ได้รับโฟกัส (W3C (เปิดในแท็บใหม่))
• ภาษาของหน้า องค์ประกอบ html มีแอตทริบิวต์ lang ที่ถูกต้อง (3.1.1 Language of Page, A)

ควรตรวจอะไรบ้างในหน้าคอลเลกชัน

หน้าคอลเลกชันมักไม่ผ่านที่การ์ดสินค้า ตัวกรอง และตัวเลือกสี (swatch)

• การ์ดสินค้า ลิงก์ที่รูปภาพมี alt text หรือรูปภาพถูกซ่อนจากเทคโนโลยีสิ่งอำนวยความสะดวก (assistive technology) และให้ลิงก์ชื่อสินค้าเป็นตัวระบุชื่อ
• ตัวกรอง ช่องทำเครื่องหมายทุกช่องมีป้ายกำกับ และทุกกลุ่มมีหัวข้อหรือ legend แผงตัวกรองเปิด ใช้งาน และปิดได้ด้วยคีย์บอร์ด และประกาศจำนวนผลลัพธ์ที่อัปเดตเป็นข้อความสถานะ (4.1.3 Status Messages, AA)
• แถบเลื่อนราคา เพิ่มช่องกรอกตัวเลขราคาต่ำสุดและสูงสุด เพื่อให้ตัวกรองใช้งานได้โดยไม่ต้องลาก (2.5.7) และไม่ต้องใช้เมาส์ (2.1.1)
• ตัวเลือกสี ตัวเลือกสีแต่ละรายการมีชื่อเป็นข้อความ และสถานะ “สินค้าหมด” ไม่ได้แสดงด้วยสีเพียงอย่างเดียว (1.4.1 Use of Color, A) ตัวเลือกสีมีขนาด 24 × 24 พิกเซล CSS หรือเป็นไปตามกฎระยะห่าง (2.5.8)
• การเรียงลำดับและการแบ่งหน้า ดรอปดาวน์สำหรับเรียงลำดับมีป้ายกำกับ ส่วนลิงก์เลขหน้าและปุ่ม “โหลดเพิ่มเติม” มีขนาดเป้าหมายตามเกณฑ์

ควรตรวจอะไรบ้างในหน้าสินค้า

หน้าสินค้าเป็นจุดที่ผู้ซื้อตัดสินใจ ดังนั้นให้ทดสอบตัวควบคุมทุกตัวตั้งแต่รูปภาพไปจนถึงปุ่มเพิ่มลงตะกร้า

• แกลเลอรี รูปภาพทุกรูปมี alt text ภาพย่อเป็นปุ่มที่มีชื่อ เช่น “แสดงรูปที่ 2” และลูกศรใช้งานได้โดยไม่ต้องลาก (2.5.7)
• ตัวเลือกสินค้า (variant) ตัวเลือกขนาดและสีอยู่ในกลุ่มที่มีป้ายกำกับ (1.3.1) ตัวเลือกที่เลือกอยู่ถูกแจ้งให้โปรแกรมอ่านหน้าจอทราบ (4.1.2) และขนาดที่ไม่มีสินค้าถูกระบุไว้เป็นข้อความ
• จำนวน ช่องกรอกมีป้ายกำกับ ส่วนปุ่มลบและปุ่มบวกมีชื่อและเป็นไปตาม 2.5.8 ปัจจุบัน Theme Store ของ Shopify กำหนดให้เป้าหมายการสัมผัสมีขนาดอย่างน้อย 24 × 24 พิกเซล CSS และแนวทางปฏิบัติที่ดีด้านการเข้าถึง (เปิดในแท็บใหม่) ของ Shopify แนะนำขนาด 44 × 44 สำหรับตัวควบคุมหลัก
• เพิ่มลงตะกร้า ข้อความแจ้งความสำเร็จและข้อผิดพลาดถูกประกาศให้ทราบ (4.1.3) คำร้องเรียนของ FTC ต่อผู้ให้บริการ overlay รายหนึ่งยกตัวอย่างเว็บไซต์ที่โปรแกรมอ่านหน้าจอไม่ประกาศว่ามีการเพิ่มสินค้าลงตะกร้าแล้ว และกราฟิกคะแนน 5 ดาวถูกอ่านออกเสียงเป็นปุ่ม “previous” (คำร้องเรียนของ FTC (เปิดในแท็บใหม่))
• คะแนนรีวิว แท็บ และแอคคอร์เดียน คะแนนรีวิวมีข้อความ เช่น “4.5 จาก 5 ดาว” และแอคคอร์เดียนแจ้งสถานะว่ากางออกอยู่หรือไม่
• แถบเพิ่มลงตะกร้าแบบ sticky ต้องไม่บังองค์ประกอบที่ได้รับโฟกัสจนมิด ขณะที่ผู้ใช้คีย์บอร์ดกด Tab ไล่ลงมาตามหน้า (2.4.11)
• วิดีโอ วิดีโอสินค้าที่มีเสียงพูดมีคำบรรยายใต้ภาพ (1.2.2 Captions (Prerecorded), A)

ควรตรวจอะไรบ้างในตะกร้าและหน้าเข้าสู่ระบบ

ตะกร้าเป็นหน้าสุดท้ายที่ธีมส่วนใหญ่ควบคุมได้ทั้งหมด จึงควรทดสอบไปจนถึงปุ่มชำระเงิน แล้วตรวจสอบว่าการเข้าสู่ระบบบัญชีไม่ต้องอาศัยความจำหรือการพิมพ์ซ้ำ

• ลิ้นชักตะกร้า (cart drawer) โฟกัสย้ายเข้าไปในลิ้นชัก อยู่ในนั้นตลอดเวลาที่เปิดอยู่ และกลับไปที่ปุ่มตะกร้าเมื่อปิดด้วย Escape ตามที่แนวทางปฏิบัติที่ดีของ Shopify อธิบายไว้
• รายการสินค้าในตะกร้า ช่องจำนวนแต่ละช่องมีป้ายกำกับที่ระบุชื่อสินค้า และปุ่มนำออกแต่ละปุ่มบอกว่านำอะไรออก เช่น “นำเสื้อเชิ้ตลินิน ไซซ์ M ออก”
• ช่องโค้ดส่วนลดและหมายเหตุ มีป้ายกำกับ และอธิบายข้อผิดพลาดเป็นข้อความ (3.3.1 Error Identification, A)
• ปุ่มชำระเงิน เข้าถึงได้ด้วย Tab มีโฟกัสที่มองเห็นได้ และไม่ถูกซ่อนอยู่หลังองค์ประกอบแบบ sticky
• การเข้าสู่ระบบ (3.3.8) โดยค่าเริ่มต้น บัญชีลูกค้าของ Shopify ใช้การเข้าสู่ระบบแบบไม่ใช้รหัสผ่านด้วยรหัสแบบใช้ครั้งเดียว (เปิดในแท็บใหม่) W3C ระบุว่ารหัสต้องวางได้หรือกรอกให้อัตโนมัติได้ และการบล็อกการวางหรือโปรแกรมจัดการรหัสผ่านทำให้ไม่ผ่านเกณฑ์ CAPTCHA แบบจดจำวัตถุยอมรับได้ในระดับ AA แต่ CAPTCHA แบบปริศนาหรือโจทย์คณิตศาสตร์ต้องมีวิธีอื่นให้เลือก (W3C (เปิดในแท็บใหม่))

ความแตกต่างของแพลตฟอร์มมีผลในจุดนี้ บน Shopify นั้น checkout.liquid ไม่ได้รับการรองรับอีกต่อไป (เปิดในแท็บใหม่) สำหรับขั้นตอนข้อมูลลูกค้า การจัดส่ง และการชำระเงิน มาร์กอัปส่วนใหญ่ของหน้าชำระเงินจึงมาจาก Shopify ไม่ใช่จากธีมของคุณ ให้ทดสอบแอปและการปรับแต่งหน้าชำระเงินที่คุณเพิ่มเข้าไป ส่วนบน WooCommerce หน้าชำระเงินเป็นหน้าหนึ่งบนเว็บไซต์ WordPress ของคุณ WooCommerce ระบุว่าส่วนหน้าบ้าน (front end) ของ core เป็นไปตาม WCAG 2.2 AA เป็นส่วนใหญ่ (คำแถลงอัปเดตล่าสุดเมื่อ 1 เมษายน 2025) แต่ธีมและปลั๊กอินของคุณยังอาจทำให้ไม่เป็นไปตามเกณฑ์ได้ (WooCommerce (เปิดในแท็บใหม่))

ควรทดสอบร้านค้าตามเช็กลิสต์นี้อย่างไร

ใช้การสแกนอัตโนมัติร่วมกับการทดลองซื้อโดยใช้คีย์บอร์ดเท่านั้น และการตรวจสั้น ๆ ด้วยโปรแกรมอ่านหน้าจอ ในหน้าแต่ละประเภท

1. การสแกนอัตโนมัติ เครื่องมืออย่าง axe, WAVE หรือ Lighthouse ตรวจจับปัญหาคอนทราสต์ alt text ป้ายกำกับ และลิงก์ว่างได้ Theme Store ของ Shopify กำหนดคะแนนการเข้าถึงของ Lighthouse เฉลี่ยอย่างน้อย 90 ในหน้าแรก หน้าคอลเลกชัน และหน้าสินค้า นี่เป็นเพียงเกณฑ์ขั้นต่ำ ไม่ใช่การเป็นไปตามมาตรฐาน เพราะ W3C ระบุว่าเครื่องมือไม่สามารถตัดสินการเข้าถึงได้ด้วยตัวเอง (เปิดในแท็บใหม่)
2. การทดลองซื้อด้วยคีย์บอร์ดเท่านั้น เริ่มจากหน้าแรก ไปยังสินค้าผ่านเมนูหรือการค้นหา ใช้ตัวกรอง เลือกตัวเลือกสินค้า เพิ่มลงตะกร้า เปิดตะกร้า และไปถึงปุ่มชำระเงินโดยไม่ใช้เมาส์
3. การตรวจแบบสุ่มด้วยโปรแกรมอ่านหน้าจอ ใช้ VoiceOver หรือ NVDA ฟังชื่อสินค้า ราคา สถานะตัวเลือกสินค้า และข้อความยืนยันการเพิ่มลงตะกร้า
4. ทดสอบซ้ำหลังมีการเปลี่ยนแปลง การอัปเดตธีมและแอปใหม่อาจทำให้การแก้ไขที่ทำไว้ย้อนกลับได้

การสแกนฟรี ของเราครอบคลุมขั้นตอนที่ 1 ในหน้าแรก หน้าคอลเลกชัน หน้าสินค้า หน้าตะกร้า และหน้าเนื้อหา โดยใช้ Chromium จริงร่วมกับ axe-core ส่วนรายงานแก้ไขการเข้าถึง ทดสอบได้สูงสุด 25 หน้า เพิ่มขั้นตอนที่ 2 เป็นการทดสอบการซื้อด้วยคีย์บอร์ดเท่านั้นไปจนถึงปุ่มชำระเงิน ให้โค้ดแบบก่อนและหลังแก้ไข และมีเช็กลิสต์สำหรับขั้นตอนที่ 3 ซึ่งต้องให้คนทดสอบด้วยโปรแกรมอ่านหน้าจอ ทั้งสองอย่างไม่ได้รับประกันการปฏิบัติตาม ADA หรือ WCAG

คำถามที่พบบ่อย

ร้านค้าออนไลน์ในสหรัฐฯ ต้องปฏิบัติตาม WCAG 2.2 ตามกฎหมายหรือไม่

กระทรวงยุติธรรมสหรัฐฯ (Department of Justice) ยังไม่มีกฎระเบียบภายใต้ ADA ที่กำหนดมาตรฐานเว็บสำหรับธุรกิจเอกชน และแนวทางด้านเว็บปี 2022 (เปิดในแท็บใหม่) ของกระทรวงอ้างถึง WCAG ว่าเป็นแนวทางที่เป็นประโยชน์ หนังสือเรียกร้อง (demand letter) มักอ้างอิง WCAG 2.1 หรือ 2.2 AA ดังนั้นควรปรึกษาทนายความเกี่ยวกับภาระหน้าที่เฉพาะของคุณ

การผ่าน WCAG 2.2 AA ถือว่าผ่าน WCAG 2.1 AA ด้วยหรือไม่

ใช่ ในทางปฏิบัติถือว่าผ่าน WCAG 2.2 คงเกณฑ์ความสำเร็จทุกข้อของ WCAG 2.1 ไว้ ยกเว้น 4.1.1 Parsing ซึ่ง W3C นำออกเนื่องจากล้าสมัย

ขนาดเป้าหมายขั้นต่ำใน WCAG 2.2 คือเท่าใด

ตามเกณฑ์ 2.5.8 เป้าหมายต้องมีขนาดอย่างน้อย 24 × 24 พิกเซล CSS เว้นแต่วงกลมขนาด 24 px ที่มีจุดศูนย์กลางอยู่ที่เป้าหมายขนาดเล็กแต่ละรายการจะไม่แตะเป้าหมายอื่นหรือวงกลมของเป้าหมายอื่น ข้อยกเว้น ได้แก่ ลิงก์ที่อยู่ในประโยค ตัวควบคุมของเบราว์เซอร์ที่ไม่ได้ปรับแต่งสไตล์ การนำเสนอที่จำเป็นต้องเป็นแบบนั้น และเป้าหมายที่มีตัวควบคุมเทียบเท่าซึ่งผ่านเกณฑ์

คะแนนการเข้าถึง 100 ใน Lighthouse หมายความว่าร้านเป็นไปตามมาตรฐานหรือไม่

ไม่ใช่ เครื่องมืออัตโนมัติตรวจพบข้อบกพร่องได้เพียงบางส่วน และ WebAIM ชี้ว่าการไม่พบข้อผิดพลาดไม่ได้หมายความว่าหน้านั้นเข้าถึงได้หรือเป็นไปตามมาตรฐาน

การเข้าสู่ระบบด้วยรหัสผ่านไม่ผ่านเกณฑ์ 3.3.8 หรือไม่

การใช้รหัสผ่านไม่ได้ทำให้ไม่ผ่านเกณฑ์ 3.3.8 โดยตัวมันเอง ช่องรหัสผ่านผ่านเกณฑ์เมื่อผู้ใช้วางข้อความลงไปและใช้โปรแกรมจัดการรหัสผ่านได้ การบล็อกการวางหรือการกรอกอัตโนมัติต่างหากที่ทำให้ไม่ผ่าน

ควรทดสอบร้านซ้ำบ่อยแค่ไหน

ทดสอบซ้ำหลังการอัปเดตธีมทุกครั้ง หลังเพิ่มแอปใหม่ หรือหลังเปลี่ยนแปลงเทมเพลตครั้งใหญ่ และตรวจเส้นทางการซื้อแบบสุ่มเป็นประจำ เพราะแอปอาจแทรกมาร์กอัปใหม่เข้ามาโดยไม่แจ้งล่วงหน้า

แหล่งข้อมูลอ้างอิง

• Web Content Accessibility Guidelines (WCAG) 2.2 (เปิดในแท็บใหม่), W3C, ข้อเสนอแนะ (Recommendation) วันที่ 12 ธันวาคม 2024
• What's New in WCAG 2.2 (เปิดในแท็บใหม่), W3C Web Accessibility Initiative, 5 ตุลาคม 2023
• WCAG 2.2 Approved as an ISO Standard (เปิดในแท็บใหม่), W3C Web Accessibility Initiative, 21 ตุลาคม 2025
• How to Meet WCAG 2.2 (Quick Reference) (เปิดในแท็บใหม่), W3C Web Accessibility Initiative, เข้าถึงเมื่อ 22 ตุลาคม 2026 (ระดับความสอดคล้อง)
• Understanding SC 1.4.3 Contrast (Minimum) (เปิดในแท็บใหม่), SC 2.4.11 Focus Not Obscured (Minimum) (เปิดในแท็บใหม่), SC 2.5.8 Target Size (Minimum) (เปิดในแท็บใหม่) และ SC 3.3.8 Accessible Authentication (Minimum) (เปิดในแท็บใหม่), W3C Web Accessibility Initiative, เข้าถึงเมื่อ 22 ตุลาคม 2026
• Selecting Web Accessibility Evaluation Tools (เปิดในแท็บใหม่), W3C Web Accessibility Initiative, อัปเดตเมื่อ 13 พฤษภาคม 2024
• The WebAIM Million: 2026 report (เปิดในแท็บใหม่), WebAIM, ข้อมูลเดือนกุมภาพันธ์ 2026 อัปเดตล่าสุดเมื่อ 30 มีนาคม 2026
• Theme Store requirements (เปิดในแท็บใหม่), Shopify, เข้าถึงเมื่อ 22 ตุลาคม 2026
• Accessibility best practices for Shopify themes (เปิดในแท็บใหม่), Shopify, เข้าถึงเมื่อ 22 ตุลาคม 2026
• checkout.liquid (เปิดในแท็บใหม่), Shopify, เข้าถึงเมื่อ 22 ตุลาคม 2026
• Sign-in options for customer accounts (เปิดในแท็บใหม่), Shopify Help Center, เข้าถึงเมื่อ 22 ตุลาคม 2026
• Accessibility in WooCommerce (เปิดในแท็บใหม่), WooCommerce, คำแถลงอัปเดตล่าสุดเมื่อ 1 เมษายน 2025
• accessiBe complaint (เปิดในแท็บใหม่), Federal Trade Commission, 3 มกราคม 2025
• Guidance on Web Accessibility and the ADA (เปิดในแท็บใหม่), U.S. Department of Justice, 18 มีนาคม 2022