เช็กลิสต์ WCAG 2.2 สำหรับเอเจนซีและฟรีแลนซ์ทำเว็บไซต์: ต้องตรวจอะไรบ้างก่อนเปิดใช้งาน

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

บทความนี้รวบรวมเช็กลิสต์ WCAG 2.2 ที่เอเจนซีและฟรีแลนซ์นำไปใช้ได้จริง แบ่งตามขั้นตอนงานตั้งแต่ Design Handoff, Dev QA จนถึง Pre-launch Review เพื่อลดความเสี่ยงที่จะพลาดเกณฑ์สำคัญตอนใกล้ Deadline

ทำไมเช็กลิสต์ต้องแยกตามขั้นตอนงาน ไม่ใช่ตรวจทีเดียวตอนจบ

ปัญหาที่พบบ่อยคือทีมรอไปตรวจ Accessibility ตอนใกล้ Launch ครั้งเดียว ซึ่งทำให้เจอปัญหาเชิงโครงสร้าง เช่น Contrast สีของ Design System หรือลำดับ Heading ที่ผิดตั้งแต่ต้น การแก้ตอนนั้นเสียเวลามากกว่าการตรวจตั้งแต่ช่วง Design และ Development

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

WCAG 2.2 ต่างจาก 2.1 ตรงไหนที่เอเจนซีต้องรู้

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

สิ่งที่ต้องระวังคือ WCAG 3 ยังอยู่ระหว่างการพัฒนาและยังไม่ถูกประกาศเป็นมาตรฐานที่ใช้แทน WCAG 2 ในปัจจุบัน เอเจนซีที่ให้คำมั่นกับลูกค้าว่าจะ "อัปเกรดเป็น WCAG 3" โดยไม่มีมาตรฐานที่ประกาศจริงถือเป็นความเสี่ยงด้านความน่าเชื่อถือ

เช็กลิสต์ช่วง Design Handoff

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

สิ่งที่ควรตรวจในไฟล์ Design

• อัตราส่วน Contrast ของตัวอักษรกับพื้นหลัง อย่างน้อยตามเกณฑ์ระดับ AA
• ขนาดพื้นที่แตะของปุ่มและลิงก์บนมือถือ ให้เพียงพอสำหรับนิ้วมือ ไม่ใช่แค่ไอคอนเล็ก ๆ
• ลำดับ Heading ในหน้า Wireframe ว่าไล่ระดับถูกต้อง ไม่ข้ามจาก H2 ไป H4
• สถานะ Focus ของปุ่มและฟอร์มมีการออกแบบไว้ชัดเจน ไม่ใช่ปล่อยให้ Browser Default

เช็กลิสต์ช่วง Dev QA

ทีมพัฒนาต้องแปลง Design ให้ทำงานได้จริงกับ Keyboard และ Assistive Technology ไม่ใช่แค่ให้หน้าตาตรงกับ Design

สิ่งที่ควรตรวจระหว่างพัฒนา

• กดปุ่ม Tab ไล่ทีละองค์ประกอบได้ครบ ไม่มีจุดที่ Focus หายหรือกระโดดข้าม
• ฟอร์มทุกช่องมี Label ที่เชื่อมโยงถูกต้อง ไม่ใช่แค่ Placeholder
• รูปภาพที่สื่อความหมายมี Alt Text ที่อธิบายเนื้อหา ไม่ใช่ใส่ Keyword
• องค์ประกอบที่ลากได้ เช่น Slider หรือ Range ต้องมีวิธีใช้งานแบบไม่ต้องลากด้วย เช่นปุ่มเพิ่มลด

เช็กลิสต์ช่วง Pre-launch Review

ก่อนเปิดใช้งานจริง ควรมีการทดสอบซ้ำอีกรอบด้วยเครื่องมือช่วยเหลือจริง ไม่ใช่แค่ผลจาก Automated Scan เพียงอย่างเดียว เพราะเครื่องมืออัตโนมัติตรวจจับได้เฉพาะบางเกณฑ์ เช่น Contrast บางกรณี Missing Alt และโครงสร้าง Heading แต่ตรวจ Keyboard Flow และ Screen Reader จริงไม่ได้ครบ

ทีมควรเปิดหน้าเว็บด้วย Keyboard เพียงอย่างเดียว ลองใช้ Screen Reader อ่านหน้า Checkout หรือฟอร์มติดต่อ และบันทึกผลไว้เป็นหลักฐานก่อนส่งมอบ

เกณฑ์ใหม่ใน WCAG 2.2 ที่เอเจนซีมักพลาด

เกณฑ์ที่เพิ่มเข้ามาใหม่หลายข้อเกี่ยวข้องกับพฤติกรรมการใช้งานที่ไม่ได้ถูกตรวจในเช็กลิสต์เดิม

Focus ไม่ถูกบดบัง

เมื่อผู้ใช้กด Tab ไปที่องค์ประกอบใด องค์ประกอบนั้นต้องไม่ถูก Header หรือ Popup บดบังจนมองไม่เห็น ปัญหานี้พบบ่อยในเว็บที่มี Sticky Header

