อธิบาย WCAG 2.2: อะไรเปลี่ยนไป และระดับ AA ต้องการอะไรจากเว็บไซต์ของคุณ

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

ถ้ามีคนขอให้เว็บไซต์ผ่าน “WCAG 2.2 AA” งานส่วนใหญ่ไม่ใช่เรื่องใหม่ สิ่งที่เปลี่ยนจาก 2.1 ไปโผล่อยู่ในไม่กี่จุด ได้แก่ header ที่ติดขอบจอ แบนเนอร์คุกกี้ สไลเดอร์ ไอคอนเล็ก ๆ ฟอร์มหลายขั้นตอน และการล็อกอิน

คำตอบสั้น ๆ

• WCAG 2.2 คือมาตรฐานการเข้าถึงเว็บฉบับปัจจุบันของ W3C มีสถานะ Recommendation ตั้งแต่วันที่ 5 ตุลาคม 2023
• เพิ่ม เกณฑ์ความสำเร็จเก้าข้อ ต่อจาก WCAG 2.1 และตัดออกหนึ่งข้อ คือ 4.1.1 Parsing เพราะล้าสมัยแล้ว
• เกณฑ์ใหม่ หกข้อ อยู่ในระดับ A หรือ AA ได้แก่ 2.4.11 Focus Not Obscured (ขั้นต่ำ) 2.5.7 Dragging Movements 2.5.8 Target Size (ขั้นต่ำ) 3.2.6 Consistent Help 3.3.7 Redundant Entry และ 3.3.8 Accessible Authentication (ขั้นต่ำ) อีกสามข้อเป็นระดับ AAA
• WCAG 2.2 AA หมายถึงทุกหน้าผ่านเกณฑ์ความสำเร็จระดับ A และ AA ทั้งหมด รวม 55 ข้อ
• เข้ากันได้กับเวอร์ชันก่อน เนื้อหาที่ผ่าน 2.2 AA ก็ผ่าน 2.1 AA และ 2.0 AA ด้วย

ระดับความสอดคล้องของ WCAG ทำงานอย่างไร

เกณฑ์ความสำเร็จของ WCAG คือข้อความที่ทดสอบได้ ว่าหน้าเว็บผ่านหรือไม่ผ่าน แต่ละข้อมีหนึ่งในสามระดับ และระดับเหล่านี้สะสมกัน AA หมายถึงผ่านทุกเกณฑ์ระดับ A และทุกเกณฑ์ระดับ AA

ความสอดคล้องหมายถึงอะไรจริง ๆ

• นับทั้งหน้า รวมถึงแบนเนอร์คุกกี้ วิดเจ็ตแชท แผนที่ที่ฝังไว้ และเครื่องมือจอง ถ้าส่วนที่มาจากภายนอกไม่ผ่าน สิ่งที่คุณประกาศได้มากที่สุด คือแถลงการณ์ความสอดคล้องบางส่วน
• นับกระบวนการทั้งกระบวนการ ถ้าการขอใบเสนอราคาหรือการชำระเงินมีหลายขั้นตอน ทุกขั้นต้องผ่าน ไม่เช่นนั้นก็ไม่มีขั้นไหนผ่านได้
• ไม่มีคะแนนบางส่วน เกณฑ์ไม่ผ่านข้อเดียว หมายถึงหน้านั้นไม่สอดคล้อง “เกือบ AA” คือรายงานความคืบหน้า ไม่ใช่สิ่งที่ประกาศได้

ทำไมสัญญาถึงขอระดับ AA

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

WCAG 2.1 กับ 2.2: อะไรเปลี่ยนไป

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

ทำไม 4.1.1 Parsing ถึงถูกตัดออก

4.1.1 กำหนดให้มาร์กอัปมีรูปแบบที่ถูกต้อง เพราะในอดีตเทคโนโลยีสิ่งอำนวยความสะดวกอ่าน HTML เอง แต่ปัจจุบันพึ่งเบราว์เซอร์ และมาตรฐาน HTML ก็กำหนดไว้แล้วว่า เบราว์เซอร์ต้องจัดการข้อผิดพลาดในมาร์กอัปอย่างไร ปัญหาที่ยังกระทบคนจริง เช่น ID ซ้ำที่ทำให้ป้ายกำกับของฟอร์มใช้ไม่ได้ จะไม่ผ่าน 1.3.1 Info and Relationships หรือ 4.1.2 Name, Role, Value แทน W3C ยังเผยแพร่หมายเหตุสำหรับ WCAG 2.0 และ 2.1 ว่า ให้ถือว่า 4.1.1 ผ่านเสมอสำหรับ HTML และ XML

