เช็กลิสต์ WCAG 2.2 สำหรับร้านค้าออนไลน์และ E-commerce: ต้องตรวจอะไรบ้างก่อนเปิดใช้งาน

ทีมการตลาดเพิ่งได้รับอีเมลร้องเรียนจากลูกค้ารายหนึ่งว่ากดปุ่ม "เพิ่มลงตะกร้า" บนมือถือไม่ติดสักที ต้องแตะซ้ำสามสี่ครั้งกว่าจะสำเร็จ นี่ไม่ใช่ปัญหา UX ทั่วไป แต่เป็นสัญญาณว่าเว็บไซต์อาจไม่ผ่านเกณฑ์ขนาดพื้นที่กดขั้นต่ำของ WCAG 2.2 ซึ่งเป็นมาตรฐานที่ปรับปรุงใหม่และกระทบร้านค้าออนไลน์โดยตรง เพราะทุกการคลิกในเส้นทางซื้อสินค้าคือรายได้ที่อาจเสียไปถ้าผู้ใช้บางกลุ่มกดใช้งานไม่ได้

บทความนี้รวบรวมจุดตรวจที่ควรทำก่อนเปิดใช้งานหน้าร้านค้าใหม่หรือปรับปรุงธีมใหญ่ โดยอ้างอิงเกณฑ์จาก W3C Web Content Accessibility Guidelines (WCAG) 2.2 และแยกให้ชัดว่าอะไรคือสิ่งที่ตรวจได้ด้วยเครื่องมืออัตโนมัติ กับอะไรที่ต้องใช้คนทดสอบจริง

WCAG 2.2 คืออะไร และทำไมร้านค้าออนไลน์ต้องสนใจ

WCAG 2.2 คือแนวปฏิบัติด้านการเข้าถึงเนื้อหาเว็บ (Web Content Accessibility Guidelines) เวอร์ชันล่าสุดที่เผยแพร่โดย W3C แบ่งเกณฑ์เป็นระดับ A, AA และ AAA โดยส่วนใหญ่ธุรกิจจะอ้างอิงระดับ AA เป็นเป้าหมายเชิงปฏิบัติ เพราะครอบคลุมปัญหาการเข้าถึงที่พบบ่อยที่สุดโดยไม่เข้มงวดเกินความจำเป็นสำหรับเว็บทั่วไป

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

เกณฑ์ใหม่ใน WCAG 2.2 ที่กระทบ E-commerce มากที่สุด

WCAG 2.2 เพิ่มเกณฑ์ใหม่หลายข้อเทียบกับเวอร์ชันก่อนหน้า ข้อที่ร้านค้าออนไลน์ควรให้ความสำคัญเป็นพิเศษมีดังนี้

Target Size (Minimum) — ขนาดพื้นที่กดขั้นต่ำ

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

Dragging Movements — ทางเลือกแทนการลากนิ้ว

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

Consistent Help — จุดช่วยเหลือที่ตำแหน่งเดิม

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

Accessible Authentication — การยืนยันตัวตนที่ไม่ต้องอาศัยความจำเพียงอย่างเดียว

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

เช็กลิสต์ตรวจหน้าสำคัญของร้านค้า

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

หน้าสินค้าและหน้ารายการสินค้า

ตรวจว่ารูปสินค้ามีข้อความอธิบายภาพ (Alt Text) ที่บอกลักษณะสินค้าจริง ไม่ใช่แค่ชื่อไฟล์ ตรวจว่าตัวกรองสินค้า (Filter) และการเรียงลำดับใช้งานได้ด้วยคีย์บอร์ด และตรวจว่าราคาที่ตัดขีดฆ่า (ราคาก่อนลด) มีข้อความอธิบายเพิ่มเติมสำหรับโปรแกรมอ่านหน้าจอ ไม่ใช่สื่อด้วยสีหรือขีดฆ่าอย่างเดียว

ตะกร้าสินค้า

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

หน้า Checkout และฟอร์มชำระเงิน

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

บัญชีผู้ใช้และประวัติการสั่งซื้อ

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

เครื่องมือตรวจเบื้องต้น vs การตรวจด้วยคน

เครื่องมือสแกนอัตโนมัติตรวจจับปัญหาบางประเภทได้ดี เช่น รูปที่ไม่มี Alt Text ฟอร์มที่ไม่มี Label เชื่อมโยง หรือโครงสร้างหัวข้อที่กระโดดข้ามระดับ แต่เครื่องมือเหล่านี้ตรวจไม่เห็นปัญหาเชิงพฤติกรรม เช่น ลำดับโฟกัสตอนกดคีย์บอร์ดสับสน หรือข้อความ Alt ที่มีแต่คำ ๆ ไม่สื่อความหมายจริง

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