ขนาดพื้นที่แตะ

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

พฤติกรรมการลาก

ฟังก์ชันที่ต้องลาก เช่น Image Slider หรือ Range Selector ต้องมีทางเลือกอื่นที่ไม่ต้องลาก เพราะผู้ใช้บางกลุ่มลากด้วยเมาส์หรือนิ้วไม่ถนัด

ความช่วยเหลือที่สม่ำเสมอ

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

ใครควรเป็นเจ้าของเช็กลิสต์นี้ในทีมเอเจนซี

เช็กลิสต์ที่ไม่มีเจ้าของมักถูกข้ามเมื่อ Timeline ตึง ทีมควรกำหนดว่าใครรับผิดชอบตรวจแต่ละช่วง เช่น Design Lead รับผิดชอบช่วง Handoff, Tech Lead รับผิดชอบช่วง Dev QA และ Project Manager เป็นคนเช็กว่าผ่านทุกขั้นก่อนส่งมอบให้ลูกค้า พร้อมเก็บผลตรวจไว้เป็นเอกสารอ้างอิงสำหรับงานต่อไป

งานลักษณะนี้ ทีมสามารถใช้เครื่องมือสแกนอัตโนมัติเป็นจุดเริ่มต้นเพื่อคัดกรองปัญหาที่ตรวจจับได้ง่ายก่อน แล้วค่อยให้คนตรวจ Manual ในจุดที่เครื่องมือมองไม่เห็น ไม่ควรใช้ผลสแกนอัตโนมัติเพียงอย่างเดียวแทนการตรวจสอบทั้งหมด

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

• ตรวจ Contrast และขนาดพื้นที่แตะตั้งแต่ไฟล์ Design ก่อนส่งต่อทีม Dev
• ตรวจลำดับ Heading ในทุก Wireframe ไม่ให้ข้ามระดับ
• ทดสอบ Keyboard Tab ไล่ทุกองค์ประกอบระหว่างพัฒนา
• ตรวจ Label ของฟอร์มและ Alt Text ของรูปภาพก่อน QA
• เพิ่มทางเลือกที่ไม่ต้องลากสำหรับ Slider หรือ Range Selector
• ทดสอบ Focus ไม่ถูกบดบังโดย Sticky Header หรือ Popup
• ทดสอบด้วย Screen Reader จริงในหน้าสำคัญ เช่น Checkout หรือฟอร์มติดต่อ ก่อน Launch

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

• ตรวจ Accessibility ครั้งเดียวตอนใกล้ Launch แทนที่จะตรวจทุกขั้นตอน
• เชื่อผลจาก Automated Scan อย่างเดียวโดยไม่ทดสอบ Keyboard หรือ Screen Reader จริง
• ใช้เช็กลิสต์เก่าของ WCAG 2.1 โดยไม่เพิ่มเกณฑ์ใหม่ของ 2.2 เช่น Target Size และ Dragging Movements
• ไม่มีเจ้าของชัดเจนในทีม ทำให้เช็กลิสต์ถูกข้ามเมื่อ Timeline ตึง
• บอกลูกค้าว่าเว็บไซต์ "ผ่าน WCAG" ทั้งที่ตรวจแค่บางหน้าด้วยเครื่องมืออัตโนมัติ

สรุป

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

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

เช็กลิสต์ WCAG 2.2 ควรเริ่มตรวจตั้งแต่ขั้นตอนไหนของโปรเจกต์

ควรเริ่มตั้งแต่ช่วง Design Handoff เพราะแก้ไขได้ง่ายและถูกที่สุด ก่อนจะลงลึกไปที่ช่วง Dev QA และ Pre-launch Review

เอเจนซีต้องใช้เครื่องมือแบบไหนตรวจ WCAG 2.2

ควรผสมทั้งเครื่องมือสแกนอัตโนมัติสำหรับคัดกรองเบื้องต้น และการทดสอบ Manual ด้วย Keyboard และ Screen Reader ในจุดที่เครื่องมือมองไม่เห็น

WCAG 2.2 ต่างจาก WCAG 2.1 อย่างไร

WCAG 2.2 เพิ่มเกณฑ์ใหม่ เช่น ขนาดพื้นที่แตะ พฤติกรรมการลาก และ Focus ไม่ถูกบดบัง โดยเกณฑ์เดิมของ 2.1 ยังใช้ได้ทั้งหมด

ถ้าตรวจแล้วผ่านเครื่องมืออัตโนมัติทั้งหมด แปลว่าเว็บไซต์ผ่าน WCAG แล้วหรือไม่

ไม่ใช่ ผลผ่านจากเครื่องมืออัตโนมัติหมายถึงผ่านเฉพาะเกณฑ์ที่เครื่องมือตรวจจับได้ ยังต้องมีการทดสอบ Manual เพิ่มเติมเพื่อดูภาพรวมทั้งหมด

ดูรายละเอียดเพิ่มเติมได้ที่ คู่มือ WCAG 2.2 สำหรับเอเจนซี และ ศูนย์ความรู้ Accessibility & Trust UX

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

• W3C — Web Content Accessibility Guidelines (WCAG) 2.2