เกณฑ์ใหม่ระดับ A และ AA หกข้อ พร้อมตัวอย่าง

2.4.11 Focus Not Obscured (ขั้นต่ำ)

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

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

วิธีแก้ ตั้งค่า scroll-padding-top (และ scroll-padding-bottom) ให้เท่ากับความสูงของแถบที่ติดขอบจอ เพื่อให้เบราว์เซอร์เลื่อนอิลิเมนต์ที่ได้รับโฟกัส ให้พ้นจากแถบเหล่านั้น (เทคนิค C43 ของ W3C) ส่วนแบนเนอร์คุกกี้ ให้ทำเป็น modal ที่ต้องจัดการก่อน หรือเว้นระยะให้แบบเดียวกัน บทความ เมนูนำทางที่เข้าถึงได้และโฟกัสที่มองเห็นได้ ของเราลงลึกกว่านี้

2.5.7 Dragging Movements

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

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

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

2.5.8 Target Size (ขั้นต่ำ)

ระดับ AA พื้นที่คลิกและแตะต้องมีขนาดอย่างน้อย 24 × 24 CSS พิกเซล หรือถ้าเล็กกว่านั้น ต้องเว้นระยะห่างพอ จนวงกลมเส้นผ่านศูนย์กลาง 24 CSS พิกเซล ที่วางกึ่งกลางพื้นที่กดแต่ละอัน ไม่ทับพื้นที่กดอื่น หรือวงกลมของพื้นที่กดเล็กอันอื่น

บนเว็บไซต์จริง ไอคอนขนาด 16 พิกเซลที่เบียดกันใน footer ปุ่ม “×” ที่ใช้ปิดป๊อปอัป จุดของ carousel ซึ่งเป็นปุ่มควบคุมที่คนกดพลาดบนมือถือ ข้อยกเว้นมีทั้งลิงก์ที่อยู่ในประโยค ปุ่มควบคุมค่าเริ่มต้นของเบราว์เซอร์ ที่คุณไม่ได้ปรับขนาด และพื้นที่กดที่มีปุ่มอีกตัว ซึ่งทำหน้าที่เดียวกันและมีขนาดเต็ม อยู่บนหน้าเดียวกัน

มองให้ได้สัดส่วน 24 พิกเซลคือขั้นต่ำสุด ระดับ AAA (2.5.5) ขอ 44 × 44 CSS พิกเซล และ Human Interface Guidelines ของ Apple ขอปุ่มขนาดอย่างน้อย 44 × 44 พอยต์ บทความ mobile-first และ responsive design ของเราอธิบายการออกแบบเพื่อการสัมผัสตั้งแต่แรก

3.2.6 Consistent Help

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

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

3.3.7 Redundant Entry

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

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

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

3.3.8 Accessible Authentication (ขั้นต่ำ)

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

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

วิธีแก้ อนุญาตให้วาง มาร์กอัปช่องกรอกด้วย autocomplete="username" autocomplete="current-password" และ autocomplete="one-time-code" เพื่อให้เบราว์เซอร์และตัวจัดการรหัสผ่านกรอกให้ได้ และพิจารณาลิงก์เข้าระบบทางอีเมล หรือ passkey ส่วน CAPTCHA บนฟอร์มติดต่อสอบถามไม่ใช่การยืนยันตัวตน แต่ 1.1.1 กำหนดอยู่แล้วว่า CAPTCHA ต้องมีข้อความอธิบาย และมีเวอร์ชันสำหรับประสาทสัมผัสอื่น เช่น เสียง

สามข้อที่เพิ่มในระดับ AAA

ข้อกำหนด “WCAG 2.2 AA” ไม่ได้รวมข้อเหล่านี้ แต่มีข้อหนึ่งที่ทำได้ง่ายพอจะนำมาใช้อยู่ดี