อ่านเพิ่มเติมเกี่ยวกับภาพรวม Accessibility ของธุรกิจได้ที่ ศูนย์ความรู้ด้าน Accessibility และ Trust UX และดูวิธีจัดทำแผน Audit แบบละเอียดได้ที่ วิธี Audit WCAG 2.2 ของร้านค้าออนไลน์พร้อม Evidence ที่ควรเก็บ

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

WCAG 2.2 ต่างจาก WCAG 2.1 อย่างไรสำหรับร้านค้าออนไลน์

WCAG 2.2 เพิ่มเกณฑ์ใหม่ เช่น ขนาดพื้นที่กดขั้นต่ำ ทางเลือกแทนการลากนิ้ว ตำแหน่งจุดช่วยเหลือที่คงที่ และการยืนยันตัวตนที่ไม่ต้องพึ่งความจำอย่างเดียว ซึ่งกระทบหน้าตะกร้าและ Checkout ของร้านค้าออนไลน์โดยตรง มากกว่าเวอร์ชันก่อนหน้า

ผลสแกนอัตโนมัติผ่านหมดแปลว่าร้านค้าผ่าน WCAG 2.2 หรือไม่

ไม่ใช่ ผลสแกนอัตโนมัติตรวจจับปัญหาโครงสร้างบางประเภทได้เท่านั้น เช่น Alt Text ที่หายไปหรือ Label ที่ไม่เชื่อมโยง แต่ตรวจไม่เห็นปัญหาเชิงพฤติกรรม เช่น ลำดับโฟกัสของคีย์บอร์ด จึงต้องมีคนทดสอบเพิ่มก่อนสรุปผล

ควรเริ่มตรวจ WCAG 2.2 จากหน้าไหนก่อนในร้านค้าออนไลน์

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

ต้องทดสอบด้วยโปรแกรมอ่านหน้าจอทุกหน้าหรือไม่

ควรทดสอบอย่างน้อยในหน้าสำคัญของเส้นทางซื้อสินค้า เช่น หน้าสินค้า ตะกร้า และ Checkout ส่วนหน้าอื่นสามารถทยอยตรวจตามลำดับความสำคัญและความเสี่ยงได้

เช็กลิสต์ปฏิบัติ

• ตรวจขนาดพื้นที่กดของปุ่มเพิ่มลงตะกร้า ปุ่มเลือกไซซ์ และไอคอนลบสินค้าบนหน้าจอมือถือ
• ตรวจว่าสไลเดอร์หรือฟีเจอร์ลากวางทุกจุดมีทางเลือกที่ไม่ต้องลากนิ้ว
• ตรวจว่าลิงก์ติดต่อฝ่ายบริการลูกค้าอยู่ตำแหน่งเดียวกันทุกหน้า
• ตรวจว่าขั้นตอนล็อกอินและยืนยันคำสั่งซื้อมีทางเลือกที่ไม่ต้องพึ่งความจำเพียงอย่างเดียว
• ทดสอบเส้นทางเลือกสินค้าไปจนถึงยืนยันคำสั่งซื้อด้วยคีย์บอร์ดอย่างเดียว
• ตรวจ Alt Text ของรูปสินค้าว่าอธิบายลักษณะสินค้าจริง ไม่ใช่ชื่อไฟล์
• ตรวจว่าข้อความแจ้งข้อผิดพลาดในฟอร์ม Checkout อธิบายวิธีแก้ไขชัดเจน

ข้อผิดพลาดที่พบบ่อย

• ใช้ผลสแกนอัตโนมัติผ่าน 100 คะแนนแล้วประกาศว่าเว็บไซต์ผ่าน WCAG ทั้งที่ยังไม่มีใครทดสอบด้วยคีย์บอร์ดจริง
• แก้ไขเฉพาะหน้าแรกของร้านค้า แต่ไม่ตรวจหน้าตะกร้าและ Checkout ที่เป็นจุดปิดการขาย
• ใส่ Alt Text แบบเดียวกันซ้ำทุกภาพสินค้า เช่น "รูปสินค้า" โดยไม่บอกลักษณะเฉพาะ
• เปลี่ยนธีมร้านค้าใหม่แล้วไม่ตรวจซ้ำ ทำให้ปุ่มที่เคยแก้ไขแล้วกลับมามีปัญหาขนาดพื้นที่กดอีกครั้ง
• ปล่อยให้ระบบยืนยันตัวตนบังคับกรอกโจทย์ปริศนาความจำโดยไม่มีทางเลือกอื่นเลย

สรุป

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

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

• W3C — Web Content Accessibility Guidelines (WCAG) 2.2