• 2.4.12 Focus Not Obscured (ขั้นสูง) ไม่มีส่วนใดของอิลิเมนต์ที่ได้รับโฟกัสถูกบังได้เลย
• 2.4.13 Focus Appearance ตัวบอกโฟกัสต้องมีขนาดอย่างน้อยเท่ากับเส้นกรอบหนา 2 CSS พิกเซล รอบอิลิเมนต์ตอนที่ไม่ได้โฟกัส และมีคอนทราสต์อย่างน้อย 3:1 ระหว่างสถานะโฟกัสกับไม่โฟกัส เส้นกรอบทึบหนาตั้งแต่ 2 CSS พิกเซลขึ้นไป ที่คอนทราสต์ 3:1 กับพื้นรอบ ๆ โดยทั่วไปจะผ่าน และเป็นค่าตั้งต้นที่สมเหตุสมผล แม้ในระดับ AA
• 3.3.9 Accessible Authentication (ขั้นสูง) ตัดข้อยกเว้นเรื่องการจดจำวัตถุ และเนื้อหาส่วนตัวออก “เลือกทุกภาพที่มีรถบัส” จึงไม่ผ่านด้วยตัวมันเองอีกต่อไป

เช็กลิสต์ WCAG 2.2 AA สำหรับเกณฑ์ใหม่

ตรวจรายการเหล่านี้ในเทมเพลตหลักแต่ละตัว และในทุกฟอร์ม หน้าชำระเงิน และหน้าล็อกอิน

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

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

และมองหกข้อนี้ให้ได้สัดส่วน ถ้าเว็บไซต์ของคุณไม่เคยสร้างตามมาตรฐาน 2.1 AA มาก่อน สิ่งที่ได้ผลมากกว่าคือ คอนทราสต์ของสี alt text ป้ายกำกับฟอร์ม การใช้งานด้วยคีย์บอร์ด และหัวข้อ ซึ่งเป็นจุดเริ่มต้นของ คู่มือ web accessibility ฉบับใช้งานจริง ของเรา

แล้ว WCAG 3 ล่ะ?

WCAG 3 หรือชื่อทางการว่า W3C Accessibility Guidelines 3.0 คือฉบับที่วางแผนไว้เป็นรุ่นถัดไป ณ เวลาที่เขียน (กันยายน 2026) ยังเป็น Working Draft และโมเดลความสอดคล้องยังอยู่ระหว่างพัฒนา จึงยังไม่มีอะไรให้ทำตาม

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

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

WCAG 2.2 เป็นข้อบังคับทางกฎหมายไหม?

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

WCAG 2.2 มาแทน WCAG 2.1 ไหม?

ไม่ใช่อย่างเป็นทางการ 2.0 และ 2.1 ยังเป็น W3C Recommendation และกฎหมายกับสัญญาจำนวนมากยังระบุ 2.1 AA อยู่ แต่ W3C แนะนำให้ตั้งเป้าที่ 2.2 แม้ในกรณีนั้น และการผ่าน 2.2 AA ก็ผ่าน 2.1 AA ไปด้วย

WCAG 2.2 AA มีเกณฑ์ความสำเร็จกี่ข้อ?

55 ข้อ คือระดับ A 31 ข้อ และระดับ AA 24 ข้อ เมื่อรวมเกณฑ์ระดับ AAA อีก 31 ข้อ WCAG 2.2 มีทั้งหมด 86 ข้อ ไม่นับ 4.1.1 Parsing ที่ถูกตัดออก

ต้องตรวจสอบการเข้าถึงใหม่สำหรับ WCAG 2.2 ไหม?

ไม่จำเป็นเสมอไป ถ้าการตรวจสอบล่าสุดทดสอบตาม 2.1 AA ให้ตรวจเกณฑ์ใหม่ระดับ A และ AA หกข้อ รวมถึงทุกอย่างที่เพิ่มเข้ามาหลังจากนั้น เช่น เทมเพลต ปลั๊กอิน แบนเนอร์ หรือวิดเจ็ตใหม่

ขั้นต่อไป

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

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